@rio-cloud/uikit-mcp 1.1.0 → 1.1.2

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 (192) hide show
  1. package/README.md +1 -0
  2. package/dist/doc-metadata.json +20 -20
  3. package/dist/docs/components/accentBar.md +1 -1
  4. package/dist/docs/components/activity.md +1 -1
  5. package/dist/docs/components/animatedNumber.md +2 -2
  6. package/dist/docs/components/animatedTextReveal.md +6 -6
  7. package/dist/docs/components/animations.md +31 -31
  8. package/dist/docs/components/appHeader.md +1 -1
  9. package/dist/docs/components/appLayout.md +74 -16
  10. package/dist/docs/components/appNavigationBar.md +1 -1
  11. package/dist/docs/components/areaCharts.md +5 -5
  12. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  13. package/dist/docs/components/assetTree.md +371 -464
  14. package/dist/docs/components/autosuggests.md +1 -1
  15. package/dist/docs/components/avatar.md +1 -1
  16. package/dist/docs/components/banner.md +2 -2
  17. package/dist/docs/components/barCharts.md +13 -33
  18. package/dist/docs/components/barList.md +11 -11
  19. package/dist/docs/components/basicMap.md +1 -1
  20. package/dist/docs/components/bottomSheet.md +1 -1
  21. package/dist/docs/components/button.md +1 -1
  22. package/dist/docs/components/buttonToolbar.md +1 -1
  23. package/dist/docs/components/calendarStripe.md +50 -66
  24. package/dist/docs/components/card.md +1 -1
  25. package/dist/docs/components/carousel.md +1 -1
  26. package/dist/docs/components/chartColors.md +1 -1
  27. package/dist/docs/components/chartsGettingStarted.md +1 -1
  28. package/dist/docs/components/chat.md +1 -1
  29. package/dist/docs/components/checkbox.md +1 -1
  30. package/dist/docs/components/clearableInput.md +1 -1
  31. package/dist/docs/components/collapse.md +2 -2
  32. package/dist/docs/components/composedCharts.md +15 -15
  33. package/dist/docs/components/contentLoader.md +101 -101
  34. package/dist/docs/components/dataTabs.md +9 -9
  35. package/dist/docs/components/datepickers.md +29 -29
  36. package/dist/docs/components/dialogs.md +1 -1
  37. package/dist/docs/components/divider.md +1 -1
  38. package/dist/docs/components/dropdowns.md +4398 -4368
  39. package/dist/docs/components/editableContent.md +1 -1
  40. package/dist/docs/components/expander.md +1 -1
  41. package/dist/docs/components/fade.md +1 -1
  42. package/dist/docs/components/fadeExpander.md +1 -1
  43. package/dist/docs/components/fadeUp.md +2 -2
  44. package/dist/docs/components/feedback.md +1 -1
  45. package/dist/docs/components/filePickers.md +1 -1
  46. package/dist/docs/components/formLabel.md +1 -1
  47. package/dist/docs/components/fullscreenMap.md +1 -1
  48. package/dist/docs/components/groupedItemList.md +1 -1
  49. package/dist/docs/components/iconList.md +3 -3
  50. package/dist/docs/components/imagePreloader.md +1 -1
  51. package/dist/docs/components/labeledElement.md +1 -1
  52. package/dist/docs/components/licensePlate.md +1 -1
  53. package/dist/docs/components/lineCharts.md +5 -5
  54. package/dist/docs/components/listMenu.md +1 -1
  55. package/dist/docs/components/loadMore.md +1 -1
  56. package/dist/docs/components/mainNavigation.md +1 -1
  57. package/dist/docs/components/mapCircle.md +1 -1
  58. package/dist/docs/components/mapCluster.md +1 -1
  59. package/dist/docs/components/mapContext.md +1 -1
  60. package/dist/docs/components/mapDraggableMarker.md +1 -1
  61. package/dist/docs/components/mapGettingStarted.md +1 -1
  62. package/dist/docs/components/mapInfoBubble.md +1 -1
  63. package/dist/docs/components/mapLayerGroup.md +1 -1
  64. package/dist/docs/components/mapMarker.md +1 -1
  65. package/dist/docs/components/mapPolygon.md +1 -1
  66. package/dist/docs/components/mapRoute.md +1 -1
  67. package/dist/docs/components/mapRouteGenerator.md +1 -1
  68. package/dist/docs/components/mapSettings.md +1 -1
  69. package/dist/docs/components/mapUtils.md +1 -1
  70. package/dist/docs/components/multiselects.md +1 -1
  71. package/dist/docs/components/noData.md +1 -1
  72. package/dist/docs/components/notifications.md +1 -1
  73. package/dist/docs/components/numbercontrol.md +1 -1
  74. package/dist/docs/components/onboarding.md +1 -1
  75. package/dist/docs/components/page.md +1 -1
  76. package/dist/docs/components/pager.md +1 -1
  77. package/dist/docs/components/pieCharts.md +69 -37
  78. package/dist/docs/components/popover.md +1 -1
  79. package/dist/docs/components/position.md +1 -1
  80. package/dist/docs/components/radialBarCharts.md +17 -17
  81. package/dist/docs/components/radiobutton.md +1 -1
  82. package/dist/docs/components/releaseNotes.md +1 -1
  83. package/dist/docs/components/resizer.md +1 -1
  84. package/dist/docs/components/responsiveColumnStripe.md +1 -1
  85. package/dist/docs/components/responsiveVideo.md +1 -1
  86. package/dist/docs/components/rioglyph.md +1 -1
  87. package/dist/docs/components/rules.md +3 -3
  88. package/dist/docs/components/saveableInput.md +19 -19
  89. package/dist/docs/components/selects.md +1 -1
  90. package/dist/docs/components/sidebar.md +1 -1
  91. package/dist/docs/components/sliders.md +1 -1
  92. package/dist/docs/components/smoothScrollbars.md +1 -1
  93. package/dist/docs/components/spinners.md +1 -1
  94. package/dist/docs/components/states.md +1 -1
  95. package/dist/docs/components/statsWidgets.md +1 -1
  96. package/dist/docs/components/statusBar.md +1 -1
  97. package/dist/docs/components/stepButton.md +1 -1
  98. package/dist/docs/components/steppedProgressBars.md +1 -1
  99. package/dist/docs/components/subNavigation.md +1 -1
  100. package/dist/docs/components/supportMarker.md +1 -1
  101. package/dist/docs/components/svgImage.md +1 -1
  102. package/dist/docs/components/switch.md +1 -1
  103. package/dist/docs/components/tables.md +1 -1
  104. package/dist/docs/components/tagManager.md +1 -1
  105. package/dist/docs/components/tags.md +1 -1
  106. package/dist/docs/components/teaser.md +1 -1
  107. package/dist/docs/components/timeline.md +1 -1
  108. package/dist/docs/components/timepicker.md +1 -1
  109. package/dist/docs/components/toggleButton.md +1 -1
  110. package/dist/docs/components/tooltip.md +1 -1
  111. package/dist/docs/components/virtualList.md +73 -70
  112. package/dist/docs/foundations.md +112 -112
  113. package/dist/docs/start/changelog.md +715 -434
  114. package/dist/docs/start/goodtoknow.md +1 -1
  115. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  116. package/dist/docs/start/guidelines/custom-css.md +1 -1
  117. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  118. package/dist/docs/start/guidelines/formatting.md +1 -1
  119. package/dist/docs/start/guidelines/iframe.md +2 -2
  120. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  121. package/dist/docs/start/guidelines/print-css.md +1 -1
  122. package/dist/docs/start/guidelines/spinner.md +81 -81
  123. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  124. package/dist/docs/start/guidelines/writing.md +1 -1
  125. package/dist/docs/start/howto.md +9 -9
  126. package/dist/docs/start/intro.md +1 -1
  127. package/dist/docs/start/responsiveness.md +1 -1
  128. package/dist/docs/templates/common-table.md +11 -11
  129. package/dist/docs/templates/detail-views.md +2 -2
  130. package/dist/docs/templates/expandable-details.md +1 -1
  131. package/dist/docs/templates/feature-cards.md +55 -55
  132. package/dist/docs/templates/form-summary.md +22 -22
  133. package/dist/docs/templates/form-toggle.md +1 -1
  134. package/dist/docs/templates/list-blocks.md +206 -206
  135. package/dist/docs/templates/loading-progress.md +3 -3
  136. package/dist/docs/templates/options-panel.md +1 -1
  137. package/dist/docs/templates/panel-variants.md +1 -1
  138. package/dist/docs/templates/progress-cards.md +1 -1
  139. package/dist/docs/templates/progress-success.md +1 -1
  140. package/dist/docs/templates/settings-form.md +23 -23
  141. package/dist/docs/templates/stats-blocks.md +16 -16
  142. package/dist/docs/templates/table-panel.md +1 -1
  143. package/dist/docs/templates/table-row-animation.md +1 -1
  144. package/dist/docs/templates/usage-cards.md +1 -1
  145. package/dist/docs/utilities/deviceUtils.md +1 -1
  146. package/dist/docs/utilities/featureToggles.md +1 -1
  147. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  148. package/dist/docs/utilities/routeUtils.md +1 -1
  149. package/dist/docs/utilities/useAfterMount.md +1 -1
  150. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  151. package/dist/docs/utilities/useAverage.md +1 -1
  152. package/dist/docs/utilities/useClickOutside.md +1 -1
  153. package/dist/docs/utilities/useClipboard.md +2 -2
  154. package/dist/docs/utilities/useCount.md +1 -1
  155. package/dist/docs/utilities/useDarkMode.md +1 -1
  156. package/dist/docs/utilities/useDebugInfo.md +4 -4
  157. package/dist/docs/utilities/useEffectOnce.md +1 -1
  158. package/dist/docs/utilities/useElapsedTime.md +1 -1
  159. package/dist/docs/utilities/useElementSize.md +1 -1
  160. package/dist/docs/utilities/useEsc.md +1 -1
  161. package/dist/docs/utilities/useEvent.md +1 -1
  162. package/dist/docs/utilities/useFocusTrap.md +1 -1
  163. package/dist/docs/utilities/useFullscreen.md +1 -1
  164. package/dist/docs/utilities/useHover.md +1 -1
  165. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  166. package/dist/docs/utilities/useInterval.md +1 -1
  167. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  168. package/dist/docs/utilities/useKey.md +1 -1
  169. package/dist/docs/utilities/useLocalStorage.md +1 -1
  170. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  171. package/dist/docs/utilities/useMax.md +1 -1
  172. package/dist/docs/utilities/useMin.md +1 -1
  173. package/dist/docs/utilities/useMutationObserver.md +1 -1
  174. package/dist/docs/utilities/useOnScreen.md +1 -1
  175. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  176. package/dist/docs/utilities/usePostMessage.md +1 -1
  177. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  178. package/dist/docs/utilities/usePrevious.md +1 -1
  179. package/dist/docs/utilities/useResizeObserver.md +1 -1
  180. package/dist/docs/utilities/useScrollPosition.md +1 -1
  181. package/dist/docs/utilities/useSearch.md +1 -1
  182. package/dist/docs/utilities/useSorting.md +1 -1
  183. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  184. package/dist/docs/utilities/useSum.md +1 -1
  185. package/dist/docs/utilities/useTableExport.md +51 -51
  186. package/dist/docs/utilities/useTableSelection.md +87 -87
  187. package/dist/docs/utilities/useTimeout.md +1 -1
  188. package/dist/docs/utilities/useToggle.md +1 -1
  189. package/dist/docs/utilities/useWindowResize.md +1 -1
  190. package/dist/index.mjs +1 -1
  191. package/dist/version.json +2 -2
  192. package/package.json +1 -1
@@ -44,7 +44,7 @@
44
44
  "title": "Animations",
45
45
  "lead": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
46
46
  "summary": "The UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.",
47
- "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem G3AEKDJFMTH\n\nItem Y640NYGGSS\n\nItem RI4FQRRE3B\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem ARY5RVCSMF\n\nItem U1KJFLCL5Y\n\nItem ZJVCAWDL2C\n\nItem HTUBO1CPKC\n\nItem 0LO3ZAEIMI\n\nItem 0FRJQMCFAD",
47
+ "searchText": "Animations\nThe UIKIT uses the famous animation library Motion former known as Framer Motion. To allow services to use Motion without adding it as a dependency to their project, the UIKIT re-exports all motion/reactcomponents.\nAnimations\nThe official documentation can be found here https://motion.dev/docs/react\nSome Data\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nAdd ItemItem B5WVP1454N\n\nItem B2NSH3LST8\n\nItem U0X067T8JOG\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\nLoad ItemsItem 38PP430D6M\n\nItem RPNOB6D411\n\nItem AQQ4M0ZVKXI\n\nItem KTZKI295U1\n\nItem 5DTMWYDMLFH\n\nItem Z5EJ4VMHJ1H",
48
48
  "category": "Components",
49
49
  "section": "Content",
50
50
  "boost": "Animations components/animations #components/animations Components Content"
@@ -64,7 +64,7 @@
64
64
  "title": "ApplicationLayout",
65
65
  "lead": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
66
66
  "summary": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
67
- "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n3\n1\n1\n\nAsset Group2\nVehicle-2511Asset 1002\nVehicle-6810Asset 1001\n\nUngrouped3\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
67
+ "searchText": "ApplicationLayout\nThe ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar\nApplicationLayout\nThe ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\nNote: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragmentinstead\n\nNote: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <bodynode.\nDefault example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSubNavigation example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBody banner example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nBottom bar example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nSidebar Example\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\nSidebar Right\n\nSidebar components may be added here...\n\nButton\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n3\n1\n2\n1\n\nAsset Group5\nVehicle-2702Asset 1002\nVehicle-2861Asset 1006\nVehicle-3712Asset 1001\nVehicle-6558Asset 1000\nVehicle-9897Asset 1003\n\nUngrouped2\n\n200\n\nSidebar Right\n\nSidebar components may be added here...\n\nClose\n\nSubnavigation 1\nSubnavigation 2\nSubnavigation 3\n\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\nSample Service Content\nOpen Sidebar\nLorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.\n\nIn mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;\n\nPraesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.\n\nBottom Button\n### ApplicationLayout\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutHeader\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutSidebar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| ref | React.ref | — | A React ref function assigned to the wrapper element. |\n| className | String | — | Additional class names that are added to the respective component. |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| innerClassName | String | — | Additional class names that are added to the inner module-content component. |\n| children | any | — | Any component given to the layout components will be rendered |\n| navigation | any | — | The ApplicationLayoutBodyNavigation component. |\n| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |\n| bottomBar | Node \\| String | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |\n| banner | any | — | The ApplicationLayoutBodyBanner component. |\n### ApplicationLayoutBodyNavigation\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. Example: \"has-offset\" |\n### ApplicationLayoutBodyBottomBar\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |\n| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| className | String | — | Additional class names that are added to the respective component. |\n| backgroundColor | String | bg-primary | One of our bg-color utility classes. |\n| textColor | string | text-color-white | One of our text-color utility classes. |\n| isSticky | Boolean | false | Sticky while scrolling. |",
68
68
  "category": "Components",
69
69
  "section": "Application",
70
70
  "boost": "ApplicationLayout components/appLayout #components/appLayout Components Application"
@@ -104,7 +104,7 @@
104
104
  "title": "AssetTree",
105
105
  "lead": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
106
106
  "summary": "The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.",
107
- "searchText": "AssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nAssetTree\nFilter\n\n5272\n4\n\nGroup - Aaron Walsh - 413913\n\nGroup - Abel O'Reilly I - 66006\n\nGroup - Adrian Schulist - 692310\n\nGroup - Adrienne Gislason - 484912\n\nGroup - Adrienne Yost - 593010\n\nGroup - Alex Connelly - 289915\n\nGroup - Alex Rowe - 568311\n\nGroup - Alice Harris - 978010\n\nGroup - Allan Auer V - 493512\n\nGroup - Allan Jenkins IV - 59835\n\nGroup - Alma Brakus PhD - 48176\n\nGroup - Alton Konopelski - 71095\n\nGroup - Alton Pollich - 18919\n\nGroup - Alyssa Collins - 26536\n\nGroup - Alyssa Lueilwitz III - 462815\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n8\n8\n6\n8\n\nMy Empty Group5\n\nTruck Group East7\n\nTruck Group North2\nN18-G566 / M-AN 1026\nN18-G990 / M-AN 1003\n\nTruck Group South6\n\nTruck Group West4\n\nAll my unassigned Trucks6\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n6\n7\n3\n4\n\n10\n1\n2\n4\n3\n\nMixed Vehicles13\n\nVehicle-1755Debug: diesel\n\nVehicle-3278Debug: dual_fuel_diesel_cng\n\nVehicle-3365Debug: electric\n\nVehicle-4034Debug: diesel\n\nVehicle-5000Debug: diesel\n\nVehicle-7205Debug: hydrogen\n\nVehicle-7245Debug: hydrogen\n\nVehicle-7410Debug: diesel\n\nVehicle-8099Debug: heavy_fuel_oil\n\nVehicle-8194Debug: heavy_fuel_oil\n\nVehicle-8207Debug: lpg\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 016\n\nFolder 026\n\nFolder 031\n\nFolder 047\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 013\n\nFolder 028\n\nFolder 034\n\nFolder 045\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
107
+ "searchText": "AssetTree\nThe asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.\nAssetTree\nFilter\n\n5413\n4\n\nGroup - Abel Botsford - 848515\n\nGroup - Ada O'Keefe IV - 40215\n\nGroup - Albert Kulas - 345412\n\nGroup - Alberta Runolfsdottir - 878116\n\nGroup - Alexander Johns - 72049\n\nGroup - Alexandra Jenkins Jr. - 462611\n\nGroup - Alfonso Runte - 64749\n\nGroup - Alice Ferry Jr. - 32587\n\nGroup - Alison Luettgen - 641912\n\nGroup - Alonzo Ratke - 810014\n\nGroup - Alton Mueller - 81233\n\nGroup - Alyssa Walsh - 25789\n\nGroup - Amanda Heaney - 34019\n\nGroup - Amanda Klocko - 940415\n\n200\n\n200\n\nLoad trucksClear treeToggle all groups selection\n\nCurrent category:\ntrucks\nSelected groups:\n\nSelected assets:\n\nExpanded groups:\nTrailer Group\n\nSelected drivers:\n\nSearch value:\n\nAsset type filter:\n[]\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n10\n7\n3\n10\n\nMy Empty Group4\n\nTruck Group East5\n\nTruck Group North8\nN18-G101 / M-AN 1020\nN18-G103 / M-AN 1023\nN18-G324 / M-AN 1025\nN18-G330 / M-AN 1000\nN18-G508 / M-AN 1005\nN18-G609 / M-AN 1024\nN18-G747 / M-AN 1003\nN18-G997 / M-AN 1010\n\nTruck Group South3\n\nTruck Group West6\n\nAll my unassigned Trucks4\n\nCurrent category:\nassets\nSelected tree groups:\n\nSelected assets:\n\nExpanded tree groups:\nTruck Group North\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\nWhen using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.\n8\n6\n2\n4\n\n8\n5\n4\n2\n1\n\nMixed Vehicles7\nVehicle-1093Debug: electric\nVehicle-1580Debug: heavy_fuel_oil\nVehicle-3686Debug: gas\nVehicle-4687Debug: gas\nVehicle-6053Debug: diesel\nVehicle-6103Debug: cng\nVehicle-6758Debug: hydrogen\n\nUngrouped13\n\nSelected groups:\n\nSelected vehicles:\n\nExpanded groups:\nMixed Vehicles\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with custom summary\n3\n15\n\nJohnDoe\nMaxlRainer\nJohanSchmidt\n\nSome small dummy text at the bottom to showcase that you can put something here\n### AssetTree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| fly | boolean | false | Defines if the component will overlap the body content. |\n| resizable | boolean | true | Defines whether or not the sidebar is resizable. |\n| onResizeEnd | Function | () ={} | Callback for when the resize is done. |\n| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |\n| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |\n| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |\n| height | number | — | Defines the height of the component in px. |\n| isOpen | boolean | true | Defines whether the component is open or not. |\n| onToggleTree | Function | () ={} | Callback for when the tree visibility is toggled. |\n| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |\n| onCategoryChange | Function | () ={} | Callback for handling change of category. |\n| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |\n| className | String | — | Additional classes added on the wrapper element. |\n| children | TreeCategory | — | A list of TreeCategory components |\n### TreeCategory\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | A unique identifier for that category. |\n| icon | String | — | The rioglyph icon name for that category. |\n| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |\n| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSearch\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| value | String | — | The search value to be shown and used for the search. |\n| onChange | Function | () ={} | Callback for when the search value changes. |\n| placeholder | String | — | The placeholder text used for the input field. |\n| className | String | — | Additional classes added to the wrapping element. |\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TreeSummaryRow\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | — | Defines whether the option is set. |\n| label | string / node | — | The label for the option. |\n| onChange | Function | — | Callback triggered when option is selected. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 015\n\nFolder 025\n\nFolder 036\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTree without header and search\n\nFolder 014\n\nFolder 028\n\nFolder 035\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |\n| └id | String | — | A unique identifier of a group. |\n| └name | String | — | The name of a group. |\n| └position | string | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | Boolean | — | Disallows the selection of the group itself. |\n| └className | String | — | Additional classes added to the group element. |\n| items | Array of Objects | [] | The list of items. |\n| └id | String | — | A unique identifier of an item. |\n| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |\n| └info | String \\| Node | — | The subline of an item. |\n| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |\n| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. |\n| └icon | string \\| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |\n| └groupIds | Array of strings | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | Array of strings | — | List of selected group ids. |\n| selectedItems | Array of strings | — | List of selected item ids. |\n| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |\n| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |\n| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |\n| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |\n| searchPlaceholder | string | — | The text used as placeholder for the search input. |\n| onSearchChange | Function | — | Callback for when the search value changes. |\n| search | node | — | Used to define custom custom search component which replaces the built-in search. |\n| onTypeFilterChange | (currentTypes: string[]) =void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |\n| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |\n| hideSummary | boolean | false | Defines whether a summary is shown. |\n| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |\n| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |\n| scrollHeight | Number | — | Defines the max-height of the scrollable list |\n| expandedGroups | Array of String | — | List of group ids which are expanded. |\n| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | ReactNode | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |\n| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |\n| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |\n| className | String | — | Additional classes added to the wrapping element. |\nTreeSummary with assetCounts\n12\n7\n2\n2\n10\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |\nTreeSummary with TypeCounter\n9\n15\n### TreeSummary\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| assetCounts | object | — | The object containing various asset type counter. |\n| └truck | number | — | The amount of trucks. |\n| └trailer | number | — | The amount of trailers. |\n| └bus | number | — | The amount of buses. |\n| └van | number | — | The amount of vans. |\n| └driver | number | — | The amount of drivers. |\n| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |\n| className | string | — | Additional classes added to the wrapping element. |\n### TypeCounter\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |\n| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |\n| isActive | Boolean | — | Sets the active styling if active. |\n| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |\n| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |\n| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the \"type\" prop is defined to receive the value in the callback and the flag \"enableActivity\" is set to true otherwise the callback is not triggered. |\n| value | String / Number / Node | — | A custom value to be shown in the counter. |",
108
108
  "category": "Components",
109
109
  "section": "Selection",
110
110
  "boost": "AssetTree components/assetTree #components/assetTree Components Selection"
@@ -204,7 +204,7 @@
204
204
  "title": "CalendarStripe",
205
205
  "lead": "A headless component where you provide a function that renders the UI for every day to be displayed.",
206
206
  "summary": "A headless component where you provide a function that renders the UI for every day to be displayed.",
207
- "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nSaturday\n13 December 2025\n\nSunday\n14 December 2025\n\nMonday\n15 December 2025\n\nTuesday\n16 December 2025\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nDec\n13\n2025\n\nDec\n14\n2025\n\nDec\n15\n2025\n\nDec\n16\n2025\n\nDec\n17\n2025\n\nDec\n18\n2025\n\nDec\n19\n2025\n\nDec\n20\n2025\n\nDec\n21\n2025\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
207
+ "searchText": "CalendarStripe\nA headless component where you provide a function that renders the UI for every day to be displayed.\nCalendarStripe\nTuesday\n16 December 2025\n\nWednesday\n17 December 2025\n\nThursday\n18 December 2025\n\nFriday\n19 December 2025\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |\nDec\n16\n2025\n\nDec\n17\n2025\n\nDec\n18\n2025\n\nDec\n19\n2025\n\nDec\n20\n2025\n\nDec\n21\n2025\n\nDec\n22\n2025\n\nSet to JanuaryToggle Weekends\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| minDayWith | Number | 200 | The minimum width in pixel of a single day column. This value determines how many days are shown per page depending on the parent width. |\n| minDays | Number | 1 | The minimum amount of days that should be shown per page. |\n| maxDays | Number | 7 | The maximum amount of days that should be shown per page. |\n| skipWeekends | Boolean | false | Defines whether the days for the weekends are included or not. |\n| startDate | Date | new Date() | The date of the first day that are rendered. |\n| renderDay | Function | — | A function that renders each individual day to be displayed. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| buttonClassName | String | — | Additional classes set to the navigation buttons. |\n| className | String | — | Additional classes set to the calendar element. |\n| daysWrapperClassNames | String | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassNames | String | — | Additional classes set to the day wrapper element. |",
208
208
  "category": "Components",
209
209
  "section": "Misc",
210
210
  "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
@@ -324,7 +324,7 @@
324
324
  "title": "DatePicker",
325
325
  "lead": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
326
326
  "summary": "A wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.",
327
- "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nOnly month\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nWith min-width\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and optional value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n01:38\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nTo:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
327
+ "searchText": "DatePicker\nA wrapper component for react-datetime. It has a Moment.js peer dependency, which means it needs to add to your list of dependencies to work correctly.\nDatePicker\nIt can be used in two ways, as a controlled or uncontrolled component. If you want to use it as a controlled component, pass a value, which you need to provide the DatePicker even after a user selects a new date. If you want to use it as an uncontrolled component, simply omit the value prop (for read-only use cases).\n\nNote: The DatePicker component uses the default format for the given locale. If you specify a locale, make sure you have imported the moment locale file like import 'moment/dist/locale/de';\nDefaultFormat: YYYY-MM-DD HH:mm\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nOnly month\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nOnly time\n\n▲12\n▼\n:\n▲00\n▼\n▲AM\n▼\n\nNot closing when selecting\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nWith min-width\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nClearableInput and optional value\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n04:02\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nTo:\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nNote\nWatch out: When no locale is defined, the component falls back to the default american format, which should be avoided. See our writing guidelines.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00 AM\n\nReset\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | An id used for the internal input element. |\n| initialValue | Date / Moment | — | Default value of the DatePicker (date or moment). |\n| value | Object | — | Value of the DatePicker (date or moment). Use this only if you want to use this component as a controlled component |\n| onChange | (value: Moment \\| string, isValid: boolean) =void | () ={} | Callback function when the value changes. Receives the new date (moment) and a boolean (whether date is valid or not) as arguments. |\n| locale | String | 'en-GB' | Locale for date format. |\n| dropup | Boolean | false | Defines whether the dropdown opens upwards or not. |\n| clearableInput | Boolean | false | Defines whether the clearableInput button is shown. |\n| closeOnSelect | Boolean | true | Once the day has been selected, the date picker will be closed automatically. |\n| alignRight | boolean | — | Opens the picker right aligned. |\n| minWidth | Number | 0 | Optional min-width value (without px). Since the DatePicker has a max-width of 100% you can also set a high minWidth number to use 100% with of the parent element. A value of \"0\" means no extra width is set and it becomes 100% width of the parent. |\n| dateValidation | (date: Date \\| string \\| Moment) =boolean | — | Overwrites the internal date validation function in case you need to customize it. |\n| dateFormat | Boolean \\| String | — | Defines the format for the date. It accepts any moment.js date format. If true the date will be displayed using the defaults for the current locale. If false the date picker is disabled and the component can be used as time picker. |\n| timeFormat | Boolean \\| String | — | Defines the format for the time. It accepts any moment.js time format. If true the time will be displayed using the defaults for the current locale. If false the time picker is disabled and the component can be used as date picker. |\n| mandatory | Boolean | true | Defines whether the input shows an error when the date is invalid or cleared. |\n| inputProps | React.HTMLProps<HTMLInputElement| — | Defines additional attributes for the input element of the component. |\n| className | String | — | Additional classes to be set on the DatePicker element. |\nSelects are a simple alternative for choosing dates0101\n02\n03\n04\n05\n06\n07\n08\n09\n10\n11\n12\n13\n14\n15\n16\n17\n18\n19\n20\n21\n22\n23\n24\n25\n26\n27\n28\n29\n30\n31\n\nJanuaryJanuary\nFebruary\nMarch\nApril\nMay\nJune\nJuly\nAugust\nSeptember\nOctober\nNovember\nDecember\n\n20222022\n2023\n2024\n2025\n2026\n2027\n\nSat Jan 01 2022 00:00:00 GMT+0100 (Central European Standard Time)",
328
328
  "category": "Components",
329
329
  "section": "Pickers",
330
330
  "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
@@ -354,7 +354,7 @@
354
354
  "title": "Dropdowns",
355
355
  "lead": "Wrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.",
356
356
  "summary": "Wrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.",
357
- "searchText": "Dropdowns\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nDropdowns\nButtonDropdown\nSimpleButtonDropdown\n\nSingleButtonDropdown\n\nWrapper component for ButtonDropdown, kept for backwards compatibility.\n\nSplitButtonDropdown\n\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nSingleButtonDropdown\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | \"\" | Displayed button title. |\n| items | Array of Objects | [] | Details see above for the ButtonDropdown |\n| disabled | Boolean | false | Disables every entry on the title list item. |\n| className | String | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Viverra massa pharetra aliquam in efficitur elit. semper. dui ante\n\n2Fusce tortor semper. in sagittis nunc eget Integer iaculis. volutpat ut\n\n3Hendrerit ipsum in, ut ipsum posuere ante malesuada\n\n4Eget semper. sit ac finibus consectetur in posuere lorem Vivamus rutrum iaculis. adipiscing Fusce et\n\n5Viverra ipsum enim semper elit. consectetur ipsum efficitur adipiscing tortor in bibendum, finibus\n\n6Ante lorem hendrerit eget bibendum, massa, nec orci, malesuada efficitur\n\n7In semper. dolor massa, in fames\n\n8Enim et posuere pretium vel\n\n9Malesuada posuere lorem neque. hendrerit efficitur semper vel faucibus. molestie elit. vel felis.\n\n10Tortor massa, Ut elit. sit bibendum, consectetur molestie molestie\n\n11Elit. nunc efficitur adipiscing dui finibus ac semper elit. fames Mauris\nLorem nunc purus et\n\n12Eget ipsum vel eget fames ut dui adipiscing\n\n13Integer adipiscing\nLorem consectetur nunc eget in, in, malesuada Vivamus est\n\n14Dolor pretium rutrum sit fringilla bibendum, ante ipsum\n\n15Ipsum ligula ante aliquam purus metus ipsum In pharetra nec\n\n16Pretium ac massa bibendum, felis. Sed elit. semper. ac elementum elit. sit posuere elit.\n\n17Efficitur velit. Vivamus ipsum consectetur aliquam fames dui\n\n18Ac dolor ac finibus elementum eget semper malesuada\n\n19In velit. Interdum faucibus. et et semper in elementum ipsum fames tincidunt. Vivamus et\n\n20Eget Sed aliquam bibendum, elit. Mauris Vivamus ut molestie ante\n\n21Sem. aliquam rutrum et rutrum semper orci, eget metus Duis malesuada ac\n\n22Ac rutrum finibus ac molestie pretium fames\n\n23Ante vel metus finibus efficitur Vivamus Ut vel fames ut tincidunt. in, ac\n\n24Felis. dui molestie consectetur aliquam in ac sit bibendum, ante orci massa ligula elit.\n\n25Ligula ac in efficitur ante elit. ut elit. enim in elit. tincidunt. in in\n\n26Ac velit. ipsum scelerisque ipsum et semper. sem. tincidunt. hendrerit massa, fringilla Interdum\n\n27Consectetur Ut aliquam Duis ac vitae ut Duis ac fringilla Duis\n\n28In nec neque. Sed elit. aliquam Sed ligula in orci, nec vel\n\n29Nec pharetra tortor ligula efficitur bibendum, consectetur est\n\n30Scelerisque ut semper. viverra massa, est\n\n31Et quis, malesuada Integer rutrum\n\n32Bibendum, elit. ante rutrum ante est nec viverra semper. libero condimentum\n\n33Efficitur posuere semper. lorem orci, tincidunt.\n\n34Ac Sed fringilla eget dui dui ut tortor velit.\n\n35Ante semper orci vel libero quis, semper. In consectetur scelerisque in ante Interdum\n\n36Semper eget quis, Duis et scelerisque\n\n37Faucibus. fringilla viverra malesuada purus molestie purus\n\n38Nunc finibus orci, est tincidunt. Vivamus\n\n39Consectetur velit. ut in, eget vel vitae felis. fringilla efficitur vitae\n\n40Fames ut nunc faucibus. in semper. primis libero efficitur adipiscing purus\n\n41Massa, vitae in ut amet, finibus bibendum, enim elit. Integer\nLorem\n\n42Eget efficitur in elit. ut ut consectetur scelerisque\nLorem dui nunc elit. hendrerit tortor\n\n43Consectetur in, ac felis. molestie ante ac ante pharetra semper. libero nunc\n\n44Metus et dolor faucibus. condimentum pretium\n\n45Posuere eget ante sit fames nec ipsum\n\n46Dui elit. est ligula et in,\n\n47Faucibus. Ut quis, Mauris orci, volutpat tortor Ut posuere sagittis dolor massa consectetur consectetur et\n\n48In et tortor quis, felis. est ante posuere nec et ante\n\n49Faucibus. Sed malesuada massa, Vivamus Interdum ac lorem volutpat pharetra Ut\n\n50Massa, pharetra ac semper purus tortor metus fringilla iaculis. ipsum metus\n\n51Tincidunt. adipiscing velit. consectetur ac viverra et rutrum elit. in, sagittis efficitur fames nec Mauris\n\n52Libero orci, finibus elit. ipsum Vivamus tortor primis Ut pretium iaculis. Ut ac\n\n53Primis massa aliquam molestie massa, in,\n\n54In ac metus consectetur Ut rutrum ante nec In massa Sed amet,\n\n55Dui nunc pharetra quis, fames amet, metus ante pretium ac scelerisque sem. semper.\n\n56Ut primis velit. ut efficitur\n\n57Duis vitae libero vitae dui bibendum, vel in bibendum, pharetra faucibus. aliquam\n\n58Iaculis. primis felis. In posuere\n\n59Ante finibus purus tortor orci, efficitur\n\n60Semper vel elementum in amet, efficitur enim fringilla elit. et pretium fringilla\n\n61Orci, sagittis pretium ac sem. et ac neque. nec rutrum faucibus. malesuada posuere\n\n62Elementum et orci ac fames enim et bibendum, ac fringilla finibus et\n\n63Ut velit. fames sagittis\nLorem bibendum, faucibus. ac\n\n64Neque. quis, Fusce aliquam semper. nec nunc\nLorem ac Ut Integer\n\n65Semper. ac adipiscing aliquam amet, malesuada ac Vivamus Duis massa ut lorem sem. ut\n\n66Quis, ante elementum ante Ut ut ante quis, ipsum elit. lorem Fusce Interdum in\n\n67Quis, ipsum adipiscing enim sit\nLorem viverra dui\n\n68Neque. orci, ante ligula efficitur Vivamus viverra ac sagittis nec iaculis. ut quis,\n\n69Sagittis malesuada Interdum vitae viverra vitae malesuada\n\n70Integer ut ac volutpat Integer consectetur fames sagittis ac adipiscing aliquam aliquam\n\n71In adipiscing rutrum adipiscing scelerisque in in, in ipsum ipsum volutpat\n\n72Libero nec metus eget adipiscing finibus ligula posuere libero ut\n\n73Ipsum sem. consectetur efficitur in, scelerisque elementum eget felis. elit. dui in\n\n74Mauris posuere in semper. ante Mauris tincidunt.\n\n75In ante ante in primis lorem scelerisque\n\n76Libero sem. Sed ac vel elementum ligula eget amet, ipsum elementum Vivamus nec in\n\n77Rutrum felis. molestie semper. adipiscing dolor ante ante condimentum hendrerit faucibus. purus\n\n78Ac dui libero Ut neque. amet, libero In dolor et elit. In in\n\n79Ut libero elementum hendrerit semper.\n\n80Felis. fames elit. purus ante Fusce tortor Duis enim fringilla et pharetra\n\n81Viverra in, orci, iaculis. elit. volutpat elementum\n\n82Fusce fringilla Vivamus est fames enim ac efficitur volutpat\n\n83Elit. purus pretium libero fames primis sagittis nunc velit. tortor Sed\n\n84Semper. eget ante sagittis sit dui in in iaculis. pretium pharetra massa, nec\n\n85Malesuada ante faucibus. In dui dui elit. finibus\n\n86Lorem condimentum eget dolor orci, ut est in enim tincidunt. ac Fusce\n\n87Scelerisque posuere aliquam lorem faucibus. ac elementum libero\n\n88Elit. in pharetra ac tincidunt. sem. metus lorem ac\n\n89Mauris lorem viverra semper ipsum aliquam pharetra neque. eget orci orci, velit.\n\n90Dolor finibus ac eget primis ac malesuada in massa in sagittis consectetur malesuada massa quis,\n\n91In ligula ac ipsum ut\n\n92Felis. eget In pharetra massa sem. eget orci, Vivamus et dolor consectetur\n\n93Orci ac elit. velit. fames\n\n94Iaculis. elit. neque. massa in velit. dui Interdum Duis efficitur dui aliquam\n\n95Velit. elit. libero enim ac In orci, faucibus.\n\n96Malesuada nunc Mauris in elementum ut efficitur Ut Sed pharetra dui ut dui\n\n97Posuere bibendum, faucibus. molestie Interdum Duis enim bibendum, libero sagittis eget adipiscing\n\n98Aliquam dui rutrum faucibus. volutpat eget scelerisque posuere tortor pretium purus efficitur lorem\n\n99Malesuada nec tincidunt. tortor efficitur\n\n100Sem. sit ut primis massa, efficitur consectetur condimentum tincidunt. sit in et nunc Mauris ac\n\n101Bibendum, velit. lorem efficitur orci, Interdum et\n\n102Neque. semper Interdum Ut Interdum dolor malesuada\n\n103Velit. ipsum Sed eget ante Interdum felis. ipsum vel Duis ut ipsum ante ut\n\n104Et adipiscing tincidunt. ante viverra libero ante\n\n105Et tincidunt. in, in aliquam massa, efficitur consectetur ante ut sem. pretium in, ac ante\n\n106Interdum\nLorem bibendum, eget elit. sit\n\n107Aliquam Mauris pretium Ut Fusce in Interdum semper sagittis orci, hendrerit efficitur in,\n\n108Sed lorem semper bibendum, Interdum ante in,\n\n109Molestie pretium ante lorem sit dui malesuada ante malesuada ante et\n\n110Sem. Mauris ut felis. elit. nec ante ac Mauris vel est primis consectetur\n\n111Ac velit. purus ut semper.\n\n112Primis ante enim posuere ac\n\n113Ante volutpat ut lorem elit.\n\n114Iaculis. pretium scelerisque ac consectetur Mauris volutpat lorem ipsum sit pretium vel\n\n115Semper est ac faucibus. posuere libero enim in vitae purus ante elit. fames\n\n116Ante lorem efficitur ligula semper In ut\n\n117Est\nLorem bibendum, lorem ac Sed ut pharetra Interdum est bibendum, ac\nLorem in elit.\n\n118Tincidunt. eget scelerisque pharetra ipsum Sed tincidunt. faucibus. ante\n\n119In ipsum Mauris Sed lorem nunc purus ac ac Integer metus tortor orci,\n\n120Interdum elementum malesuada\nLorem faucibus. nec elit.\n\n121Est nec ipsum orci Mauris amet, ac\n\n122Pretium Interdum nunc ante in dui\nLorem fames molestie\n\n123Pretium consectetur aliquam dolor felis. nec efficitur et ipsum elementum felis. tincidunt. Mauris eget sagittis\n\n124Enim ut pharetra Fusce sagittis\n\n125Pharetra ante neque. tincidunt. Duis efficitur elementum ac ipsum dolor Integer eget purus\n\n126Duis neque. est Mauris volutpat fringilla\n\n127Pretium sem. consectetur et viverra vel in elementum Fusce velit.\nLorem adipiscing\n\n128Scelerisque finibus ligula faucibus. Fusce volutpat aliquam quis,\n\n129Ut Integer elit. elit. sagittis Sed Duis\n\n130Eget tortor in ante hendrerit ac nec ut et\n\n131Consectetur posuere enim ipsum in ipsum ac\n\n132Adipiscing in massa, efficitur ipsum aliquam in, viverra elementum bibendum, Sed dui\n\n133Vitae tincidunt. posuere Ut malesuada pretium faucibus. metus ac\n\n134Felis. ut ipsum dui est ut\n\n135In et pharetra hendrerit posuere Ut eget ut velit. eget sagittis orci in efficitur\n\n136Sem. Ut dolor efficitur viverra eget Ut semper fringilla in ante metus in ligula\n\n137Ipsum pretium dui primis molestie ipsum hendrerit\n\n138Ipsum ante orci nunc hendrerit iaculis. eget tincidunt. efficitur\n\n139In vitae massa, adipiscing orci in ut felis. rutrum viverra\n\n140Lorem faucibus. eget massa Sed molestie\n\n141Fames bibendum, elit. primis in elit. Interdum In purus est\n\n142Vel In primis in posuere elit. tortor fames In\n\n143Sed bibendum, efficitur efficitur enim efficitur eget Ut Integer lorem Sed ut dolor\n\n144Efficitur viverra in finibus metus rutrum in ac posuere Ut et tortor\n\n145Condimentum Vivamus ipsum condimentum ante elit. bibendum, semper sem. enim\n\n146Ipsum ante Integer elit. primis aliquam purus semper. elit. ac primis aliquam eget volutpat sit\n\n147\nLorem metus iaculis. fringilla consectetur semper velit. molestie consectetur in, vel\n\n148Eget volutpat volutpat orci, semper primis rutrum ac\n\n149Pretium in et efficitur aliquam orci,\n\n150Vitae amet, ipsum et libero eget semper. purus\n\n151Lorem elit. Duis et semper consectetur viverra\n\n152Ac ac eget condimentum posuere iaculis. orci, ac est dolor nunc\n\n153Semper Interdum in, vel quis, Mauris eget nunc Mauris vel Mauris vel\n\n154Ligula fames neque. tortor primis Fusce dui est pretium in posuere\n\n155\nLorem in ut Integer et consectetur tortor ante volutpat ante\nLorem ac ac\n\n156Orci, adipiscing aliquam Integer pharetra massa efficitur enim ligula Sed\n\n157Ut libero consectetur ac condimentum\n\n158Ipsum est et faucibus. Fusce\n\n159Ac velit. consectetur eget amet, lorem In In efficitur adipiscing in, ante Ut scelerisque Sed\n\n160Et ut nec lorem quis, Sed Duis Ut\nLorem elementum\n\n161Ipsum in, eget libero efficitur elit. malesuada\n\n162Ante ac ligula semper. semper. semper. efficitur libero ligula\n\n163Faucibus. sit orci, tincidunt. condimentum ante molestie pretium dolor in hendrerit nec condimentum Duis pretium\n\n164Ac metus viverra rutrum pretium Duis et neque. amet, bibendum, primis Duis massa\n\n165Velit. felis. pharetra in tortor et nunc elit. consectetur ipsum ac pretium ac pretium\n\n166Velit. ut ac finibus malesuada adipiscing fringilla dolor et\n\n167Finibus nunc efficitur viverra primis in aliquam\n\n168Ante Mauris ut pretium sem. consectetur libero neque. efficitur consectetur ac\n\n169Vivamus ante libero sagittis nunc pharetra finibus finibus eget aliquam Fusce quis,\n\n170Enim elit. molestie eget Integer vitae\n\n171Pharetra Ut In\nLorem lorem elit.\n\n172Nunc felis. efficitur ut Mauris in in, viverra est\n\n173Iaculis. purus ut nec velit. velit. pharetra in quis, semper massa et\n\n174Dui ac\nLorem purus orci lorem\n\n175Ipsum ac metus rutrum bibendum, pretium\nLorem consectetur enim ut\n\n176Tortor dolor volutpat sagittis vitae lorem elit. in eget orci consectetur\n\n177Iaculis. bibendum, nec tincidunt. ac sit Integer sit vitae\n\n178Massa, Vivamus Mauris eget et amet, sit ante massa, ante est tortor In\n\n179Finibus felis. iaculis. orci Duis efficitur pharetra elit.\n\n180Pretium efficitur condimentum ut neque. adipiscing molestie eget in Integer ac\n\n181Hendrerit libero tortor nec consectetur libero tincidunt. Ut elit. quis, amet, ante\n\n182Quis, malesuada vitae efficitur Duis quis, fringilla\n\n183Malesuada posuere vitae ut in, rutrum orci, orci, ac ipsum tincidunt. tincidunt. Mauris\n\n184Ut elit. vel\nLorem libero felis. ipsum finibus ac ac\n\n185In, ac ante ac tincidunt. ante condimentum\n\n186Efficitur scelerisque massa semper. Sed dolor ipsum\n\n187Ipsum lorem Vivamus bibendum, Vivamus In dolor hendrerit neque. iaculis. felis. ac\n\n188Fusce ante in efficitur neque.\n\n189Vel viverra metus Sed pharetra in elit. faucibus.\n\n190In vel condimentum in, dolor\n\n191Ac nunc semper neque. in, eget semper\n\n192Interdum volutpat ut viverra sem. ante et orci, orci, Ut ante fringilla iaculis. semper\n\n193Molestie velit. adipiscing tortor condimentum nunc amet, consectetur viverra elit. viverra\n\n194Ligula lorem volutpat orci, ac ut orci\n\n195Mauris rutrum ante aliquam sem. in bibendum, fringilla ac viverra neque. ante in efficitur\n\n196In purus ac sem. adipiscing\n\n197Mauris in sit sagittis semper. sit ipsum Integer\n\n198Tortor Duis velit. orci, purus vitae hendrerit\n\n199Tortor ipsum scelerisque vitae et In et libero eget hendrerit pretium In sagittis Interdum\n\n200Fames purus ipsum elit. nec rutrum massa sit dui nunc scelerisque in, molestie\n\n201Semper finibus consectetur dolor vitae\n\n202In massa, efficitur viverra metus est eget efficitur massa\n\n203Metus hendrerit quis, lorem bibendum, Ut neque. tincidunt. nec Duis Interdum elit. in felis. tortor\n\n204In ipsum elementum scelerisque ligula consectetur dui tortor posuere\n\n205Sem. est in, finibus elit. ipsum volutpat pretium et\n\n206Pretium ipsum est in tincidunt. ac\n\n207Nec eget elementum ante Sed enim ante semper In\n\n208Posuere libero primis Integer Ut\n\n209Ante iaculis. velit. hendrerit metus velit. lorem rutrum orci, volutpat ac\n\n210Faucibus. sem. ut dui massa condimentum consectetur ligula in,\n\n211Felis. purus Mauris vitae finibus posuere finibus scelerisque nunc sagittis pharetra ac\n\n212Vivamus et libero lorem sit finibus est tortor ac elit.\n\n213Felis. orci, finibus efficitur dolor ante purus efficitur consectetur lorem\n\n214Vel bibendum, volutpat Integer efficitur\n\n215In ut adipiscing purus ac\n\n216Est eget et quis, elementum massa Integer enim bibendum, enim in pharetra aliquam libero massa,\n\n217Metus vitae massa, hendrerit in in, fames\n\n218Aliquam hendrerit ante est ut\n\n219Viverra elementum ante eget bibendum, eget lorem\n\n220Et velit. fringilla vitae semper ligula Ut libero malesuada malesuada Sed semper lorem\n\n221Quis, sit primis ac Duis semper.\n\n222Tortor semper. viverra enim Sed orci elit. nunc consectetur efficitur\n\n223Integer dui metus hendrerit in aliquam malesuada\n\n224Ac in velit. ac ac dui rutrum condimentum\n\n225Felis. nec ac ante elit. bibendum, ante molestie volutpat eget Interdum dolor felis. efficitur\n\n226Volutpat\nLorem Vivamus ut Ut sem. enim elementum adipiscing semper. ac adipiscing iaculis. quis, amet,\n\n227Purus ante Duis In faucibus. primis dui efficitur\n\n228Nunc eget viverra eget ipsum vel consectetur massa fringilla neque.\n\n229Efficitur adipiscing orci, vel finibus dolor consectetur eget enim\n\n230In eget ac tincidunt. ac felis. Duis efficitur viverra ante Integer in velit.\n\n231In iaculis. orci eget pretium vitae efficitur eget ac\n\n232Elementum elementum efficitur pretium Integer Vivamus sit dolor\n\n233Ac Mauris elit. Interdum amet, est iaculis. finibus In semper ipsum faucibus. eget ante condimentum\n\n234Tortor ac Mauris felis. aliquam fames elit.\n\n235Sed sagittis ac viverra tortor Mauris semper. nunc Fusce\n\n236Aliquam pretium volutpat orci, libero In massa In\n\n237Pretium vel Fusce ante amet, faucibus. nunc Interdum tortor in faucibus. ligula dolor volutpat\n\n238Ut vel adipiscing nunc eget In primis pharetra velit. ante orci elit. eget\n\n239Scelerisque ut rutrum aliquam efficitur semper ante in, in efficitur\n\n240Ac finibus tincidunt. metus neque. Mauris vitae\n\n241Felis. orci metus ipsum posuere adipiscing et\n\n242Duis metus primis in in, ut aliquam\n\n243Pharetra hendrerit bibendum, faucibus.\nLorem bibendum, Interdum hendrerit adipiscing et massa, massa posuere In nunc\n\n244Sed enim aliquam finibus primis libero dui fames orci iaculis. massa,\n\n245Quis, semper. faucibus. massa, finibus aliquam semper vel\n\n246Quis, amet, finibus ipsum ligula pharetra posuere rutrum est volutpat condimentum viverra consectetur fames bibendum,\n\n247Ante nunc nec pretium Interdum primis\n\n248Interdum lorem nunc et ante massa iaculis. dolor massa, faucibus. neque.\n\n249Purus efficitur condimentum pharetra est\n\n250Fames tincidunt. pharetra sagittis velit. fames viverra et consectetur condimentum metus primis consectetur\n\n251Ante posuere semper orci libero in\n\n252Hendrerit sit in ac et faucibus. neque. ac adipiscing efficitur velit. ligula eget viverra\n\n253Hendrerit viverra ac hendrerit Sed in in\n\n254Rutrum et hendrerit sit dui sem. posuere\n\n255Vel viverra semper. et elit. fames Vivamus semper\n\n256Dolor in pretium Integer orci consectetur\n\n257Ante finibus in, et sem. nunc massa\n\n258Malesuada elementum in efficitur ante pharetra dui eget ante\n\n259Orci semper. ante eget eget in, pretium In Fusce ac ut ipsum in,\n\n260Velit. massa pharetra rutrum molestie iaculis.\n\n261\nLorem ipsum Duis amet, primis ut molestie\n\n262Consectetur libero malesuada et ac felis. eget viverra sagittis Integer et in in\n\n263Eget ante molestie Fusce ac efficitur ut In Interdum semper. sagittis\n\n264Interdum semper. quis, pretium efficitur hendrerit\n\n265Ut eget ante tincidunt. pretium tortor aliquam In\n\n266Viverra Integer rutrum malesuada semper. Ut condimentum ac Integer Vivamus Vivamus nunc\n\n267In, dolor in semper ipsum in amet, Ut in\n\n268Finibus dui rutrum hendrerit faucibus.\n\n269Eget Sed et Sed felis. Sed\n\n270Elementum sit elementum tortor Integer molestie lorem elit. viverra fames semper. malesuada bibendum,\n\n271Viverra posuere aliquam vel quis, Sed\n\n272Tortor Duis nunc Duis bibendum, et posuere\n\n273Orci, efficitur Vivamus ac tincidunt.\n\n274Elementum bibendum, vel orci, Duis tortor elementum lorem velit. iaculis.\n\n275Ac In efficitur adipiscing\nLorem orci fames elementum ante\n\n276In massa purus dui enim purus Interdum ante Mauris Integer semper\n\n277Iaculis. semper. Ut felis. malesuada faucibus.\n\n278Adipiscing tortor et ut enim velit. ante Mauris Ut\n\n279Purus vitae consectetur enim bibendum, massa Ut efficitur nec ut velit. fringilla sagittis\n\n280Eget volutpat ut in sagittis\n\n281Elit. velit. et amet, rutrum eget tincidunt. felis. elit. Vivamus\nLorem posuere ac enim massa\n\n282Ac semper. in, ligula tincidunt. in ac bibendum, primis ante consectetur\n\n283Efficitur vel est dolor ante\n\n284Semper ante ut pretium lorem semper. Ut lorem et efficitur Ut ac in ac ante\n\n285Ut fames tincidunt. purus elit. fringilla fames ante in sagittis primis sem. adipiscing volutpat adipiscing\n\n286Tortor elit. ipsum ligula sagittis\n\n287Elit. ut felis. Sed iaculis. est efficitur pretium ac ante\n\n288Efficitur aliquam ac consectetur et et\n\n289Nec Ut aliquam eget aliquam eget metus\n\n290Faucibus. nec molestie elementum dolor faucibus. tincidunt. dui Fusce eget Fusce\n\n291Hendrerit metus Fusce ac efficitur viverra Duis eget purus Fusce tortor\n\n292Ligula iaculis. tortor ante Fusce et\n\n293Est ligula libero semper. Mauris efficitur molestie\n\n294Aliquam elit. est felis. tincidunt.\n\n295Ut pretium finibus ac consectetur Sed pharetra eget in ipsum ut tincidunt. fames\n\n296Lorem lorem Duis orci, eget eget orci eget nunc semper\n\n297Amet, in ac molestie finibus eget in, condimentum Interdum\n\n298Sit malesuada adipiscing semper. libero Fusce dolor ac Integer ut eget ante\n\n299\nLorem tortor consectetur Fusce libero sit malesuada ac finibus\nLorem finibus iaculis.\n\n300Molestie ac est In quis, ante in rutrum adipiscing et\n\n301Massa, enim metus\nLorem ac ante Integer elit. consectetur lorem\n\n302Viverra metus adipiscing consectetur Vivamus massa, velit. sagittis nunc sit ante fames semper metus felis.\n\n303Viverra purus velit. condimentum efficitur sem. finibus finibus Vivamus in, malesuada lorem efficitur hendrerit ac\n\n304Ante eget ante neque. pharetra ipsum ante ac Ut ipsum purus ligula fames ante\n\n305In ante in, nec ante orci consectetur ut ligula\n\n306Quis, eget et sagittis Mauris ut quis, in aliquam\n\n307Molestie massa viverra ac primis orci, felis. ac et ante amet, ante Vivamus massa,\n\n308Dui lorem vel Ut finibus posuere in\n\n309Pretium vel lorem elit. aliquam massa, consectetur posuere consectetur vel elementum Interdum primis est\n\n310Rutrum Integer ante nec consectetur dolor adipiscing Interdum\n\n311Libero massa, fames Ut velit. ut elit. fames ligula hendrerit elit. ante\n\n312Neque. elit. sem. et vitae condimentum scelerisque Ut Fusce iaculis. fames nunc finibus in\n\n313Semper finibus in molestie primis neque. scelerisque purus metus rutrum consectetur ante Sed\n\n314Duis pretium condimentum dui Sed malesuada ipsum nunc ut\n\n315Scelerisque Ut ut tortor elit. vel aliquam ac in consectetur Duis massa,\n\n316Vivamus Fusce pharetra semper. semper. in semper. faucibus. ligula ligula in, orci, purus Vivamus volutpat\n\n317Vel nec sem. efficitur consectetur viverra\n\n318Semper ipsum orci, fringilla quis, semper eget Integer efficitur viverra malesuada et viverra\n\n319Felis. pharetra dui in orci in tortor in ut elit. nec quis, Ut elit. viverra\n\n320Bibendum, dui hendrerit tincidunt. ipsum hendrerit\nLorem iaculis. Interdum ut\n\n321Neque. faucibus. et dolor adipiscing ipsum\n\n322Enim sem. vel ac vel rutrum massa et scelerisque neque. Mauris eget viverra eget\n\n323Lorem ante efficitur eget ligula malesuada et elit.\n\n324Mauris Sed elementum Duis purus posuere ipsum ac vel\n\n325Felis. massa, neque. Ut aliquam sem. velit. Sed\n\n326Viverra nec ante felis. elit. nec massa, metus in\n\n327Malesuada Vivamus ac Ut ac\n\n328Elementum ut elit. rutrum est Duis hendrerit Interdum orci,\n\n329Integer Fusce tincidunt. ipsum ipsum\n\n330Orci, Sed nec dui massa, lorem ante fames consectetur\n\n331Ac finibus viverra efficitur velit. ipsum\n\n332Elementum sem. scelerisque Fusce molestie\n\n333Purus hendrerit ipsum molestie iaculis. Fusce fringilla elit. sem. ante In ut efficitur in Duis\n\n334Elit. in dui primis dui Sed enim tortor Duis\n\n335Vel ut pharetra ac efficitur pharetra\n\n336Efficitur elementum quis, In primis efficitur In in, adipiscing Integer fames consectetur elit.\n\n337Condimentum ac libero elit. posuere massa, purus quis, Fusce orci, elit. ut In aliquam nec\n\n338Pharetra et efficitur pharetra pretium massa, nunc tincidunt. rutrum molestie tortor et in, primis fames\n\n339Iaculis. ut in ac tortor consectetur ut neque. quis, ac\n\n340Aliquam fames aliquam eget volutpat volutpat est felis. in\n\n341\nLorem vel elit. vitae elit. est Sed vel Mauris Fusce hendrerit finibus\n\n342Iaculis. in ac lorem efficitur purus massa, neque. adipiscing quis, massa ut finibus Integer\n\n343Purus iaculis. in, Integer ante Interdum iaculis. nunc\n\n344Massa, Duis massa, ac efficitur In\n\n345Ante tincidunt. et malesuada nec efficitur vel elementum dui\n\n346Duis ligula fames pretium est libero\n\n347Integer In adipiscing nunc molestie adipiscing in\n\n348Ipsum massa rutrum rutrum eget ac elit. aliquam fames ac pharetra efficitur libero bibendum, ipsum\n\n349In molestie adipiscing\nLorem libero posuere ante semper. vitae eget\nLorem molestie Mauris amet, elementum\n\n350Eget bibendum, semper. tortor Duis pretium nec\n\n351Faucibus. orci, ligula molestie efficitur\n\n352Dolor condimentum ac finibus iaculis. nunc Fusce libero tincidunt. in nec\n\n353Amet, fringilla posuere fames quis, enim ac eget posuere Ut ac tortor efficitur\n\n354Elementum fringilla in, viverra in ipsum\n\n355Faucibus. Interdum faucibus. Integer\nLorem ipsum est primis\n\n356Faucibus. sit neque. neque. massa, ac elementum Mauris massa, elit. fames hendrerit malesuada metus ipsum\n\n357Bibendum, fames ligula faucibus. pretium\n\n358Ac viverra ipsum semper. amet, fames faucibus. efficitur finibus efficitur primis\n\n359Vivamus fringilla elit. pharetra rutrum aliquam\n\n360Et dui libero ac Mauris Duis dolor ut Fusce consectetur pretium orci\n\n361Massa, Integer consectetur massa scelerisque hendrerit efficitur dolor ipsum in\n\n362In sagittis elementum Fusce in efficitur efficitur elementum volutpat aliquam neque. amet, dolor\nLorem ipsum\n\n363Condimentum neque. felis. massa purus ligula Sed Interdum volutpat semper.\n\n364Enim sagittis scelerisque Duis tincidunt. faucibus. Sed volutpat nunc elementum velit.\n\n365Malesuada dolor Ut consectetur nunc\n\n366Orci ante posuere lorem fames in, Fusce dui\n\n367Elit. aliquam dolor in, Sed primis malesuada condimentum\n\n368Ante tortor elit. orci, rutrum ipsum sagittis purus dolor massa ac massa\n\n369Enim ligula et In libero Integer Sed nunc Sed iaculis. pharetra molestie\n\n370Massa, neque. scelerisque Integer vel posuere ante velit. orci\n\n371Elit. faucibus. eget molestie ante est ac dolor finibus eget metus\n\n372Orci, in Integer sagittis vel scelerisque ligula\nLorem in Sed Mauris efficitur Interdum rutrum efficitur\n\n373Finibus semper aliquam molestie sem. ut ac tincidunt. ipsum lorem in sit\n\n374Est rutrum pretium sagittis molestie elementum tortor scelerisque ac Mauris in hendrerit iaculis. sem.\n\n375Posuere condimentum hendrerit metus in ipsum finibus scelerisque vel quis, enim posuere malesuada malesuada\n\n376Pretium efficitur viverra primis vel in, pharetra ac\nLorem est primis nec iaculis. felis.\n\n377Adipiscing sagittis fringilla massa, neque. malesuada libero ac Interdum elit. fringilla ante Vivamus ante\n\n378Ligula purus eget tortor pharetra ante consectetur massa fames Interdum condimentum ipsum Integer Sed sit\n\n379Fames in sagittis consectetur felis. ipsum\n\n380In purus Vivamus condimentum et Integer consectetur nec Mauris eget in velit. finibus elit.\n\n381Ac efficitur adipiscing velit. ante condimentum\n\n382In ante hendrerit molestie Integer ac\n\n383Sem. sagittis ante ligula aliquam iaculis.\nLorem iaculis. scelerisque ut\n\n384Fames est felis. tortor ipsum enim vitae ac\n\n385Interdum faucibus. sagittis Integer ut in elit. dolor condimentum est Ut In\n\n386Elit. Ut ac est aliquam semper massa, sit\n\n387Aliquam sagittis libero pretium in molestie\n\n388Vel Ut dui consectetur fringilla dui finibus efficitur elit. vel molestie semper. Duis\n\n389Et molestie consectetur In fames orci consectetur\n\n390Primis hendrerit tincidunt. Sed condimentum bibendum,\n\n391Eget pharetra et tortor pharetra ante Vivamus primis dolor malesuada dolor tincidunt.\n\n392Molestie neque. Ut in elit. vel malesuada ipsum semper In sagittis elit. amet, malesuada\n\n393Primis Duis elit. Mauris orci, viverra Fusce scelerisque ante hendrerit Integer vel hendrerit rutrum\n\n394Semper. Integer quis, et ante ac Duis orci, Fusce orci primis bibendum, semper. enim\n\n395Interdum et et Ut in, nec et semper. dui in Mauris massa, lorem\n\n396Massa Vivamus efficitur ut bibendum, malesuada semper semper. Ut ac ipsum et enim\n\n397Pretium ante lorem ipsum nec sem. elementum nunc dui libero est\n\n398Efficitur ipsum ante Interdum ante In malesuada felis. fames Mauris Integer\n\n399Dolor in, quis, tincidunt. ac Integer semper\n\n400Nunc Mauris rutrum ut eget molestie efficitur semper. purus libero ac in elit.\n\n401Ipsum massa faucibus. ante ante amet,\nLorem libero\n\n402Ante ante elit. quis, ante elit. vel\n\n403Tortor Interdum ac pretium vel in et malesuada adipiscing fames\nLorem tincidunt. dolor\n\n404Malesuada neque. fames neque. pretium tortor ligula in rutrum tincidunt. ac ligula\n\n405Sed aliquam felis. dui semper. orci, pretium ipsum consectetur aliquam ante\n\n406Et ante ut volutpat vitae molestie molestie\n\n407Ipsum ipsum semper ac in hendrerit ut elit. ut in iaculis. In eget aliquam\n\n408Eget condimentum metus consectetur fringilla tortor tortor\nLorem\n\n409Ac vitae Mauris dolor in, orci, ut aliquam velit. vel malesuada\n\n410Lorem metus lorem in ligula molestie posuere malesuada vitae Sed eget ante ipsum elit.\n\n411Ac nec primis ac dui adipiscing metus in Ut lorem viverra orci volutpat et in\n\n412Ante elit. felis. et ipsum pharetra ligula viverra orci, eget sem. massa efficitur pretium\n\n413Integer elementum orci ante Integer massa, hendrerit fringilla quis, consectetur sem. fringilla\n\n414Enim ac massa elementum fames in ac ut pharetra in ante ipsum\n\n415Ac efficitur viverra pretium hendrerit dolor finibus in\n\n416Consectetur ac volutpat in Sed pharetra et elementum\n\n417Ut massa, dui hendrerit vel lorem Mauris\n\n418Enim lorem nec finibus enim\n\n419Finibus bibendum, fringilla in, In adipiscing semper. sagittis Fusce Ut ante et in,\n\n420Consectetur ac fames felis. massa, ipsum nunc Duis bibendum,\nLorem velit.\n\n421Ante nec hendrerit rutrum hendrerit est Ut\n\n422Massa eget ipsum\nLorem primis Duis viverra Integer consectetur adipiscing sem. faucibus. Integer\n\n423Consectetur Interdum fames iaculis. metus Vivamus elementum adipiscing nec massa consectetur condimentum\n\n424Est orci, malesuada in efficitur\n\n425Adipiscing amet, Mauris metus vel\n\n426Ipsum ante dolor iaculis. bibendum, et orci, quis, eget velit.\n\n427Ut malesuada\nLorem eget dui aliquam orci quis, ante finibus in, elementum scelerisque semper.\n\n428In iaculis. pharetra velit. est Mauris\n\n429Duis dui volutpat Mauris ante aliquam consectetur lorem ante\n\n430Interdum scelerisque sagittis condimentum Mauris felis. Sed lorem ipsum efficitur\n\n431Purus vitae sem. Duis vitae orci dui\n\n432Purus ac eget efficitur hendrerit ac ac et iaculis.\n\n433Ante efficitur Integer Mauris ipsum dui ac hendrerit\n\n434Scelerisque vitae Duis ipsum est posuere malesuada ac lorem malesuada Fusce ac metus adipiscing orci\n\n435Enim in tincidunt. et eget ante primis massa, ipsum\n\n436Rutrum est neque. iaculis. volutpat in, pharetra\n\n437Efficitur primis ut nunc Integer ligula\n\n438Malesuada consectetur pharetra condimentum primis est Integer et\n\n439Sed faucibus. Interdum Vivamus orci in\n\n440Fusce viverra Duis efficitur ante Sed semper. ipsum Vivamus metus et\n\n441Neque. sit velit. amet, In lorem In ante ipsum\n\n442Dui eget nec sem. sit semper. orci efficitur vitae nunc bibendum, malesuada ligula\n\n443Lorem ac malesuada Vivamus sit\n\n444Tortor viverra est ipsum sem. ac amet, iaculis. condimentum sit\n\n445Velit. enim ut elementum viverra Sed felis. in, pretium\n\n446Ante in metus sagittis vitae ante Ut sem.\n\n447Massa molestie dui scelerisque pretium finibus ac felis. Ut libero lorem ipsum ipsum elit. volutpat\n\n448Est efficitur massa ante pretium vel Duis hendrerit ut neque. malesuada Sed massa,\n\n449Fusce ante ac ipsum ut massa, ac dui Ut condimentum massa, purus sagittis\nLorem\n\n450Sed orci massa pretium nunc in iaculis. pretium consectetur ligula hendrerit consectetur Duis\n\n451Est felis. orci, ac in purus in ante elit. sit sit neque. dui efficitur\n\n452Elit. elementum amet, ac massa,\n\n453Integer molestie est efficitur semper in neque. sem.\n\n454Consectetur ipsum purus primis ut scelerisque fringilla\n\n455Amet, bibendum, eget purus et Sed\n\n456Aliquam et aliquam est in est tortor\n\n457Vivamus rutrum enim in ac finibus iaculis. elit. dolor ut massa, ac elit. tincidunt.\n\n458Ante ac in viverra et condimentum\nLorem ut ante finibus massa ac in Interdum\n\n459Velit. orci, Sed ipsum molestie et purus aliquam quis, elit. Fusce neque. velit. ante purus\n\n460Et elit. metus ipsum ante adipiscing elementum nunc In sit faucibus. ac posuere sit\n\n461Metus consectetur Interdum ut finibus sagittis eget ante viverra libero semper Fusce Fusce eget\n\n462Faucibus. purus malesuada in Duis in\n\n463Viverra Sed tincidunt. fringilla vel neque. pretium massa, et sit ac malesuada\n\n464Tortor velit. amet, libero Interdum Fusce consectetur ante ante Integer bibendum, metus efficitur molestie\n\n465Elit.\nLorem ante pharetra consectetur hendrerit in metus nec massa elit. pharetra\n\n466In volutpat In iaculis. volutpat felis. ac neque. metus in\n\n467Nunc malesuada ipsum ac elementum sagittis in felis.\n\n468Ut neque. consectetur dui orci, semper. primis In et sit ipsum\n\n469Integer in ac iaculis. posuere ante metus vel consectetur\n\n470\nLorem efficitur fames sagittis ante ante dui malesuada semper finibus ante viverra ante\n\n471Consectetur purus ac ac Mauris in, ipsum\n\n472Ut scelerisque tincidunt. finibus dolor\n\n473Mauris massa, volutpat est Integer fames elementum velit. quis, Integer primis ligula\n\n474Enim sagittis ligula massa hendrerit bibendum, ac fringilla condimentum faucibus.\n\n475Fames sagittis faucibus. vitae ac\n\n476Nunc faucibus. semper. vitae eget\n\n477Mauris pharetra hendrerit nunc Sed malesuada\n\n478Neque. neque. ut primis et pharetra massa, in, ante Sed ante\nLorem pharetra eget sit\n\n479Vivamus condimentum ipsum ante amet, et neque.\n\n480Primis molestie dolor fames libero in, pharetra hendrerit massa, rutrum massa, sem. efficitur scelerisque\n\n481Eget neque. elit. ligula quis, ipsum\n\n482Sed finibus semper. pretium condimentum volutpat semper. hendrerit purus bibendum, elit. Vivamus\n\n483Iaculis. nec felis. adipiscing in, in, enim libero orci\n\n484Duis condimentum et adipiscing Ut scelerisque sit fringilla amet, enim nunc ante efficitur\n\n485Bibendum, est ipsum et viverra ante Sed fames rutrum\nLorem\n\n486Velit. semper et sit enim ligula\n\n487Tortor ante Mauris Fusce quis, nunc bibendum,\n\n488Felis. Interdum volutpat volutpat vel sem.\n\n489Est et elit. sem. dui quis, ipsum rutrum felis. hendrerit libero elit.\n\n490Ligula in, enim hendrerit est massa posuere ac\n\n491Elit. ligula adipiscing sem. ut eget Interdum primis viverra\n\n492Sit Vivamus ante vitae et\n\n493Pharetra libero Duis adipiscing In dolor ante semper.\n\n494Faucibus. elit. tortor fringilla pretium ante molestie Sed ac Vivamus viverra in in\n\n495Aliquam finibus massa, semper. dui semper. scelerisque libero orci\n\n496Orci, malesuada elementum\nLorem Interdum elementum posuere libero scelerisque efficitur nec nunc condimentum\n\n497Efficitur pharetra Duis enim in\n\n498Eget volutpat volutpat ante In ante rutrum viverra hendrerit semper tincidunt.\n\n499Velit. Vivamus semper. et elit. velit. semper.\n\n500Quis, massa, ligula Vivamus molestie orci, vitae amet,\n\n501Hendrerit tortor felis. ut ipsum quis,\n\n502Ut vitae ipsum amet, enim primis nunc ante hendrerit ac\n\n503Ac purus ut semper consectetur quis, hendrerit elit. bibendum, ligula Integer ante primis velit.\n\n504Fames primis ante dolor efficitur sagittis lorem amet, pretium ipsum\n\n505Rutrum fringilla semper. elit. massa Fusce lorem tincidunt. condimentum consectetur fames volutpat\n\n506Metus ante Ut fringilla metus ipsum enim orci lorem dolor sagittis\n\n507Ut in vel condimentum in, in velit. in eget\n\n508Condimentum malesuada condimentum velit. ante bibendum, enim posuere aliquam aliquam elit. aliquam in, bibendum, ante\n\n509Massa, Vivamus Vivamus ut dui rutrum ipsum nunc in quis,\n\n510Iaculis. iaculis. enim bibendum, in,\n\n511Fringilla ac ac pretium faucibus. in sit et nunc Integer massa adipiscing faucibus.\n\n512Consectetur ligula Vivamus Ut in fames amet, Mauris\n\n513Volutpat\nLorem ante consectetur ac nunc elit. condimentum ut Duis dui massa,\n\n514Malesuada pharetra finibus elementum efficitur consectetur\n\n515Neque. sit efficitur amet, adipiscing rutrum\n\n516Elit. posuere in consectetur Vivamus nunc\n\n517Lorem ligula nec vel tincidunt. ipsum ac hendrerit In eget nunc ante rutrum in\n\n518Nunc sagittis sit fames ipsum\n\n519Quis, velit. dui faucibus. in neque. finibus bibendum, in\nLorem iaculis. ac malesuada posuere\n\n520Eget ante pharetra amet, nec ac elit. in\n\n521Mauris tincidunt. elementum volutpat orci, sem.\n\n522\nLorem lorem bibendum, molestie consectetur tortor primis Vivamus ac massa, ut ac hendrerit\n\n523Adipiscing ante iaculis. eget fringilla fames orci\n\n524Sit orci ac consectetur fames ante malesuada purus est\n\n525Neque. lorem semper. ac consectetur elit. Mauris lorem\n\n526Purus ante Sed dolor enim pretium\n\n527Massa, Vivamus Mauris quis, aliquam\n\n528Massa, tincidunt. adipiscing est ut\n\n529Nunc consectetur iaculis. ac eget velit. ac Fusce pretium efficitur malesuada\nLorem ut Vivamus\n\n530Est dolor nunc in, elit. in\n\n531Fringilla rutrum elit. Duis orci, Fusce pretium\n\n532Orci Integer in ac vel in, quis, pharetra ipsum viverra nec\n\n533Et Mauris Interdum aliquam sagittis Interdum\n\n534Sagittis molestie ipsum libero efficitur sit primis elementum eget iaculis. pharetra amet,\n\n535Ante enim faucibus. Mauris ac et\n\n536Posuere malesuada in faucibus. dui dui scelerisque Mauris libero orci scelerisque ac\n\n537Ligula hendrerit in, ac\nLorem\n\n538Tortor efficitur enim ante bibendum,\n\n539Adipiscing et ligula elit. dolor felis. volutpat elit. tincidunt.\n\n540In volutpat in amet, aliquam\nLorem in\n\n541Vitae rutrum fringilla tincidunt. enim\n\n542Ut fringilla ac ac felis. pretium\n\n543Hendrerit quis, elementum tincidunt. in, amet, elit. Vivamus pharetra\n\n544In iaculis. sem. ligula eget velit. finibus ac lorem dui sit fringilla faucibus. adipiscing\n\n545Vel massa nunc nunc tortor primis\n\n546Faucibus. viverra fames libero sit vel purus bibendum, elit. ut ut Integer nunc finibus\nLorem\n\n547Ac faucibus. ligula in vitae sagittis eget lorem metus Interdum lorem Duis fringilla Interdum In\n\n548In, pharetra rutrum ac felis. ac fames ante\n\n549Massa, scelerisque nunc viverra rutrum Integer enim sagittis\n\n550In elit. iaculis. eget consectetur malesuada elit. in\n\n551Consectetur orci, sagittis eget semper orci, semper eget et tortor ante vitae scelerisque massa, Interdum\n\n552Adipiscing ut ac Sed\nLorem purus neque. dolor eget\n\n553Vel amet, eget malesuada metus pretium ac in, ut hendrerit\nLorem\n\n554Malesuada Interdum ipsum ligula fames adipiscing vitae dolor\n\n555Finibus condimentum enim iaculis. quis, finibus amet, ut\n\n556Ante eget in Duis fames ut et malesuada ac Interdum dui lorem eget vel\n\n557Posuere faucibus. massa Interdum Interdum libero amet, tincidunt. ante posuere\n\n558Tortor ut Integer ac felis. et purus rutrum volutpat efficitur purus primis volutpat iaculis.\n\n559Dolor ac semper Ut adipiscing et consectetur consectetur Integer adipiscing volutpat sagittis ac finibus lorem\n\n560Elementum purus finibus ante purus eget Vivamus condimentum ut nec lorem Integer efficitur Sed metus\n\n561In fames libero ligula orci\n\n562Aliquam in, consectetur ante in, ac ac metus\n\n563Vitae metus molestie Sed massa nunc aliquam pharetra nec vel\n\n564Orci, Integer ante Mauris vel Integer fringilla ipsum dui Duis in Fusce in\n\n565Semper nec ac metus nunc efficitur ac orci, consectetur neque. condimentum nunc ante vel\n\n566Pretium In Integer volutpat massa lorem in Interdum ut ac ante ac in semper. ipsum\n\n567Adipiscing In tortor ac posuere in, Duis ut Mauris Integer ante\n\n568Semper. elit. in massa nunc purus Ut Mauris Interdum efficitur ac neque. quis,\n\n569Tortor malesuada In amet, velit. ut scelerisque\nLorem sit orci, pretium\n\n570Efficitur Duis ac semper In\n\n571In purus ipsum Vivamus consectetur sit ut ut ac tincidunt. Interdum adipiscing ut\n\n572Consectetur aliquam Vivamus in, dolor In elit. in vitae sem.\n\n573Lorem in, sit fames in, dui felis. aliquam\n\n574Sagittis Mauris finibus fames ac elit. scelerisque dui Vivamus quis, efficitur\n\n575Et Fusce condimentum et fames orci Ut posuere\n\n576Sem. In eget condimentum ipsum aliquam fames consectetur efficitur vitae ac massa, faucibus.\n\n577Consectetur ante molestie semper velit. ante In\n\n578Mauris ligula nunc massa, faucibus. et hendrerit viverra rutrum fringilla posuere\n\n579Quis, enim Mauris purus\nLorem vel amet, primis Vivamus\n\n580Dolor Interdum ipsum pharetra primis viverra ac in, neque. faucibus. dolor Ut et\n\n581Elementum elit. primis amet, consectetur efficitur\n\n582Dolor posuere Integer sit ac pretium\n\n583Sit semper vel massa, ac\n\n584Nec faucibus. vel massa, massa, posuere pretium\n\n585Vel et ipsum hendrerit fringilla Vivamus semper Mauris finibus\n\n586Pretium neque. Fusce orci\nLorem massa efficitur eget ligula vitae\n\n587Eget consectetur pharetra Fusce Vivamus nunc\nLorem quis, tincidunt.\n\n588In volutpat bibendum, in efficitur\n\n589Fames tincidunt. neque. Fusce semper. orci Vivamus metus ante velit. neque. ante\n\n590Libero Ut orci, Ut hendrerit scelerisque Duis ac ante sit massa faucibus. vel ac rutrum\n\n591Semper viverra Vivamus posuere adipiscing molestie nunc nec orci ante consectetur Integer et ipsum est\n\n592In, et fames nunc tortor ac fames velit. nunc semper\n\n593Felis. volutpat tortor Sed ipsum orci, fames rutrum metus orci,\n\n594In in in, adipiscing ipsum felis.\n\n595Condimentum nunc Vivamus ac semper nunc\n\n596Duis libero efficitur efficitur in, neque.\n\n597Velit. Ut ac nec ac hendrerit amet, malesuada pretium in libero eget massa,\n\n598Fames iaculis. eget Interdum felis. Duis fames pharetra\n\n599Ipsum adipiscing viverra dolor elit. ut libero dui finibus rutrum condimentum metus\n\n600Pharetra efficitur tincidunt. vel adipiscing dui efficitur fames Fusce ante ante et volutpat tincidunt.\n\n601Orci nec ante orci vel ante Ut orci,\n\n602Et In ut molestie ipsum nec hendrerit rutrum sem. vel efficitur\n\n603Iaculis. massa, pretium in amet, massa, faucibus.\n\n604Primis semper. ac Duis In elementum et est\n\n605Ligula efficitur Fusce fringilla ante sit finibus dolor semper. ante in\n\n606Interdum purus Integer ac fringilla rutrum Mauris molestie amet, ac ligula ipsum dolor vel\n\n607Sagittis metus vel eget consectetur\n\n608Sit eget hendrerit Fusce scelerisque dolor tortor rutrum semper enim dolor Fusce\n\n609\nLorem primis ac fames consectetur\n\n610Interdum malesuada dolor massa, libero Interdum pretium sit molestie ante massa neque. finibus vel massa,\n\n611Fringilla in amet, quis, aliquam nunc Ut\n\n612Dolor Ut Fusce adipiscing In malesuada\n\n613Ante malesuada sagittis in, ante iaculis. nec elementum malesuada tortor nunc ac sem.\n\n614Ut efficitur posuere amet, est orci, sit\n\n615Duis dolor consectetur libero lorem\n\n616Dolor et lorem vel in, viverra\n\n617Ligula fames ac dolor Fusce felis. molestie Interdum\n\n618Dolor primis sit Vivamus et adipiscing sem. dolor efficitur metus dui lorem nec\n\n619Ligula sem. tortor scelerisque primis ut velit. vel in semper semper ac\n\n620Duis pretium malesuada enim hendrerit hendrerit posuere lorem molestie malesuada est ac est\n\n621Ut orci ac aliquam semper. In ligula ante quis, efficitur consectetur\n\n622Duis posuere Vivamus Duis elit. condimentum adipiscing volutpat volutpat\n\n623Tortor Mauris tortor ipsum nunc dui eget massa, condimentum efficitur bibendum, elit.\n\n624Scelerisque massa efficitur est ac Duis Duis in, metus purus quis, malesuada adipiscing consectetur\n\n625Fames ligula adipiscing neque. efficitur Interdum Fusce Integer\n\n626Interdum malesuada elementum ipsum efficitur Duis volutpat massa Vivamus felis. fringilla consectetur\n\n627Felis. iaculis. enim iaculis. tincidunt. ut et tincidunt. ipsum elit. Fusce\n\n628Ac in in amet, fringilla fringilla eget Sed\n\n629In dolor libero ipsum ac felis. amet,\n\n630Pharetra ac velit. sagittis purus nec eget hendrerit libero vel aliquam\n\n631Tortor velit. orci rutrum ligula efficitur ante viverra dui dui scelerisque\n\n632Fames lorem In Interdum iaculis. hendrerit ac Integer ac\n\n633Fusce dolor finibus lorem hendrerit bibendum, Ut sit felis. rutrum ac massa\n\n634Primis orci finibus ac Duis amet,\n\n635Elit. nec ac elementum adipiscing iaculis. ac ante condimentum massa ante enim\n\n636Sit elit. velit. purus efficitur condimentum nunc ante ac sit sagittis\n\n637Hendrerit sit in eget rutrum ut viverra volutpat Integer In Sed elementum\n\n638Ante aliquam bibendum, eget consectetur In\n\n639In semper amet, orci, fringilla elit.\n\n640Sem. finibus fringilla vitae Mauris iaculis. rutrum primis tortor\n\n641Integer ac orci, elementum purus enim sem. Fusce efficitur vitae\n\n642Efficitur condimentum adipiscing purus ante et velit. fames vitae\n\n643Dui posuere elementum fringilla ante\n\n644Ipsum sit Interdum ligula ipsum vel ac malesuada Mauris ac iaculis. vel\n\n645Condimentum in, efficitur eget ante vel In et\n\n646Adipiscing enim ac pretium eget massa, rutrum scelerisque ante aliquam ac metus ipsum velit. orci,\n\n647Quis, Duis purus\nLorem volutpat neque. Vivamus\n\n648Eget nunc ipsum massa nec\n\n649Ante primis aliquam orci, ac in Mauris vel sit molestie faucibus. ac\n\n650Condimentum ac In in tortor metus in dui ante in massa, iaculis. in tincidunt. fames\n\n651Elit. neque. sit\nLorem in libero orci, dui malesuada semper. consectetur ut libero\nLorem\n\n652Ante orci iaculis. sit neque.\n\n653Efficitur dolor Vivamus ac velit. purus volutpat condimentum libero dui Integer sagittis eget fringilla\n\n654Mauris Mauris fames tincidunt. pharetra orci, neque. orci sem.\nLorem sem. vel ut in\n\n655Elit. massa et aliquam Vivamus quis, efficitur elit. Sed Fusce ut et orci, sit in,\n\n656In pharetra efficitur ut viverra metus Duis massa fringilla orci, purus\n\n657Ac rutrum vel ac molestie ipsum amet, fringilla aliquam Vivamus\n\n658Sem. pharetra Fusce Mauris In et\n\n659Ac ac efficitur Integer efficitur\n\n660Eget ipsum volutpat pretium ac efficitur primis in, ac pharetra\n\n661In efficitur Duis elit. sagittis ac massa, condimentum sit bibendum, semper\n\n662Eget molestie felis. est consectetur Fusce sem. ante Fusce lorem et\n\n663Est pretium elit. condimentum lorem primis semper ac iaculis. efficitur\n\n664Neque. massa, vitae Mauris dolor et consectetur rutrum ac Sed adipiscing\n\n665Sagittis orci, aliquam ante est fames enim ante rutrum dolor dolor volutpat tincidunt.\n\n666Nec Duis ac pharetra lorem aliquam massa,\n\n667Neque. neque. molestie volutpat Interdum ante\nLorem consectetur sem. adipiscing semper. fringilla\n\n668Molestie finibus et ut malesuada orci viverra primis ipsum orci massa orci tortor fames ante\n\n669In ut efficitur metus Interdum dui metus ac eget in, adipiscing ut\nLorem nunc Vivamus\n\n670Ut ut primis orci, Integer metus elementum In ac orci, iaculis. quis,\n\n671Pharetra iaculis. adipiscing ac Vivamus elementum Ut fringilla Fusce\n\n672Nec primis Interdum ut in lorem ipsum sagittis efficitur sagittis malesuada ante hendrerit ac pretium\n\n673In felis. ipsum Sed tortor eget iaculis. ipsum\n\n674Duis aliquam quis, Vivamus iaculis. dolor\n\n675Ac efficitur et nunc orci libero Integer elementum in enim ante consectetur fringilla nunc\n\n676Vitae pretium ac purus elit. ac Integer\n\n677Aliquam efficitur finibus sit purus vitae lorem sagittis dolor tincidunt. ut pretium ante\n\n678Consectetur enim posuere consectetur ac hendrerit orci condimentum Mauris rutrum condimentum metus elit. metus\n\n679Rutrum\nLorem posuere posuere viverra ante Fusce finibus\n\n680Ut massa, pretium sit ante primis sem. massa,\n\n681Velit. Fusce orci eget ac ante massa sit sem. lorem nunc\n\n682Lorem ac in, pretium Fusce ac\n\n683Sem. volutpat tortor pretium purus\nLorem ac iaculis. nec hendrerit pretium\n\n684Elit. condimentum fames fringilla sit hendrerit primis faucibus. ac orci\n\n685Vitae sit vel pretium efficitur semper.\nLorem fringilla\n\n686\nLorem metus ipsum sagittis adipiscing vel consectetur elit. ipsum ut Sed posuere\n\n687Ante dui consectetur ac orci, neque. lorem malesuada\nLorem\n\n688Adipiscing ut primis Interdum consectetur efficitur ut consectetur dolor est semper.\n\n689Pretium lorem massa, ac dui ac purus\n\n690Elit. ante pharetra hendrerit molestie Duis volutpat in tortor Sed ac amet, molestie\n\n691Est eget rutrum metus vitae neque. in\nLorem lorem efficitur\n\n692Amet, ante Interdum ipsum faucibus. pretium semper. sit ac sit in\n\n693Eget elit. In massa, elementum hendrerit Ut primis efficitur Integer Sed\n\n694Sed adipiscing efficitur in fringilla\n\n695Dolor vel ante ante orci molestie faucibus. ligula primis purus hendrerit\n\n696Elit. rutrum dui lorem malesuada scelerisque felis. nunc felis. ut Ut tincidunt. ut\n\n697Fames tincidunt. amet, volutpat eget ac\n\n698Est vitae ante efficitur Integer ante consectetur pharetra ac elit. ac vel elementum ligula tortor\n\n699Fringilla nunc ante Vivamus ante metus rutrum in semper primis Fusce ante\n\n700Eget amet, Duis pretium et sem.\n\n701Dui orci orci consectetur in eget\nLorem ac est vitae elit.\n\n702Ut ante in Integer Ut elit. ipsum et ac amet,\n\n703Massa, massa, efficitur est bibendum, pretium dolor ipsum\n\n704Nunc nec faucibus. malesuada consectetur purus ac felis. efficitur pretium ante\nLorem volutpat orci\n\n705Faucibus. aliquam eget pharetra pretium amet, malesuada ut ac ante Mauris efficitur vel hendrerit\n\n706Massa, eget purus nunc orci Integer Fusce\n\n707In, viverra libero Ut ipsum ipsum ac Duis massa Interdum ipsum et in primis purus\n\n708Est tortor ut elementum pharetra ut\n\n709Fringilla ipsum hendrerit enim est in Sed sagittis condimentum Interdum in\n\n710In felis. ante tortor ac\nLorem est Duis malesuada quis, tortor felis. Mauris Mauris\n\n711Ipsum iaculis. Duis nunc est\n\n712Ut vitae neque. metus semper scelerisque Duis et Fusce ac in primis viverra\n\n713Vitae in ante ac elementum\n\n714Fusce sit fringilla efficitur ante Fusce consectetur sem. malesuada ante\n\n715Consectetur iaculis. primis ac amet, hendrerit faucibus. quis, ipsum massa,\n\n716Ipsum Duis Vivamus Duis et aliquam hendrerit fringilla\n\n717Ac Integer ut consectetur massa, Integer\nLorem ipsum\n\n718Ipsum sit eget tortor scelerisque felis. ac efficitur ac efficitur ut\n\n719Aliquam ipsum efficitur ut viverra quis, dolor In eget pharetra scelerisque\n\n720Interdum Mauris ipsum finibus nec in in, hendrerit sem. libero vitae aliquam Interdum ac dui\n\n721Pharetra hendrerit massa viverra consectetur scelerisque elementum fringilla vel orci, massa Sed Interdum orci, et\n\n722In, tincidunt. ante in, consectetur ut dui semper elementum vel consectetur in, Sed nec in,\n\n723Consectetur Integer ante lorem in consectetur ante Fusce enim orci, orci\n\n724Dui ac in elit. Integer orci,\n\n725Viverra metus semper Ut sagittis vitae ac ante semper orci bibendum, metus\n\n726Volutpat felis.\nLorem Duis ipsum felis. Duis in volutpat\n\n727Fames rutrum aliquam viverra sagittis semper Ut efficitur semper molestie Mauris ipsum\n\n728In fringilla lorem lorem fringilla nunc in orci, et elit.\n\n729In, pretium Mauris In Vivamus sit Mauris pharetra tortor Ut\n\n730Orci est sagittis est molestie ante\n\n731Primis Integer In consectetur malesuada fames sit posuere Duis eget\n\n732Primis hendrerit et metus Interdum dolor\n\n733Velit. sem. felis. vel Integer dolor in, ut quis,\n\n734Ac faucibus. eget libero sagittis Vivamus semper\n\n735Felis. ante libero ipsum iaculis. condimentum metus in viverra vel\n\n736Sit ac tortor finibus hendrerit lorem vel adipiscing\n\n737Duis ligula Interdum ac hendrerit orci est et dolor orci, quis, felis. et eget\n\n738Neque. Duis fames consectetur ligula\nLorem metus posuere orci\n\n739Massa aliquam eget pharetra iaculis. neque. semper\n\n740Elit. ac sit Integer consectetur ante malesuada ac neque. est metus Sed in elit. elit.\n\n741Quis, primis in ac dolor sit Duis viverra\n\n742Ante Mauris purus quis, In semper. elit. bibendum, scelerisque elementum quis, ligula eget efficitur ut\n\n743Tincidunt. malesuada tincidunt. ut enim Sed\n\n744Neque. posuere Ut Fusce in ac enim est efficitur consectetur posuere\n\n745Elementum efficitur ipsum Mauris in, tortor amet, bibendum, ligula Ut pharetra ac quis,\n\n746Semper. in finibus faucibus. eget nec sagittis\nLorem in velit. ipsum consectetur metus est In\n\n747Semper efficitur adipiscing elementum Mauris nec\n\n748Felis. amet, scelerisque metus condimentum finibus in pretium sagittis Duis Sed primis\n\n749Sit ipsum est fringilla pretium semper ante dui semper elementum metus semper. sagittis\n\n750Malesuada ut fames In vitae elit. molestie vitae sagittis\n\n751Interdum ut ac molestie pharetra nec Ut elit. velit.\n\n752Sed condimentum finibus dui elementum ac semper Interdum semper. nunc sagittis ac\n\n753Ligula scelerisque Vivamus ac fames quis, sem. ante\n\n754Scelerisque Fusce ante eget Interdum est in, ut sem. eget Mauris quis, felis. dolor\n\n755Fringilla Vivamus in in Duis consectetur sem.\n\n756Quis, neque. in hendrerit libero orci iaculis. enim dolor elit. ligula\n\n757Adipiscing ante faucibus. et amet,\n\n758Mauris lorem ac in in molestie efficitur ac ante ligula\n\n759Velit. ac ut rutrum viverra elit. purus Mauris fames in felis. ac in semper. orci,\n\n760In, lorem lorem molestie consectetur aliquam Interdum ipsum malesuada elementum in in\n\n761Interdum pretium semper. tincidunt. Integer Interdum finibus\n\n762Viverra metus quis, vel ante dui efficitur molestie et volutpat Fusce purus\n\n763Tortor in, malesuada Mauris metus ante dui\n\n764Purus ante ipsum Duis Integer purus elit. ut Interdum massa semper velit. metus\n\n765Enim in ac ac libero\n\n766Elit. amet, aliquam Integer orci vel purus scelerisque primis Duis finibus in tortor\n\n767Sit fringilla purus orci, hendrerit Duis scelerisque Ut volutpat malesuada ac Vivamus libero rutrum\n\n768Mauris Interdum vel tincidunt. efficitur viverra tortor dui orci fringilla vel libero nunc\n\n769Semper sem. molestie et ac elementum ut ut pretium Duis\nLorem ac consectetur hendrerit\n\n770Primis metus et nunc Duis vitae ipsum Interdum purus ac lorem ipsum scelerisque adipiscing quis,\n\n771Ante et in velit. purus\n\n772Et elit. purus fringilla elit. Interdum volutpat molestie orci,\n\n773Ac molestie ipsum malesuada vitae faucibus. scelerisque iaculis. condimentum\n\n774Neque. finibus posuere et in ac neque. ac\n\n775Bibendum, amet, ligula in elit. In massa\n\n776Ut Sed ante ante neque. viverra sem. metus ante hendrerit purus in et lorem ac\n\n777Viverra elementum pretium consectetur orci, Fusce tortor hendrerit eget\n\n778Mauris eget semper. in orci rutrum ipsum fringilla\n\n779Finibus ac ligula eget posuere Ut vitae Duis elementum viverra\n\n780Massa adipiscing bibendum, Ut massa, elit. et volutpat et iaculis. amet, scelerisque semper massa,\n\n781Nec eget scelerisque Sed aliquam\n\n782Volutpat Fusce malesuada iaculis. hendrerit in, pretium lorem rutrum orci amet, sit ante iaculis.\n\n783Vel tortor ante quis, sit orci, condimentum Sed scelerisque dui efficitur ac ante\n\n784Malesuada Ut Integer finibus condimentum efficitur tortor fames orci iaculis. fames fames fames condimentum neque.\n\n785Eget\nLorem finibus Interdum condimentum elit. enim ut eget\n\n786Tortor hendrerit enim ut nunc tortor felis. Mauris orci\n\n787Velit. aliquam dui neque. ut aliquam felis. finibus ante sagittis lorem\n\n788Iaculis. Mauris massa elit. libero semper. libero volutpat ante massa, lorem\nLorem metus\n\n789Felis. dolor Mauris dui pretium est purus nec fringilla malesuada iaculis. hendrerit\n\n790Ac dolor Vivamus orci, consectetur ligula eget vel tincidunt. malesuada purus massa, in finibus\n\n791Vitae aliquam massa, pharetra amet,\n\n792Eget malesuada in, adipiscing felis. scelerisque\n\n793Molestie nunc scelerisque massa, rutrum vitae Integer et posuere elit. sem. Interdum adipiscing enim\n\n794Elit. volutpat tincidunt. purus nec felis. condimentum nec nunc ac eget\n\n795Vitae\nLorem vel lorem libero vitae est ac libero rutrum Fusce\n\n796Elit. rutrum libero ipsum elit. volutpat orci, in, velit. elit. ac in\n\n797In condimentum faucibus. efficitur libero iaculis. ante tincidunt. lorem elit. Interdum ante efficitur\n\n798In, Integer viverra ipsum ut consectetur pretium enim aliquam massa ac\n\n799Nunc bibendum, libero posuere dolor amet,\nLorem semper\n\n800Primis primis ac Fusce efficitur nec lorem condimentum Sed efficitur hendrerit metus sem. felis.\n\n801Eget rutrum iaculis. felis. ac et ligula nunc viverra et viverra ante ut quis, metus\n\n802Sit volutpat efficitur ut et ante viverra ac consectetur\n\n803Interdum viverra elementum et malesuada\n\n804Efficitur Vivamus In semper Integer viverra massa ligula ac efficitur viverra nunc orci, Fusce Fusce\n\n805Elit. consectetur fringilla in bibendum, sit purus malesuada scelerisque et In quis, sit sem. vel\n\n806Amet, pretium pretium in ipsum massa, sem. Fusce ac semper. lorem metus efficitur\n\n807In Integer semper vitae adipiscing est bibendum, rutrum libero\nLorem vitae\n\n808Tincidunt. elit. consectetur metus nunc\n\n809Molestie faucibus. Mauris condimentum In eget ut\n\n810Semper felis. ut ante condimentum enim ante ut\n\n811Aliquam orci elementum eget scelerisque rutrum scelerisque Mauris sit\n\n812Ut Fusce sem. elit. In in vitae libero iaculis. Fusce\n\n813Nec efficitur ac metus ut orci, vitae efficitur neque.\n\n814In, neque. orci, purus primis ac libero\n\n815Quis, ut ut enim dolor Sed\n\n816Consectetur tincidunt. Vivamus fames finibus scelerisque molestie malesuada sit\n\n817Ut orci massa, orci et felis. ac efficitur velit.\n\n818Nunc et purus posuere eget tortor bibendum, aliquam viverra ut fames felis. eget dolor faucibus.\n\n819Mauris vitae iaculis. in adipiscing\n\n820Ac adipiscing sit condimentum In ipsum Duis\nLorem\nLorem ac Sed velit. Integer ut enim\n\n821Semper. scelerisque metus et fames molestie aliquam Integer dolor semper et\n\n822Velit. Vivamus sagittis ac In tincidunt. rutrum amet,\n\n823Duis condimentum libero sagittis sem. quis, Ut in malesuada sit ac\nLorem ipsum\n\n824Felis. in massa, Mauris elit. ac in,\n\n825Ut eget semper. finibus ipsum neque. iaculis.\n\n826Fringilla pretium eget Duis elementum orci finibus orci dui Interdum\n\n827In ligula ipsum rutrum Ut elit. est\n\n828Scelerisque massa ac fames ante\n\n829Dolor ac velit. consectetur adipiscing faucibus. sagittis posuere vel\nLorem\n\n830In enim quis, scelerisque sit purus ac tortor ante Mauris Ut hendrerit Fusce ut bibendum,\n\n831Semper ut metus velit. iaculis. elit. Interdum Vivamus Ut elementum Interdum sit in condimentum Fusce\n\n832Sem. ipsum primis purus velit.\n\n833Felis. metus in metus vel\n\n834In Fusce Interdum sem. finibus velit.\n\n835Ante pretium In bibendum, efficitur et ut sit In sem.\n\n836Fringilla elit.\nLorem enim posuere metus ac velit. scelerisque eget iaculis. enim\n\n837Velit. ac posuere semper orci ante\nLorem efficitur ante\n\n838Ac Sed ipsum lorem nunc molestie\n\n839In fames Mauris molestie rutrum ipsum In libero ipsum ac aliquam purus nunc\n\n840Tortor velit. finibus et faucibus. ligula amet, Ut elit. dui Interdum efficitur fringilla faucibus.\n\n841Efficitur est velit. finibus fames ligula efficitur\n\n842Ac orci ligula aliquam fames ipsum\n\n843Elit. semper ligula Ut pharetra neque. ac efficitur libero faucibus. adipiscing\n\n844Ac molestie bibendum, semper. et condimentum enim est tortor velit. viverra bibendum,\n\n845Ligula Sed eget orci in\n\n846Primis Duis elit. tincidunt. ac ac ante velit. efficitur\n\n847Vivamus volutpat pretium vitae ac felis. ac tortor amet, sagittis viverra sagittis ut libero\n\n848Efficitur semper. In Mauris semper. primis lorem malesuada elementum consectetur iaculis. Interdum dui\n\n849Quis, et scelerisque posuere orci semper metus ut lorem hendrerit viverra amet,\n\n850Elit. in ipsum tortor ac ante dolor semper. hendrerit molestie\n\n851Molestie ligula efficitur In aliquam est\n\n852Eget Integer tincidunt. fames hendrerit iaculis. ac sagittis Mauris\n\n853Efficitur pretium amet, quis, in in elementum efficitur Duis Interdum\n\n854Elementum ac adipiscing felis. quis,\n\n855Dui pharetra neque. elit. ac\n\n856Dui aliquam molestie pharetra tortor iaculis. quis, ipsum Ut\n\n857Purus Integer efficitur ligula Sed adipiscing\n\n858Ante massa, ipsum orci faucibus. Duis ut ante ante ac Ut\n\n859Adipiscing ante volutpat in lorem scelerisque nunc in nec elementum Fusce elit. orci ligula\n\n860Mauris faucibus. elementum Fusce in semper elit. ante condimentum est primis massa Interdum\n\n861Ante Integer elit. aliquam elit. massa, volutpat tortor est\n\n862Metus volutpat libero ipsum semper. ut orci, metus\n\n863Felis. vitae sit In ac Sed Vivamus consectetur Sed\n\n864Dolor Mauris purus aliquam vitae felis. aliquam vitae lorem sit lorem felis.\n\n865Nunc libero in elit. nec Interdum ipsum eget fames molestie ipsum\n\n866Libero ipsum bibendum, ut condimentum amet, adipiscing ipsum massa nunc\n\n867Quis, adipiscing ac orci, semper malesuada velit. orci massa ligula neque.\nLorem eget\n\n868Amet, ligula massa, ante In consectetur vel dolor tortor\n\n869Ante elementum molestie fringilla eget orci,\n\n870Scelerisque metus orci, ligula tincidunt. semper. ac in orci\n\n871Interdum pharetra nec elementum pretium et ac in semper.\n\n872Condimentum Vivamus metus efficitur ac Ut tincidunt.\n\n873Ligula in ante in in tincidunt. ante fames velit. rutrum volutpat Fusce semper fringilla consectetur\n\n874Integer vitae ante ut elit.\n\n875Interdum aliquam lorem orci faucibus. bibendum, Duis hendrerit in ac velit. bibendum, efficitur\n\n876Sit sit orci posuere pharetra elementum ante semper orci, nec consectetur sagittis efficitur bibendum,\n\n877Duis libero ut pharetra ipsum dui vel\n\n878Amet, ipsum consectetur eget bibendum, in elit. Interdum felis. massa, ac felis. Sed hendrerit\n\n879In Ut consectetur efficitur eget lorem viverra ut in vitae\nLorem eget enim\n\n880Sagittis in massa, ac et hendrerit efficitur\n\n881Felis. ac in dolor ut sit sit tincidunt. consectetur\n\n882Ut elementum in ac Integer sem. ligula scelerisque adipiscing viverra enim ac consectetur dui\n\n883Orci est ligula volutpat velit. ac sit\n\n884Nunc ligula bibendum, consectetur In primis libero scelerisque orci, ut Interdum ligula aliquam\n\n885Ac\nLorem Integer in iaculis. condimentum dui Duis\n\n886Neque.\nLorem ipsum\nLorem condimentum\n\n887Ac nec nunc metus purus\n\n888Neque. tortor ut dolor ante ac elementum aliquam viverra neque. eget Duis\n\n889Est elit. sem. Fusce quis, tortor sem. ac sagittis dui nec ligula in,\n\n890Scelerisque ut nunc fringilla ligula adipiscing et\n\n891In elit. Mauris metus pretium orci Ut primis Vivamus ut\n\n892Et ligula orci, est scelerisque adipiscing Fusce dui\n\n893Nec massa, ac in Vivamus Fusce volutpat\n\n894In sem. adipiscing et elit. elit. bibendum, ipsum neque. massa sagittis iaculis. Mauris\n\n895In, faucibus. dui fringilla tortor ante In aliquam pharetra hendrerit dui nec orci, posuere\n\n896Consectetur ante Integer et bibendum, amet, orci\n\n897Vitae et felis. rutrum in,\n\n898Ante volutpat\nLorem volutpat adipiscing et ac iaculis. Interdum fringilla\n\n899Quis, sit purus et in ligula In\n\n900Tortor fames efficitur neque. ac efficitur in bibendum, primis malesuada efficitur\n\n901Felis. ac orci, consectetur Duis ut ac massa in, efficitur Integer Vivamus sem. ante ac\n\n902Mauris tincidunt. et In in et nunc quis, finibus ac molestie efficitur ipsum sagittis\n\n903Sagittis ac ut In elit. Interdum ante neque. eget nec faucibus. hendrerit nec orci,\n\n904Rutrum libero sem. vel elementum dui Ut posuere\n\n905Malesuada et nec tortor libero ipsum malesuada viverra\n\n906Iaculis. ipsum ligula faucibus. felis. felis. tortor tortor\n\n907Purus tincidunt. ac amet, ac pharetra libero rutrum libero Fusce\n\n908Enim Integer Interdum ipsum pharetra vitae rutrum viverra aliquam massa,\n\n909Finibus efficitur In fringilla massa, ac ante Fusce ante quis, volutpat\n\n910Pretium felis. orci Interdum vitae nunc primis hendrerit ac sagittis\n\n911Condimentum elit. ut posuere semper iaculis. lorem aliquam nunc bibendum, ut\n\n912Ante pharetra aliquam In vel In\n\n913Ligula orci, tortor iaculis. quis, neque. ante ligula iaculis. vitae amet,\n\n914Viverra\nLorem efficitur fames ac posuere\n\n915Et elit. molestie elit. pharetra purus in\n\n916Ipsum ante Duis posuere purus scelerisque Ut nunc in nec quis, elit. consectetur malesuada amet,\n\n917Ac posuere eget Ut semper. iaculis. in, ut eget consectetur Interdum Duis rutrum pharetra efficitur\n\n918Ante velit. ante dui ipsum in vel et ante\n\n919Elit. ac et adipiscing ac libero purus Ut faucibus. et eget Mauris Mauris vel\n\n920Viverra iaculis. volutpat tincidunt. molestie orci, ut purus tortor sit in ut\n\n921Velit. ac in massa tortor molestie In\n\n922Amet, iaculis. velit. pharetra Mauris dui ac ac amet, semper ac consectetur consectetur massa,\n\n923Volutpat dui in In ut consectetur vitae ligula ac\n\n924Mauris sem. massa, massa ac\n\n925Efficitur scelerisque vel tortor iaculis. quis, molestie Interdum scelerisque vitae ligula\n\n926Faucibus. libero pharetra neque. massa\n\n927Bibendum, ante efficitur eget nunc aliquam faucibus. bibendum, felis. amet, vitae\n\n928Sit lorem eget semper. quis, viverra iaculis. massa\n\n929Efficitur ipsum volutpat massa Interdum neque. quis, rutrum ac elit. ligula\n\n930Ac tortor ipsum libero bibendum, consectetur ante fames ac\n\n931Elit. In adipiscing Mauris ligula in\n\n932Purus pretium iaculis. dolor sagittis\n\n933Vitae in felis. velit. Fusce orci ut Integer ac hendrerit ante dolor condimentum vitae\n\n934Duis ante Mauris metus Interdum ante nec bibendum, lorem ac massa\n\n935\nLorem Integer viverra nec sit efficitur efficitur adipiscing elementum neque. in Vivamus malesuada et\n\n936Pretium nunc primis elit. fringilla in in ante\n\n937Massa pretium faucibus. est purus In In purus tincidunt. fringilla malesuada massa efficitur\n\n938Integer est scelerisque tortor metus\n\n939Efficitur Interdum Duis felis. malesuada et consectetur\n\n940Aliquam elit. Vivamus viverra scelerisque massa, efficitur\n\n941Consectetur nec ante faucibus. Fusce viverra enim Mauris elementum felis. adipiscing primis et nunc in\n\n942Ac ac Ut in ipsum velit. Duis adipiscing sagittis velit. Mauris velit. efficitur\n\n943Rutrum Sed dui tortor Duis\n\n944Nec consectetur nec sit\nLorem lorem libero enim Interdum in fames ac ac\n\n945Sem. fringilla pretium bibendum, et ipsum\nLorem condimentum\n\n946Vel Vivamus Integer ante dolor et ante dolor efficitur efficitur ac eget faucibus.\n\n947Ac viverra volutpat hendrerit vitae\n\n948Ac elementum ac pretium ut\n\n949Elit. sagittis orci massa, ac\n\n950Integer semper. primis pretium libero elit. et felis.\n\n951Scelerisque pretium rutrum ac posuere fringilla molestie vitae sit Duis Integer in, tincidunt.\n\n952Enim quis, Ut neque. iaculis. volutpat elementum ac libero primis massa faucibus.\n\n953Hendrerit Mauris Mauris Interdum velit.\n\n954Amet, ut Interdum hendrerit ante fringilla nec ac dui nunc et consectetur ligula nunc sem.\n\n955Duis velit. tortor nec bibendum, efficitur Vivamus condimentum dolor molestie consectetur ante Integer\n\n956In ut amet, nec et bibendum, scelerisque sagittis dui ipsum orci consectetur\n\n957Vitae dui Interdum Sed Duis Duis purus semper. efficitur ante molestie posuere volutpat vel finibus\n\n958Elit.\nLorem tincidunt. est ut eget et Interdum\n\n959Molestie felis. ipsum ac adipiscing ac fames\n\n960Eget faucibus. efficitur in finibus malesuada ut et finibus\n\n961Nec Fusce dolor Integer Interdum viverra libero et posuere dolor Fusce Vivamus neque. faucibus. condimentum\n\n962Ipsum massa tincidunt. Interdum viverra aliquam primis\n\n963Condimentum vel ante malesuada orci, scelerisque ipsum ante\n\n964Neque. ac hendrerit posuere tincidunt. dui molestie in\n\n965Tincidunt. tortor fringilla viverra elit. semper sem. enim et\n\n966Ante hendrerit eget eget orci aliquam scelerisque ante\n\n967Vel quis, ac aliquam elit. velit. malesuada felis. et velit.\n\n968Vivamus pretium Ut Duis malesuada ac nunc metus viverra consectetur massa, vel\n\n969\nLorem Ut pretium fames in, elementum hendrerit elit.\n\n970Scelerisque ligula felis. sagittis tincidunt. in Integer tincidunt. in\n\n971Adipiscing quis, dolor ante orci\nLorem ac ac sagittis massa,\n\n972Ac metus efficitur tincidunt. libero\n\n973Eget ut elit. efficitur metus\n\n974Elementum adipiscing est adipiscing massa, Interdum fames adipiscing pharetra massa posuere libero ante\n\n975Et nunc viverra ante et ac sagittis\n\n976In massa Integer molestie Ut pharetra tortor\n\n977Sem. molestie ipsum ut tincidunt. bibendum, malesuada nunc enim ipsum\n\n978Hendrerit malesuada in pharetra vitae vel lorem\n\n979Posuere semper. primis consectetur Fusce ac velit. vel Integer pharetra ipsum\n\n980Velit. hendrerit Fusce molestie amet, pretium metus metus vel in ante elit. orci,\n\n981In rutrum felis.\nLorem ante fringilla lorem\n\n982Felis. posuere Duis fames Sed sit in Fusce ante aliquam Integer massa tortor\n\n983Interdum Duis purus quis, tincidunt. elit. ac vitae bibendum, libero\n\n984Ante finibus semper ac bibendum, semper iaculis. adipiscing enim efficitur lorem neque. ipsum\n\n985Amet, orci Sed dolor orci, dolor ante aliquam Mauris efficitur pharetra efficitur\n\n986Condimentum metus pretium dolor primis fringilla efficitur neque. Ut semper. massa, felis. adipiscing orci\n\n987Ante viverra pharetra ut metus faucibus. purus volutpat Integer orci,\n\n988Est Duis ante faucibus. orci\n\n989Condimentum amet, quis, massa aliquam sem. volutpat ac efficitur elementum\n\n990Ligula sem. dolor bibendum, hendrerit Mauris\n\n991Scelerisque pharetra ante elit. efficitur\n\n992Vel primis elementum in vitae ac orci,\n\n993Scelerisque neque. dolor semper. et bibendum, est ac fringilla\n\n994Pretium in, elit. Mauris Interdum ut vitae\n\n995Massa, in, ut Duis condimentum Fusce\n\n996Elit. ut ligula ante ut viverra Sed Duis eget nunc\n\n997Condimentum massa nec et ut aliquam\n\n998Sagittis Duis hendrerit elit. vel viverra Sed ac condimentum vitae ut pretium\n\n999Ut tincidunt. Integer fringilla ante in, sit ligula efficitur ac nec Integer\n\n1000Ut quis, efficitur faucibus. primis velit.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
357
+ "searchText": "Dropdowns\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nDropdowns\nButtonDropdown\nSimpleButtonDropdown\n\nSingleButtonDropdown\n\nWrapper component for ButtonDropdown, kept for backwards compatibility.\n\nSplitButtonDropdown\n\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nNormal Button\nnoCaret\nDropup\nSplitButton\n\nSplitButton\n\nLarge button\nDefault button\nSmall button\nMini button\n\nDropdown with max-height\nDropdown with dopup\nDropdown with pullRight\nControlled Dropdown\n\nDropdown variantsText dropdown\n\nCustom dropdowns for filter tagsTag dropdown\n\nTag small dropdown\n\nCustom dropdowns for labelsActive\n\nActive\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nSingleButtonDropdown\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | String / Node | \"\" | Displayed button title. |\n| items | Array of Objects | [] | Details see above for the ButtonDropdown |\n| disabled | Boolean | false | Disables every entry on the title list item. |\n| className | String | — | Additional classes to be set on the dropdown-submenu element. |\nCustom Dropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nDropdown using React Portal\nA typical use case for ButtonDropdown using portal is when a parent component has an overflow: hidden or z-index style, but you need the dropdown to visually “break out” of its container.\nNormal Button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Massa efficitur quis, felis. in iaculis. Integer iaculis. elit. tortor eget\n\n2Elit. consectetur purus vitae in, felis. ligula velit. ante iaculis.\n\n3Ante ac massa In efficitur faucibus. efficitur dui metus scelerisque\n\n4Posuere molestie\nLorem ac Integer\n\n5Vitae Fusce felis. quis, ligula orci, Integer consectetur fringilla\n\n6Elementum aliquam sagittis ligula tortor elementum efficitur vel vel dui aliquam ut pharetra condimentum pharetra\n\n7In rutrum aliquam pharetra nec viverra malesuada efficitur consectetur enim scelerisque elit. efficitur\n\n8Ipsum dolor dolor in ut elit. elit. ligula felis. Sed ligula volutpat pretium faucibus. in\n\n9In ante In\nLorem eget eget efficitur massa, iaculis.\nLorem finibus\nLorem lorem lorem\n\n10Viverra velit. purus viverra hendrerit Interdum ante Interdum est posuere In\n\n11Sed nunc In finibus vel In consectetur ante ac Fusce\n\n12Sit Interdum sem. in, ante consectetur massa ut sem.\n\n13Ac Mauris pretium elementum ligula fringilla velit. ut iaculis. pretium faucibus.\n\n14Nunc semper. efficitur elementum ante velit. purus libero dolor ac posuere\n\n15Eget Sed elit. massa, fames consectetur ipsum iaculis. orci, faucibus. nunc velit. quis, Duis posuere\n\n16Sit hendrerit ante ipsum sem. quis, semper consectetur ac efficitur ac molestie\nLorem\n\n17In velit. elit. et ipsum enim tortor bibendum,\n\n18In eget orci, vitae tortor primis semper. fames orci,\n\n19Vitae malesuada massa fames consectetur hendrerit posuere efficitur Sed pharetra massa, efficitur\n\n20Elementum neque. iaculis. dui eget metus amet, eget fringilla scelerisque metus Sed Sed velit.\n\n21Nec aliquam condimentum enim ante neque. Vivamus rutrum\n\n22Et dui est consectetur orci, in, consectetur fringilla\n\n23Lorem neque. velit. bibendum, ante ante felis. felis. condimentum dolor\n\n24Sit\nLorem faucibus. ut et Fusce sit sagittis est in Sed neque.\n\n25Pretium velit. semper metus rutrum vitae faucibus. pretium consectetur\n\n26Bibendum, efficitur ac finibus Interdum est faucibus. ac fringilla Vivamus\n\n27Massa fames elementum Vivamus dui\n\n28In in elementum In Sed orci ipsum\nLorem\n\n29Ac ac ut fringilla est dolor quis, in hendrerit Ut\n\n30Nunc efficitur dui et purus elit. consectetur in, sem. elit. elit. dui efficitur viverra ante\n\n31Eget viverra felis. scelerisque Sed\n\n32Felis. efficitur in ac velit. ante neque. orci ac ante semper.\n\n33Malesuada consectetur ac ligula massa efficitur condimentum finibus\n\n34Aliquam ac et semper ut tortor tincidunt. nunc tortor in vel faucibus. ac dui bibendum,\n\n35Nunc malesuada volutpat ligula vel felis. lorem\n\n36Velit. ante Sed massa, ut finibus in et\n\n37Velit. semper eget ac Vivamus nunc libero ac\n\n38Efficitur dui nunc bibendum, primis ante ligula consectetur\n\n39Tortor In fames Integer vitae eget ante faucibus. eget primis ac ante\n\n40Neque. ante in felis. tortor ipsum faucibus. ante bibendum, posuere in efficitur velit. iaculis. bibendum,\n\n41Libero\nLorem metus ante adipiscing in semper. condimentum nec iaculis. orci quis,\n\n42Massa, pharetra et Fusce In quis, quis, ante neque. est\n\n43Et sit fringilla in, dolor hendrerit Duis fames adipiscing consectetur adipiscing malesuada adipiscing volutpat\n\n44Primis vel eget semper ante molestie Fusce nec\n\n45Fames ac ipsum faucibus. libero sem. ante Ut elementum\n\n46Fusce quis, fringilla hendrerit et pharetra adipiscing viverra ante ac Mauris\n\n47Nec nunc in ac in\n\n48Ligula nunc ut scelerisque ante efficitur velit.\n\n49Efficitur viverra ipsum rutrum pretium amet, ipsum est efficitur\n\n50Fringilla in, pretium hendrerit aliquam sagittis elit. neque. adipiscing\n\n51Molestie ante amet, nec ut hendrerit purus amet, Ut ante velit. elit. molestie ac\n\n52Velit. semper ac Ut\nLorem Sed primis et\n\n53In Interdum pretium ante ipsum adipiscing vitae in Duis velit. amet, adipiscing nunc\n\n54Nunc purus faucibus. nec lorem consectetur lorem ligula ante in condimentum Ut\n\n55Dui purus tortor\nLorem ipsum massa, massa, elementum felis. in Ut\n\n56Posuere tincidunt. libero Mauris scelerisque volutpat ac Duis\n\n57Ante vitae sagittis vel ac In ut semper primis semper. nec\n\n58Ac in, massa, rutrum molestie dui felis. quis, Integer\n\n59Dui tortor ante faucibus. ipsum\n\n60Pharetra vitae nec pharetra metus nunc malesuada\n\n61Sit libero efficitur consectetur In sit vitae\n\n62Fusce consectetur\nLorem ipsum vitae Fusce Vivamus est iaculis. purus pharetra Integer ac in, nec\n\n63Primis fames condimentum semper. hendrerit Interdum ac scelerisque Ut elit. in pharetra\n\n64Ipsum ipsum viverra efficitur pharetra Duis in\n\n65Rutrum lorem ipsum sagittis nec Vivamus ligula Ut ipsum fringilla vel ligula Interdum neque. sem.\n\n66Vel fringilla fringilla ut finibus faucibus. semper ac semper in lorem primis lorem libero\n\n67Elementum massa tincidunt. sagittis enim ut iaculis. ante metus fames ante efficitur\n\n68Aliquam viverra molestie est sit dolor et semper nec semper. ipsum malesuada\n\n69Metus molestie ac semper consectetur ante est libero consectetur Mauris Sed malesuada\n\n70Metus nec semper. In pretium Vivamus in In neque. ante pretium adipiscing ipsum\n\n71Aliquam et In Mauris metus vel ac ante finibus bibendum,\nLorem iaculis.\n\n72Sed ac ante semper malesuada amet, ante fringilla ac in Mauris\n\n73Ligula ante condimentum fringilla Sed aliquam ac iaculis. enim amet,\n\n74Ac finibus est molestie amet, ac ac ac elit.\n\n75Ipsum elit. elit. posuere ut efficitur dolor sem. pretium Ut vitae vitae\n\n76In Fusce hendrerit Fusce ac lorem primis in posuere bibendum, metus nunc vitae Duis\n\n77Eget massa in fringilla est ipsum efficitur elit. lorem sagittis neque. elit. Duis nunc adipiscing\n\n78Adipiscing quis, ipsum Interdum velit. velit. ut fringilla ac\nLorem metus posuere\n\n79Elit. semper. pretium ante est et dui fringilla elit. vitae pretium Mauris ut consectetur efficitur\n\n80Massa, lorem eget et In Fusce amet,\n\n81Iaculis. sagittis ac lorem sit elit. ipsum ipsum In\nLorem bibendum, pretium condimentum dui in\n\n82Et enim amet, in velit. ligula In sagittis orci, neque. sit Fusce\nLorem et nec\n\n83\nLorem ante metus fringilla tortor semper. efficitur efficitur quis, semper ipsum massa, ut iaculis.\n\n84Vivamus primis ut ac amet, iaculis. Mauris Fusce Mauris\n\n85Condimentum ante ac elit. iaculis. Ut ut ut et finibus\n\n86In, Vivamus adipiscing consectetur enim fames primis tincidunt.\nLorem quis, nec Interdum fames condimentum ut\n\n87In, sit ac dui consectetur finibus\n\n88Sem. condimentum ante elementum elit. ac ante faucibus. sit massa, vitae\n\n89Rutrum elit. ipsum Ut libero felis. consectetur dolor tincidunt. enim massa in,\n\n90Tincidunt. pharetra et ipsum in est\n\n91Ante massa, et orci elementum\n\n92Fringilla dolor enim pretium vitae pharetra ac bibendum,\n\n93Ac libero sem. tincidunt. primis iaculis.\n\n94Ac quis, et nec rutrum in, volutpat semper.\n\n95Consectetur faucibus. hendrerit vitae consectetur lorem efficitur ac et vitae adipiscing pretium orci fringilla in\n\n96Vel orci sem. efficitur hendrerit sit massa malesuada massa ante ligula In massa Mauris\n\n97Finibus in, faucibus. Sed\nLorem vitae sem. bibendum,\n\n98Elementum et tortor\nLorem ac fringilla massa semper ac Mauris nunc et Duis primis primis\n\n99Vel scelerisque et bibendum, Vivamus nec lorem\n\n100Eget purus in ut dui Ut Integer volutpat ante\n\n101Sem. efficitur elit. scelerisque ipsum primis fames hendrerit Mauris pretium\n\n102Dolor aliquam massa, faucibus. efficitur ipsum malesuada tortor felis. dui quis, eget Interdum orci et\n\n103Hendrerit molestie finibus in velit. ac sagittis finibus ac velit.\nLorem in\n\n104Elit. hendrerit amet, ante volutpat nunc ante Mauris\n\n105Mauris posuere\nLorem enim in scelerisque\n\n106Faucibus. posuere ante scelerisque finibus\n\n107Semper enim In elit. consectetur\n\n108Ante fringilla iaculis. tincidunt. viverra rutrum enim ante ligula efficitur consectetur\n\n109Fames metus in Fusce semper sagittis condimentum semper. purus elit.\n\n110Vivamus massa, Vivamus volutpat nunc nunc\n\n111Fusce efficitur efficitur rutrum pharetra in tincidunt.\n\n112Eget velit. condimentum condimentum finibus ipsum in eget faucibus. faucibus. viverra\n\n113Eget tortor in ligula massa, ac condimentum massa, pharetra in fames malesuada sit ante\n\n114Neque. elit. in ac efficitur aliquam malesuada ac aliquam Fusce molestie pharetra Ut\n\n115Ante sagittis molestie volutpat in ut Duis nec orci eget ipsum efficitur nec\n\n116Ante pretium Ut iaculis. In iaculis.\n\n117Eget ac consectetur ut aliquam sagittis pretium in\n\n118Massa efficitur In viverra fames bibendum, ac ut\n\n119Iaculis. in consectetur Mauris viverra bibendum, in pretium rutrum ac\n\n120Malesuada metus purus efficitur pretium libero Fusce in Interdum velit. In quis, in, Mauris malesuada\n\n121Ut fames bibendum, pretium consectetur elit. In sem.\n\n122Ac ut in tincidunt. aliquam efficitur bibendum, felis. Vivamus volutpat scelerisque\n\n123Metus Interdum orci, ipsum fringilla ante efficitur hendrerit neque. efficitur hendrerit quis, Integer ut dolor\n\n124Ac quis, Ut ac semper. massa, Fusce ac scelerisque tincidunt. Mauris Mauris semper iaculis. ut\n\n125Elit. bibendum, neque. ac semper. pretium quis, Fusce\n\n126Elementum sit finibus et consectetur Vivamus ipsum hendrerit In bibendum, ut posuere\n\n127Iaculis. massa, consectetur faucibus. bibendum, volutpat\n\n128In eget semper. adipiscing sagittis lorem ante\n\n129Eget molestie metus purus in, fringilla orci\n\n130Velit. enim amet, finibus quis,\n\n131Sagittis ante eget iaculis. ac\n\n132Ac nunc massa, iaculis. fringilla\n\n133Libero volutpat ante vel neque. vel ut Duis ipsum\n\n134Sagittis enim et eget dui tincidunt. aliquam scelerisque purus\n\n135Fringilla Ut elementum aliquam ac elit. rutrum ante consectetur fames\n\n136Dolor nec primis posuere primis ligula volutpat\n\n137Ante sagittis massa hendrerit ac aliquam vitae\n\n138Ante ante purus aliquam tincidunt. efficitur pharetra semper.\n\n139Mauris ac posuere faucibus. ipsum viverra Integer felis. Fusce felis. adipiscing orci,\n\n140Ac ipsum bibendum, iaculis. purus elit. elementum semper rutrum ac consectetur\n\n141Enim metus pharetra finibus semper in purus adipiscing ac ipsum ac\n\n142Fringilla eget sem. massa, malesuada ante ipsum ac Ut\n\n143Duis ipsum iaculis. aliquam sit bibendum, felis. in est Fusce finibus enim nunc\n\n144Vel pharetra eget rutrum viverra enim orci, bibendum, Duis efficitur consectetur elit. in, eget\n\n145Bibendum, et scelerisque libero bibendum, ac orci, fames et\nLorem orci\n\n146Quis, amet, quis, et et viverra nec\n\n147Sed elementum tincidunt. semper eget Ut vitae\n\n148Massa hendrerit ac in purus ac Ut vel primis\n\n149Elementum primis et velit. Integer lorem molestie pharetra Duis pharetra ipsum massa,\n\n150Massa Sed elit. enim sem. bibendum, Sed in, in et consectetur et ligula ac\n\n151Fames tincidunt. pharetra orci pretium et viverra\n\n152Scelerisque hendrerit in, massa, ipsum posuere\n\n153Quis, neque. ut nunc Mauris pharetra ante neque.\n\n154Tortor in, enim Integer elit. massa scelerisque Vivamus\n\n155Pretium ac tincidunt. dolor massa faucibus. in pharetra molestie adipiscing libero finibus sagittis elementum\n\n156Ante tortor Interdum consectetur volutpat elit. felis. primis sit sit faucibus. efficitur purus posuere\n\n157Finibus hendrerit Fusce elementum ac viverra fames massa, rutrum Duis\n\n158Elementum ante viverra iaculis. in, scelerisque\n\n159Enim Mauris eget ut posuere ac nunc in, aliquam scelerisque\n\n160Massa enim quis, in lorem consectetur ut quis, felis. ac pretium Sed velit. eget\n\n161Fusce Sed consectetur amet, aliquam In\n\n162Ligula in sit ac quis, primis velit. malesuada ligula elementum eget orci\n\n163Semper. ligula adipiscing consectetur amet,\n\n164In lorem amet, ut felis.\n\n165Semper condimentum sem. nec sit semper lorem ac\n\n166Et nec elit.\nLorem\nLorem efficitur\n\n167Ante dolor efficitur dui eget In\n\n168Efficitur fames efficitur massa, fames ante massa, vel elementum semper dui Vivamus viverra neque.\n\n169\nLorem ante efficitur bibendum, aliquam massa, felis. aliquam fames tincidunt. aliquam\n\n170Ac efficitur orci ac eget ac in orci fringilla pharetra in, pretium nec Ut bibendum,\n\n171Primis vel ipsum lorem et semper ac ante ante est sit\n\n172Scelerisque metus libero Duis semper Sed posuere ipsum sem. efficitur volutpat pretium\n\n173Rutrum nec ipsum iaculis. semper. Ut massa, adipiscing ac eget Duis et in quis, tincidunt.\n\n174Dui pretium scelerisque ante consectetur eget nec ipsum\n\n175Sem. est Duis est faucibus. vel orci ac et In\n\n176Tincidunt. elementum in malesuada orci, metus ut viverra neque. massa posuere Interdum elit. ac\n\n177Molestie consectetur tincidunt. condimentum ac ac et et ante Integer massa\n\n178Semper. vitae in condimentum scelerisque finibus posuere amet, ante semper purus\n\n179Ante ac eget finibus consectetur ipsum aliquam ligula ante tincidunt.\n\n180Scelerisque velit. sem. dui Mauris eget\n\n181Velit. consectetur rutrum vitae ante\n\n182Rutrum amet, bibendum, semper Duis\n\n183Metus consectetur viverra nec massa consectetur lorem Interdum ac ut\n\n184Adipiscing eget tortor est In rutrum vitae aliquam ac\n\n185Aliquam fames dolor massa, neque. quis, in nec faucibus. semper. ut\nLorem eget consectetur\n\n186Malesuada Fusce bibendum, Mauris ante fames ante faucibus. Ut aliquam in eget malesuada amet,\n\n187Ligula adipiscing purus Mauris ac elementum elementum pharetra In amet, vel ante sem.\nLorem adipiscing\n\n188Faucibus. massa, In ac ac neque. Integer quis, efficitur semper. primis elit. neque. ac\n\n189Semper. metus velit. consectetur iaculis.\n\n190Purus vel quis, sit ac\n\n191Lorem eget nec molestie ut felis. ac ligula ac viverra\n\n192Ac quis, dui hendrerit ipsum Ut vitae eget metus amet,\nLorem hendrerit ut metus semper.\n\n193Rutrum amet, semper. tincidunt. ante ipsum\n\n194Faucibus. Vivamus hendrerit faucibus. ante ipsum sem. enim in fringilla sagittis eget vel Interdum\n\n195Ut condimentum et vitae ut\n\n196Semper. hendrerit fames\nLorem bibendum, malesuada ante pharetra posuere finibus ipsum hendrerit posuere est semper.\n\n197Elementum dui pretium in scelerisque viverra vitae tincidunt. fringilla\n\n198Condimentum in elit. adipiscing elit.\n\n199Mauris vitae massa ligula ut ac\nLorem ante bibendum, ut hendrerit ante purus\n\n200Et quis, finibus Ut sagittis est orci,\n\n201Vivamus fames Duis consectetur est velit.\n\n202Tortor vel ante in Sed quis, rutrum amet,\n\n203Scelerisque ut elit. in, dolor orci ante In vitae tincidunt. Ut\n\n204Pharetra orci iaculis. primis molestie Fusce viverra vel\nLorem sem. purus\n\n205Fames primis massa semper ut in, purus neque. finibus eget elit. condimentum\n\n206Tortor ante Mauris ligula semper. consectetur In ipsum orci, metus\n\n207Ipsum volutpat enim nunc faucibus. velit. est condimentum et condimentum velit. Duis Fusce\n\n208Sagittis est in hendrerit adipiscing ante enim hendrerit eget Interdum neque. scelerisque\n\n209Velit. Vivamus bibendum, rutrum elementum\n\n210Ut consectetur molestie iaculis. quis, vitae Vivamus nec fringilla bibendum, elit. nec\n\n211Pharetra sem. sagittis Sed consectetur in nec Vivamus et ac semper quis, sagittis\nLorem\n\n212In orci aliquam quis, felis. vel pretium Fusce ligula\n\n213Tortor pharetra hendrerit est felis. posuere semper dui massa in\n\n214Semper. ante condimentum neque. fames rutrum felis. ac finibus In\n\n215Felis. Vivamus Ut semper. quis, scelerisque ac Duis ante ipsum metus\n\n216Viverra elementum ut Fusce ante finibus bibendum, vitae ante iaculis.\n\n217Ac eget orci, elit. molestie nec bibendum, est sagittis purus libero\n\n218Ac elit. Duis semper. dolor adipiscing quis, primis in fames eget consectetur\nLorem semper\n\n219Finibus scelerisque metus faucibus. posuere nec scelerisque ante\n\n220Sit molestie volutpat sagittis hendrerit finibus fringilla ac ut ut metus\n\n221Finibus elementum\nLorem ante pretium Interdum volutpat adipiscing nec elit.\n\n222Ante malesuada sagittis ligula adipiscing molestie elit. fames massa\n\n223Interdum enim Mauris ligula massa Mauris Mauris Duis Vivamus in consectetur pharetra\n\n224Viverra amet, ac ut ac ipsum lorem dui\n\n225Molestie in Sed et rutrum ac elementum tincidunt. efficitur volutpat\n\n226Eget aliquam bibendum, In massa, dolor posuere ipsum iaculis. volutpat massa Sed\n\n227Felis. neque. orci fames Vivamus consectetur elementum tortor\n\n228Vivamus Ut hendrerit efficitur ac semper nunc Integer orci, velit. orci\n\n229Vivamus libero posuere finibus dolor in primis elit. Mauris nunc eget Vivamus dui semper. adipiscing\n\n230Purus consectetur massa efficitur ut eget molestie semper. Sed semper. dolor\n\n231Ipsum ac est molestie dolor Mauris bibendum, hendrerit orci, lorem nunc orci,\n\n232Ante quis, hendrerit orci ac orci sem. vitae ante posuere Sed vel et\n\n233Nec neque. ut\nLorem nunc lorem ut\n\n234Velit. faucibus. fringilla ante consectetur molestie nunc in Ut ut volutpat vitae finibus lorem vitae\n\n235Ac ipsum In scelerisque volutpat aliquam ante finibus condimentum ut\n\n236Tortor malesuada vel orci in et\n\n237Tincidunt. in nunc et pretium in adipiscing et dolor semper metus amet, Integer Mauris\n\n238Dolor sit pretium ipsum eget scelerisque bibendum, sagittis pharetra sagittis scelerisque\n\n239Ac finibus volutpat Interdum Vivamus dui dolor faucibus. Duis efficitur\n\n240Interdum Interdum Mauris dolor elit. malesuada Ut tortor aliquam efficitur iaculis. semper\n\n241Vel et et Vivamus aliquam purus et est ligula in, semper et lorem nec in\n\n242In nec nec amet, fringilla rutrum ante ante finibus in viverra ac massa,\n\n243Amet, Interdum velit. Vivamus efficitur bibendum, Integer massa amet, vitae finibus in, faucibus.\n\n244Ac ante Sed viverra Duis in ante vel velit. ac ac\n\n245Finibus Interdum semper. quis, Interdum nec fringilla\nLorem orci tortor ac molestie\n\n246Consectetur enim libero consectetur eget et in Vivamus adipiscing posuere\n\n247In et molestie sit sagittis elit.\n\n248Iaculis. condimentum Duis efficitur hendrerit\n\n249Ac elit. pharetra pretium malesuada vitae aliquam consectetur velit. amet,\n\n250Ac quis, enim in, In iaculis. enim ligula neque. dolor Sed ac efficitur ut\n\n251Finibus est hendrerit ac Sed est consectetur In ac fringilla\n\n252In, semper faucibus. in velit. et ipsum primis adipiscing ante ipsum orci,\n\n253Semper in massa, amet, felis. fames sagittis velit.\n\n254Bibendum, sem. viverra\nLorem orci, faucibus. Mauris metus tortor posuere finibus\n\n255Aliquam pharetra molestie Mauris posuere amet, efficitur semper. amet, orci,\n\n256Rutrum et ipsum In amet, consectetur in massa, in elit. in\n\n257Efficitur ligula pharetra est efficitur ac consectetur\n\n258Ac felis. eget ligula condimentum\n\n259Efficitur adipiscing Fusce ac ante ac Ut libero orci, Duis quis, vitae Sed hendrerit\n\n260Ante ipsum ac posuere ut\n\n261Sit posuere massa aliquam eget ante semper. scelerisque elementum ante eget tortor ac\n\n262Primis fringilla molestie ac vitae rutrum fames ipsum bibendum, libero quis, Vivamus libero in bibendum,\n\n263Vivamus orci, purus molestie aliquam Sed libero efficitur felis. Integer\n\n264Efficitur rutrum ac faucibus. nec ac Fusce malesuada\n\n265Semper fringilla Interdum elementum ac\n\n266Fames Interdum nunc ligula ante pretium faucibus. ut ipsum ac consectetur\n\n267Et fringilla ac nec posuere Duis ante posuere faucibus. dui nunc velit. est\n\n268In vel iaculis. ipsum sem. sagittis viverra nec eget quis, ipsum felis. dui iaculis.\n\n269Purus In sem. lorem viverra Integer\n\n270Ut In Fusce Vivamus vitae amet,\nLorem pharetra condimentum massa fames\n\n271Iaculis. iaculis. ut ut neque. ante purus tortor ante molestie dui\n\n272Lorem Sed Mauris et et\n\n273Velit. faucibus. ac viverra ut massa, enim molestie eget viverra pretium ipsum\n\n274In hendrerit vel volutpat rutrum primis enim vel ac dolor Sed\n\n275Massa, ac iaculis. orci dolor efficitur pharetra massa, Ut nec eget Fusce elementum consectetur\n\n276Ipsum sit hendrerit lorem nec semper. ac consectetur dolor sem. viverra tortor ac malesuada purus\n\n277Integer scelerisque viverra\nLorem aliquam neque. efficitur primis\n\n278Rutrum iaculis. consectetur scelerisque faucibus. dolor Duis nec\n\n279Semper. massa efficitur orci scelerisque vel ante\n\n280Iaculis. rutrum lorem libero Duis\n\n281Volutpat in Sed dui nec\n\n282Hendrerit orci semper. iaculis. in faucibus. finibus enim In quis, bibendum,\n\n283Efficitur Interdum nec purus Sed enim efficitur ac\n\n284Dui est efficitur rutrum et ac Duis posuere pretium faucibus. malesuada\n\n285Ipsum volutpat ante elit. fames\n\n286Nunc finibus orci Sed scelerisque ante ipsum lorem posuere ut Sed ac\n\n287Vitae finibus faucibus. vitae consectetur finibus sit\n\n288Ac libero Mauris aliquam adipiscing In in ut nunc scelerisque aliquam sem.\n\n289Quis, viverra sit ipsum semper. orci et ut\nLorem elit. libero in ut ac\n\n290Massa, orci, ligula ac Ut ante eget hendrerit ac\n\n291\nLorem Integer Fusce ante ante ipsum ut lorem et semper fringilla\n\n292Sed viverra Duis velit. in fringilla bibendum, Ut ipsum nec Vivamus\n\n293Sit hendrerit Vivamus eget ligula purus ligula pretium ut eget\n\n294Viverra ante semper. orci posuere libero semper\n\n295Eget ipsum eget libero est pharetra sagittis ac\n\n296Dolor efficitur vel ante ac molestie sem. dui volutpat ipsum fringilla ac ac\n\n297Efficitur vel ipsum tincidunt. fames nunc Interdum ante volutpat ante in scelerisque dui fames elit.\n\n298Scelerisque Ut semper eget pretium et eget malesuada sem. nunc tincidunt.\n\n299Velit. ac libero velit. consectetur Mauris consectetur efficitur quis, massa, Integer ante\n\n300Ut efficitur Integer ac sagittis felis. ac tincidunt.\nLorem vel adipiscing\n\n301Sit eget posuere neque. nunc Sed massa tortor volutpat finibus vitae tincidunt. eget\n\n302Efficitur malesuada felis. neque. consectetur\n\n303Vel vel Integer Vivamus faucibus. pretium viverra elementum in volutpat\n\n304Tincidunt. tincidunt. rutrum vel pharetra hendrerit in hendrerit nec faucibus. ac ipsum efficitur\n\n305Elit. elementum fames ut eget\n\n306Velit. viverra in, elit. Ut massa, aliquam est purus velit. semper. semper. in volutpat sit\n\n307Pharetra ipsum vitae\nLorem dui posuere dolor\n\n308Fusce Interdum ac metus ante massa aliquam\n\n309Ante Ut fringilla fringilla elementum et amet, Duis nunc ipsum vitae fringilla vel viverra\n\n310Viverra iaculis. et et scelerisque velit. est semper est tincidunt. ante\n\n311Duis amet, efficitur in, pharetra Mauris elit. purus aliquam et Interdum\n\n312Ac malesuada massa, fames elit. Interdum posuere nunc Fusce ante sit nunc in, rutrum\n\n313Semper. vel semper posuere finibus pretium Fusce primis efficitur condimentum nunc\n\n314Finibus ante est felis. scelerisque rutrum efficitur tincidunt. vel adipiscing\n\n315Duis Interdum nunc consectetur et elit. eget hendrerit eget dolor in hendrerit ante\n\n316Scelerisque malesuada elementum dolor purus lorem condimentum adipiscing volutpat est tortor finibus Ut\n\n317Orci Fusce ipsum nec dui dui ipsum in eget metus molestie semper.\n\n318Vel viverra Ut enim posuere tortor molestie ante semper rutrum viverra Interdum faucibus. velit.\n\n319Ut elementum scelerisque ante\nLorem sagittis\n\n320Pharetra eget est felis. ac\n\n321Hendrerit ut in enim sem. pretium massa, ante\n\n322Ac semper vel scelerisque eget aliquam volutpat felis. elementum libero semper est\n\n323Efficitur ut iaculis. eget Fusce aliquam et ipsum\nLorem\n\n324Orci, condimentum ut metus ipsum ipsum Duis metus Vivamus hendrerit aliquam adipiscing fames Interdum\n\n325Viverra velit. sem. enim Fusce dolor ac vel neque. scelerisque\n\n326Elit. consectetur orci, ante adipiscing libero orci felis. Fusce massa, in,\n\n327Neque. finibus purus ut Sed purus Duis amet, malesuada in,\n\n328In amet, faucibus. ante pretium Interdum efficitur eget metus Mauris neque. fringilla metus nec\n\n329Quis, aliquam lorem sagittis\nLorem in, elementum ligula libero semper. tortor\n\n330Iaculis. in in, felis. neque. pretium efficitur consectetur vitae\n\n331Vivamus vel elit. Interdum sem. aliquam metus hendrerit rutrum elit. sagittis\n\n332Vitae ipsum consectetur condimentum malesuada viverra ac libero semper. viverra purus consectetur finibus\n\n333Vel nunc ac massa semper rutrum posuere Sed pretium\n\n334Eget in, sagittis ligula consectetur est sem. in massa, Fusce felis. in lorem\n\n335Ipsum neque. elementum orci dui ligula amet, in eget eget et eget sagittis molestie Mauris\n\n336Dui In pretium lorem sem. rutrum sagittis orci, consectetur elit.\n\n337Malesuada ac condimentum nec orci sit posuere\n\n338Libero vitae ut consectetur sem. nec purus dui posuere finibus eget felis.\n\n339In viverra fringilla elit. pretium faucibus. Duis in\n\n340Efficitur est nunc faucibus. tortor\n\n341Elit. semper Integer In in Ut Ut orci, felis. elementum sagittis et vel\n\n342Et finibus volutpat Vivamus hendrerit Vivamus aliquam est consectetur ante dolor vel\n\n343Enim ac lorem in amet, bibendum, in viverra felis. molestie orci, in neque. ac\n\n344\nLorem in primis ac volutpat ac Sed Mauris ac enim ut rutrum sagittis\n\n345Mauris ut pretium semper. semper. libero scelerisque eget\n\n346Posuere pretium semper Mauris aliquam metus ac ac primis finibus rutrum in lorem felis. quis,\n\n347Faucibus. fringilla tincidunt. ut tincidunt. ante massa\n\n348Volutpat neque. orci massa, primis posuere est metus est condimentum elit. scelerisque viverra vel ac\n\n349Ligula semper. elementum ut dolor\n\n350Mauris ut consectetur vel elit. semper\nLorem quis, felis. ac\nLorem dolor faucibus.\n\n351Ante pharetra Interdum dolor elit. iaculis.\n\n352In elit. dolor Vivamus aliquam metus enim\n\n353Enim elementum posuere ante ac et Ut efficitur\n\n354Posuere est ut nunc posuere efficitur velit. in, dui metus Vivamus posuere\n\n355Scelerisque felis. elit. molestie felis. ante eget\n\n356Elit. amet, consectetur scelerisque efficitur orci\n\n357Efficitur scelerisque consectetur orci, sagittis Ut velit.\n\n358Orci sagittis ac Ut orci\nLorem efficitur ac\n\n359Metus sit\nLorem est amet, Sed sem. massa,\n\n360Libero fames primis In pharetra Duis vitae volutpat ac tortor scelerisque Sed Vivamus et finibus\n\n361Rutrum molestie in, enim hendrerit et ipsum fames sagittis rutrum massa, Interdum nec eget metus\n\n362Semper. Integer semper. enim iaculis. efficitur ut\n\n363Amet, eget finibus et elit. neque. in, condimentum\n\n364Hendrerit amet, ligula ipsum fames fringilla ac in dolor ante dolor sit fames eget Ut\n\n365Posuere consectetur dolor orci, ligula\nLorem elementum primis felis. sagittis primis\n\n366Ut orci et ac Sed finibus semper.\n\n367Ante efficitur volutpat vel ut pharetra In elit. condimentum est elementum vitae aliquam et fringilla\n\n368Dolor sagittis Fusce orci, Mauris dui eget pharetra fames condimentum scelerisque ac\n\n369Sit lorem ante ante sagittis massa hendrerit enim felis.\n\n370Tincidunt. tortor ut ut tincidunt. quis,\n\n371Consectetur fames Duis orci bibendum,\n\n372Aliquam pretium hendrerit massa quis, metus faucibus. massa Interdum fames ipsum\nLorem ante\n\n373Tortor Mauris purus Vivamus malesuada ac sit rutrum et\n\n374Ligula neque. ante Vivamus sit faucibus. ipsum in elit. enim sagittis est aliquam\n\n375In, pharetra condimentum orci, eget\n\n376Malesuada nunc tincidunt. ligula et dolor in sagittis tincidunt.\n\n377Elit. in, Duis Ut orci, rutrum\n\n378Neque. fringilla ante Interdum amet, libero semper libero\n\n379Enim bibendum, aliquam tincidunt. efficitur ac\n\n380Viverra fames orci, Vivamus nunc massa, eget vel ante In Ut Mauris\n\n381Enim dolor condimentum est nunc elementum ut Vivamus massa et sit massa,\n\n382Felis. lorem\nLorem iaculis. posuere orci iaculis. ipsum ac hendrerit condimentum ac\n\n383Elementum libero In elit. elementum quis, eget sem. eget libero sagittis hendrerit ante fames primis\n\n384Dolor dolor rutrum in ante velit. tortor ante elit. pretium iaculis.\n\n385Sem. nunc tortor ut elementum\n\n386Enim bibendum, elit. scelerisque velit. dui\n\n387Amet, adipiscing orci, consectetur consectetur consectetur eget\n\n388Tincidunt. semper finibus fames metus ipsum\n\n389Consectetur sit viverra neque. In in ante elementum pretium neque. ipsum ac\n\n390Est in in aliquam condimentum metus ante ante pharetra tortor in fringilla ac Ut\n\n391In In enim Fusce ac In elementum\n\n392Felis. felis. ligula ac efficitur vel semper. ante\n\n393Duis orci elementum viverra in ac In semper. purus tincidunt. primis ante Duis ipsum bibendum,\n\n394Ligula viverra volutpat enim ut volutpat vel elementum efficitur libero\n\n395Ac amet, sem. In condimentum ac metus vel Sed lorem rutrum amet,\n\n396Ut orci sem. in semper amet,\n\n397Iaculis. Integer rutrum in, ac molestie Interdum enim Sed\n\n398Semper. faucibus. consectetur orci, in Ut\n\n399Orci, metus rutrum dui sit bibendum, elit. sem. elit. Interdum ut\n\n400In efficitur est ac In orci elit. ut adipiscing\n\n401Efficitur Fusce Integer vel sit ut tortor amet, libero posuere purus felis.\n\n402In nunc ligula consectetur dolor\n\n403Vel orci ligula Interdum neque. velit. fames massa, velit. ac\nLorem eget\n\n404Efficitur faucibus. ac nunc ipsum sem. neque. libero efficitur fames faucibus. fringilla dui ac lorem\n\n405Semper massa et ut\nLorem metus velit. quis, nec velit. felis. in, in\n\n406Semper. posuere ac efficitur eget\n\n407Tincidunt. finibus tincidunt. sem. ac sem. et elit. efficitur In eget primis\n\n408Fringilla orci finibus condimentum felis. eget elit. Duis\n\n409Consectetur et elementum est finibus Interdum\n\n410Ligula sem. massa est iaculis. velit.\nLorem tincidunt. fringilla Integer semper\n\n411Enim felis. ac vel velit. in viverra semper. aliquam\n\n412Aliquam et hendrerit dui adipiscing Duis faucibus. purus Duis nunc in, In\n\n413Posuere ante ac neque. dui volutpat primis efficitur rutrum Interdum\n\n414Iaculis. Fusce Mauris ac scelerisque elit. Ut lorem Vivamus tincidunt. est ut\n\n415Et neque. Fusce rutrum velit. vitae tincidunt. fames aliquam vitae aliquam nec ante\n\n416Scelerisque rutrum ante orci faucibus. nunc in vitae libero malesuada semper dolor purus fringilla In\n\n417Ac vel ante ac semper. vel\n\n418Volutpat libero\nLorem Sed efficitur est sit et Mauris\n\n419Condimentum efficitur semper ac nec adipiscing malesuada massa, scelerisque et\n\n420In Vivamus Interdum in, ac nec in ante tortor\n\n421Hendrerit elit. eget Integer ac Fusce dui in, vitae fames ante viverra molestie ac\n\n422Sem. purus ante semper. ante rutrum ut finibus ante purus\n\n423Consectetur massa orci velit. ante ante scelerisque amet,\n\n424Vel orci in eget primis vitae rutrum\n\n425Malesuada quis, orci nunc\nLorem massa, ligula posuere\n\n426Semper orci, malesuada Sed orci, Fusce finibus lorem Duis elit. dui vitae ligula ante Duis\n\n427Ligula bibendum, nunc dui Vivamus\n\n428Scelerisque Fusce dui nunc tortor pretium ipsum dolor libero et\n\n429Vel viverra nunc Mauris massa massa semper bibendum, sagittis in scelerisque nunc sem. iaculis. hendrerit\n\n430Et efficitur felis. hendrerit ligula in\n\n431In, in, Mauris elit. viverra in bibendum, hendrerit tortor consectetur metus adipiscing ac\n\n432Hendrerit efficitur orci sit elementum malesuada iaculis. felis. semper quis, in ante et pretium\n\n433Purus elit. ligula consectetur sit elit. ligula purus condimentum in\n\n434Fringilla Vivamus et in Sed ante\n\n435Ac Duis in Fusce in pretium semper ipsum in, elit.\n\n436Sagittis est et faucibus. condimentum rutrum libero sit sit ante\nLorem elementum sit ac\n\n437Nec aliquam efficitur Duis elit.\n\n438Semper massa bibendum, Vivamus tincidunt. amet, finibus malesuada massa,\n\n439Posuere In orci, tincidunt. primis Vivamus posuere elit. lorem Sed\n\n440Et in dui et et velit. vel\n\n441Ante malesuada enim ac sit enim felis. tortor\nLorem volutpat ac in, posuere metus Interdum\n\n442Enim viverra sem. In in molestie fringilla dolor semper. Interdum\n\n443Ac ante dui ipsum ut rutrum\n\n444Eget ac viverra vitae fringilla ac massa, efficitur efficitur ac ligula\n\n445Ut in, adipiscing fames Fusce ipsum eget ut ut molestie purus consectetur elementum\n\n446Ligula consectetur dui iaculis. efficitur et Fusce\n\n447Efficitur Duis Duis Interdum vitae purus amet,\n\n448Nunc neque. Duis volutpat felis. sit in, iaculis. scelerisque sem. ipsum posuere ac\n\n449Sem. et vitae massa consectetur semper. dolor in et scelerisque ipsum fringilla iaculis.\n\n450Semper. adipiscing felis. sagittis nunc in dui hendrerit in in quis,\n\n451Bibendum, sagittis ante ipsum massa,\nLorem semper.\n\n452Ipsum eget ac elementum eget adipiscing libero purus fames\n\n453Mauris in ipsum finibus ut nunc Ut Fusce Fusce dolor bibendum, Fusce volutpat quis, bibendum,\n\n454Semper efficitur efficitur vel scelerisque volutpat felis. tincidunt. sem.\n\n455Efficitur efficitur primis Duis ac scelerisque dui Interdum massa in, ac ante in consectetur hendrerit\n\n456Et est efficitur Ut rutrum Ut neque. aliquam fames molestie orci nec in consectetur\n\n457Quis, ante posuere in orci Fusce dui iaculis. eget tincidunt. quis, primis ac ut\n\n458Massa, in in dui Duis\n\n459Ante velit. ante elit. posuere efficitur tortor Interdum faucibus. lorem consectetur massa, tortor\n\n460Metus ante dolor semper. ac ut ante ac elementum et ac et est Integer\n\n461Et finibus amet, dolor quis, posuere fames sem. semper.\n\n462Bibendum, est ac volutpat efficitur sit\n\n463Consectetur in quis, tincidunt. orci, est orci, felis. iaculis. massa, massa, ac vel\n\n464Primis ante eget ac massa, rutrum\n\n465Pharetra aliquam ac semper posuere ac ante iaculis. fringilla\n\n466Neque. condimentum ac in enim orci, amet, velit.\n\n467Bibendum, nunc semper ligula efficitur ipsum amet, enim\n\n468Ipsum ligula pharetra sem. orci, Fusce est in massa est bibendum, in amet, eget tortor\n\n469Elementum elit. ac tortor iaculis. in elit. nec\n\n470Metus velit. eget massa, viverra\n\n471Faucibus.\nLorem condimentum efficitur velit. et aliquam iaculis. amet, vel\n\n472Sed pretium eget elementum velit. ac ipsum velit. et\n\n473Tincidunt. ante massa, quis, enim elementum et ante\n\n474Consectetur Interdum Vivamus enim in\n\n475Integer aliquam Fusce condimentum malesuada malesuada\n\n476Faucibus. ac libero bibendum, in, nunc Integer Interdum volutpat faucibus. malesuada pretium ante vitae Ut\n\n477Purus et aliquam rutrum Integer ante aliquam Fusce ligula adipiscing rutrum eget\n\n478Malesuada consectetur viverra iaculis. libero Interdum purus aliquam eget in, Interdum ante metus\n\n479Tincidunt. volutpat et elit. ut tortor bibendum, faucibus.\n\n480Fusce in adipiscing ac vel ac Interdum consectetur efficitur tortor ante Duis ipsum\n\n481Efficitur\nLorem amet, elit. neque. ipsum in Fusce\n\n482Ligula posuere lorem velit. consectetur metus consectetur iaculis. ante primis malesuada pretium sagittis eget felis.\n\n483Sagittis Duis felis. efficitur in fames elit. primis dui\n\n484Et volutpat iaculis. pretium nec Mauris In\n\n485Condimentum malesuada tincidunt. Duis sem. Fusce neque. ipsum ut semper. sem. Fusce\n\n486Ante fringilla Interdum ac fringilla\n\n487Ac elementum ut amet, orci, ipsum ac Sed quis, massa\n\n488Amet, elit. dolor ante fames enim metus massa ipsum elit. elit. molestie\n\n489In ut tortor purus orci, iaculis. malesuada\n\n490Efficitur metus aliquam Fusce consectetur faucibus. adipiscing et\n\n491Velit. pretium felis. efficitur sagittis elit. ac felis.\n\n492Sagittis scelerisque massa, sem. elit. efficitur fames In metus ipsum\n\n493In fames aliquam aliquam purus Ut\n\n494Vel quis, orci enim felis. amet, bibendum, massa, Vivamus nunc\n\n495Posuere volutpat fringilla sagittis tortor est dolor aliquam Vivamus ligula Sed primis elementum ut ligula\n\n496Mauris sem. sagittis in elit.\nLorem\n\n497In bibendum, tortor enim faucibus. massa rutrum sit elit.\n\n498Viverra volutpat consectetur velit. ac quis, scelerisque malesuada\n\n499In enim ante in, libero aliquam libero et amet, iaculis. efficitur scelerisque sit fames\n\n500Integer purus adipiscing eget faucibus. pharetra tincidunt. adipiscing tortor libero velit. fringilla libero in, viverra\n\n501Ipsum Duis condimentum libero in in, hendrerit libero elementum scelerisque ac sagittis Sed hendrerit\n\n502Semper. et ac rutrum elit. ac ac sem. et hendrerit dui nec sem. ut metus\n\n503Iaculis. ante in bibendum, Duis elementum quis,\nLorem ante efficitur\n\n504Ipsum tincidunt. finibus Fusce amet, ac viverra ipsum Sed in pretium adipiscing\n\n505Lorem purus consectetur velit. quis, efficitur libero ipsum ipsum volutpat massa ut nec iaculis. neque.\n\n506Et efficitur Duis sem. In\n\n507Interdum ac dolor lorem enim ac massa libero Duis ut efficitur\n\n508Sed neque. faucibus. Sed ipsum massa ante neque. ac Interdum pretium eget elit.\n\n509Ante efficitur bibendum, felis. et et\n\n510Consectetur scelerisque volutpat ante rutrum elit. ante tincidunt.\n\n511Integer volutpat elit. Sed lorem quis, efficitur felis. consectetur vel tortor efficitur In\n\n512Malesuada massa pharetra eget viverra rutrum est elementum orci, tortor est\n\n513Tincidunt. molestie sem. vitae efficitur eget in neque.\n\n514Sem. quis, pretium sem. pretium elit. molestie primis Fusce volutpat\n\n515Interdum elit. scelerisque ac ut Interdum est molestie lorem ac dui vel\n\n516Pretium scelerisque ac scelerisque Mauris viverra in, metus\n\n517Elit. ante faucibus. vel purus\nLorem massa,\nLorem amet, nec pretium\n\n518Adipiscing iaculis. nec iaculis. enim in hendrerit enim ipsum\n\n519Eget\nLorem ante efficitur et fames finibus\nLorem Duis primis aliquam elit. massa,\n\n520Ut In felis. ac fames Sed In malesuada rutrum felis.\n\n521In molestie massa, Vivamus Interdum et\n\n522Vel massa eget in libero malesuada bibendum, Fusce purus\n\n523Mauris sit massa massa metus tincidunt. faucibus. lorem ligula elit.\n\n524In Vivamus eget eget ac fames Sed massa hendrerit volutpat in adipiscing\n\n525Elit. fringilla ac eget nec massa massa, fringilla hendrerit et Vivamus ipsum primis\n\n526Ut semper. posuere Sed malesuada Fusce\n\n527Vivamus sagittis ante adipiscing eget bibendum,\n\n528Iaculis. eget condimentum tincidunt. aliquam neque.\n\n529Semper dui orci,\nLorem ante velit. eget volutpat amet, lorem\nLorem eget\n\n530Elementum felis. semper in elementum Duis Mauris scelerisque faucibus. et\n\n531In enim malesuada ipsum Mauris fringilla\n\n532Et Ut elementum elementum dui finibus tortor\n\n533Fusce nec Ut Duis efficitur ac consectetur faucibus. ipsum primis fringilla\n\n534Ac et tincidunt. massa, massa, purus in, hendrerit elit. felis. massa,\n\n535Vivamus efficitur amet, ipsum Integer In eget in consectetur\n\n536Consectetur orci ante neque. Fusce tincidunt. in orci,\n\n537Pharetra neque. felis. iaculis. fames malesuada fames in nunc in ac ut Interdum\n\n538Semper. bibendum, Fusce et Interdum pretium vel Ut consectetur primis ac purus\n\n539Ut in ut scelerisque malesuada fringilla eget vitae efficitur orci, viverra hendrerit\n\n540Viverra est posuere velit. fringilla massa, libero\n\n541Malesuada in volutpat fringilla Fusce fringilla massa ligula\n\n542Massa consectetur amet, Vivamus purus Mauris Vivamus ac adipiscing ante\n\n543Ante sit nunc aliquam pretium posuere nec Fusce Interdum metus Fusce massa vitae\n\n544Primis bibendum, sem. pharetra viverra efficitur nec et ac sit\nLorem et in et\n\n545Ante nec rutrum semper finibus elit.\n\n546Ante efficitur ante faucibus. aliquam amet, efficitur Mauris ante pharetra nec\n\n547Ut elit. sagittis enim vel efficitur pretium dolor pharetra\n\n548Iaculis. Sed ac est sem. libero molestie ut finibus aliquam sit ac\nLorem ac\n\n549Viverra Duis neque. malesuada semper. efficitur pharetra ipsum dui Ut ac\n\n550Nunc condimentum massa amet, sit velit. enim\n\n551Integer in amet, vitae efficitur eget efficitur scelerisque malesuada in\n\n552Libero eget enim molestie vel in Integer faucibus. orci amet, primis elit. sit orci\n\n553Pharetra ac in, malesuada tincidunt.\n\n554Amet, in, orci lorem et in, et metus ipsum\n\n555Ut ac semper. ac semper bibendum, Integer finibus quis, fames\nLorem\n\n556Ligula pharetra Integer pretium est et in\nLorem tincidunt. massa, tincidunt. est dui ligula iaculis.\n\n557Et dolor massa, elementum elit.\n\n558Ac est malesuada pretium vel adipiscing dui et consectetur\n\n559Ac Vivamus ligula bibendum, efficitur In semper. dui In et amet, ut\n\n560Massa Vivamus molestie vel viverra neque. efficitur felis. ante nunc primis orci quis, ac\n\n561In hendrerit enim semper. Interdum molestie bibendum, consectetur ac\n\n562Bibendum, efficitur ac ante ac nec aliquam efficitur hendrerit pretium Fusce volutpat Interdum elit.\n\n563Felis. quis, velit. primis Mauris in neque. Vivamus pharetra\n\n564Vivamus hendrerit ut molestie est ut Vivamus enim elit.\n\n565Fames lorem Duis aliquam faucibus. ac ac ut ac\n\n566Ac eget volutpat eget faucibus. malesuada\n\n567Primis molestie viverra rutrum et bibendum, ante iaculis.\n\n568Molestie scelerisque et ante orci eget Fusce Vivamus hendrerit\n\n569Sed ligula posuere viverra fames vitae Vivamus massa, consectetur bibendum, aliquam fames\n\n570Lorem ac consectetur vitae ac semper Sed sagittis finibus\n\n571Ac vel in vel massa nec Vivamus purus metus ante iaculis. ac vitae finibus consectetur\n\n572Finibus scelerisque eget elit. purus ante ac elit. Fusce et ut pretium\n\n573Ac molestie in, Sed ante viverra lorem ligula ante hendrerit sem. efficitur ut quis, faucibus.\n\n574Adipiscing iaculis. massa, fringilla felis. massa elit. in ipsum Mauris\n\n575Sed Ut elementum Sed dui et fames consectetur scelerisque in\n\n576Faucibus. massa, elit. ac condimentum Integer hendrerit vitae pharetra\nLorem\n\n577Ut posuere efficitur Mauris viverra ante et libero sem. fames neque. fames\n\n578Efficitur In eget enim pharetra in in orci Mauris sem. ac\n\n579Duis ante ac semper. lorem vitae In sit est ac consectetur nec et semper finibus\n\n580Scelerisque in fames primis ipsum elit. nunc neque. bibendum, vitae consectetur\n\n581Ac velit. eget lorem efficitur ipsum\n\n582Neque. molestie orci, ac ante efficitur eget orci Sed in, elit. malesuada et velit. aliquam\n\n583Integer molestie est aliquam adipiscing sagittis enim finibus libero scelerisque\n\n584Purus Fusce enim libero volutpat massa Vivamus Interdum Sed orci Sed elit.\n\n585Elementum molestie adipiscing ac volutpat\nLorem elit. faucibus. semper. rutrum est faucibus. molestie lorem\n\n586Bibendum, ipsum iaculis. eget Ut ac massa, molestie semper massa faucibus. sem. Interdum orci,\n\n587Ante finibus molestie finibus fringilla ac et eget malesuada semper consectetur dui ante iaculis. tincidunt.\n\n588Sit dolor ac libero purus orci, lorem Integer\n\n589Finibus massa pretium nec nunc tincidunt. ac Vivamus\n\n590Ac nec efficitur ligula velit. orci,\n\n591Sem. massa neque. ante massa felis. Duis bibendum, nec\nLorem neque. dui adipiscing efficitur ac\n\n592In ipsum elit. Sed et scelerisque ipsum sit purus scelerisque\n\n593In nec neque. Duis Sed\n\n594Pretium ipsum consectetur purus ac vel\n\n595Eget molestie faucibus. faucibus. semper. amet, in dui est in lorem elit. ipsum Mauris\n\n596Eget molestie libero in scelerisque malesuada ipsum\n\n597Eget ipsum in tortor In elit. ut rutrum\n\n598Fames rutrum in sem. Integer elementum orci scelerisque lorem\n\n599Molestie sit consectetur elit. eget\n\n600Eget et orci, sem. ante finibus ante ante\n\n601Tincidunt. viverra elit. metus iaculis. vitae\n\n602Efficitur orci, dolor sit enim semper ac consectetur bibendum, bibendum,\n\n603In ut orci, ante metus finibus aliquam rutrum purus fames purus\n\n604Nunc elementum molestie quis, eget rutrum ac eget vel Vivamus velit. in, condimentum elementum In\n\n605Et elit. Mauris Sed in consectetur Vivamus nec\nLorem consectetur Ut sit orci,\nLorem\n\n606Et ipsum elit. Mauris in sit velit. faucibus. consectetur dolor in, ac ipsum\n\n607Molestie massa neque. consectetur In vel iaculis. hendrerit\n\n608Semper. efficitur elit. sit massa, pretium amet, posuere massa massa elit. eget in efficitur\n\n609Fames in scelerisque Interdum Interdum malesuada in, elit.\n\n610Integer libero Mauris ac ante nunc fringilla eget ut\n\n611Ut est consectetur Interdum et enim malesuada et malesuada sit felis. efficitur In vel faucibus.\n\n612Ante adipiscing hendrerit semper lorem fringilla dolor In in ante massa dui\n\n613Et ut ut aliquam in, ut amet, Mauris viverra sagittis viverra elit. faucibus. hendrerit vitae\n\n614Quis, velit. finibus\nLorem dui rutrum vel molestie finibus\n\n615Quis, ut viverra massa, in Sed ante dui elit. ac ac in pharetra in primis\n\n616Finibus posuere et primis dui Interdum Integer Fusce volutpat\n\n617Felis. Sed libero ac posuere scelerisque amet, pharetra massa, hendrerit\n\n618Velit. tortor ut semper ante massa, efficitur Integer ante Fusce et Integer eget Mauris\n\n619Efficitur et orci orci eget ac dolor enim purus libero fringilla ante\n\n620Ac condimentum efficitur quis, ac primis sit tortor primis massa, felis. est consectetur eget iaculis.\n\n621Consectetur pharetra orci et adipiscing elit.\n\n622Dui elementum elementum aliquam ac\n\n623Dolor massa, in, pretium tortor viverra est enim\n\n624Duis pharetra\nLorem semper. ac et est efficitur ac dolor quis, bibendum, ipsum\n\n625Et finibus elit. massa, enim ante nunc ligula Sed elementum sem. adipiscing\n\n626Fames fringilla Interdum Interdum ac ipsum posuere ipsum quis, faucibus. molestie in iaculis. lorem vel\n\n627Lorem ac rutrum ut\nLorem Fusce orci, Sed semper quis,\n\n628Elit. ac tortor fringilla malesuada dolor orci, Mauris fames ac fames neque. molestie sit\n\n629Viverra iaculis. eget ipsum neque. amet, Integer sem.\n\n630Metus eget ipsum in elementum elementum quis,\n\n631Fringilla ac nec ut ante consectetur orci, sagittis In fringilla et\n\n632Ligula ac malesuada elementum orci consectetur condimentum ipsum posuere ligula in,\n\n633Vel ut neque. eget pharetra aliquam\n\n634Interdum dui elementum rutrum eget dui sit sem. eget condimentum Ut elit.\n\n635Fringilla Vivamus fringilla ipsum purus tortor tincidunt. purus fames velit. ut Integer\n\n636Interdum in, fringilla efficitur vitae\n\n637Libero sit enim lorem volutpat elit. posuere malesuada Vivamus sem. ac\n\n638Elit. semper. Ut adipiscing in semper efficitur efficitur ligula velit. Interdum in, Interdum rutrum in\n\n639Ut felis. efficitur ac felis. sagittis orci, condimentum efficitur ac metus orci, eget dolor consectetur\n\n640Pharetra hendrerit posuere volutpat ante ut quis, aliquam Interdum viverra\n\n641Ut enim metus iaculis. velit. quis, adipiscing lorem\n\n642Ipsum Sed ut orci fames ante elit. ante nunc Fusce in adipiscing Vivamus Interdum\n\n643Ante\nLorem lorem sagittis Vivamus consectetur pretium pharetra et Sed velit. ut tortor pretium\n\n644Efficitur in enim lorem massa amet, primis\n\n645Primis ante fringilla aliquam est fames consectetur sagittis ac\n\n646Sem. in Vivamus velit. Interdum ac ipsum orci, dolor posuere ligula et ut\n\n647Ipsum ante ut elit. orci, felis. consectetur elementum malesuada orci, elit. ipsum in ac\n\n648In condimentum felis. Vivamus elit. in ipsum\n\n649Est Mauris sem. metus faucibus. in semper Duis in aliquam\n\n650Enim pharetra condimentum ante in dui ac sagittis\nLorem purus ut condimentum\n\n651Ante ac ante elementum viverra ipsum tortor ac condimentum in\n\n652Felis. Sed metus amet, ac efficitur efficitur elementum ante ac sagittis nec neque. nec\n\n653Ante Duis tortor ac efficitur\n\n654Condimentum\nLorem elit. ac massa, ipsum efficitur vel nunc elit. molestie tincidunt. condimentum condimentum\n\n655Purus amet, elementum in, ut Mauris ut in amet, massa, fringilla viverra scelerisque Sed\n\n656Ante Vivamus eget neque. ut adipiscing iaculis. Fusce pretium dolor\n\n657Nec ut libero Duis purus elit. aliquam velit. scelerisque dolor fames fringilla molestie condimentum\n\n658Vel elementum et fames ac tincidunt. ipsum viverra ipsum aliquam efficitur nunc neque.\n\n659Malesuada sit dui\nLorem ut\n\n660Ut tincidunt. Ut ante et faucibus. primis lorem ac efficitur libero iaculis. neque. dui consectetur\n\n661Fusce pharetra enim massa nunc massa massa,\n\n662Est felis. est massa semper Mauris tortor lorem\n\n663Ut elit. pharetra ante primis\n\n664Ipsum ac faucibus. consectetur In massa, elementum elementum consectetur consectetur Integer\n\n665Eget sem. pretium volutpat finibus Integer vel Mauris ante ligula In et metus\n\n666Ante fringilla Mauris eget scelerisque est malesuada Mauris eget efficitur vel scelerisque dui Integer\n\n667Ante ipsum nec iaculis. Integer\nLorem massa, sem. ac pharetra sem. ante\n\n668Ipsum felis. eget massa amet, quis, iaculis. ut Integer sagittis quis, metus\n\n669Scelerisque massa scelerisque felis. In eget neque. faucibus.\n\n670Nunc in ut adipiscing Mauris ac sagittis felis. fringilla ante\n\n671Metus consectetur ipsum Mauris in pharetra hendrerit\n\n672Fringilla orci Ut sem. ac in amet,\n\n673In, enim volutpat in vitae et pharetra viverra consectetur\n\n674Primis neque. elit. viverra orci ante tincidunt. est\n\n675Duis eget faucibus. eget Mauris nunc vitae ac Interdum primis molestie\n\n676Dui pretium pretium et vitae ac condimentum semper. vitae In ac Interdum ante elit. Fusce\n\n677Et faucibus. orci massa, scelerisque sit ipsum adipiscing ante viverra orci dui sagittis\n\n678In purus finibus libero dui tincidunt.\n\n679Primis consectetur molestie consectetur orci, nec velit. in bibendum,\n\n680Metus ante metus rutrum ipsum dui massa,\n\n681Semper ac ac elit. Fusce dolor iaculis. et quis, condimentum fames est dolor\n\n682Ligula semper eget et felis. Ut\n\n683Efficitur orci primis tortor rutrum iaculis. purus iaculis. consectetur eget\n\n684Dui orci faucibus. efficitur ipsum eget In in ligula volutpat nunc vitae eget scelerisque primis\n\n685Ac Ut ante velit. massa primis libero ante Interdum dolor ut et\n\n686Dolor pharetra ante Ut Sed nec sagittis posuere efficitur consectetur malesuada nec ut ante\n\n687Ac Fusce nec ante pretium scelerisque enim Duis velit. fames sit volutpat\n\n688Ac In est eget efficitur volutpat bibendum, vitae libero ipsum\n\n689Nec et ante amet, sagittis elit. et\n\n690Efficitur molestie eget massa, Vivamus felis. massa, ante efficitur velit. felis.\n\n691Et scelerisque\nLorem ac orci purus semper pharetra rutrum ante velit. libero ut elit. metus\n\n692Efficitur Fusce velit. amet, ut tincidunt.\n\n693Ipsum adipiscing malesuada nec orci, posuere ac\n\n694Eget enim Ut Sed ante posuere ac in, fringilla\n\n695Sem. posuere dui primis sagittis sagittis felis. purus tincidunt. massa, nec efficitur orci Interdum\n\n696Fringilla elementum in adipiscing eget bibendum, fringilla in est pharetra in,\n\n697Orci sagittis Mauris fringilla primis pharetra consectetur semper eget semper quis, massa,\n\n698Duis purus pretium neque. felis. ligula hendrerit aliquam velit. dui Mauris elit.\nLorem\n\n699Ipsum Integer ac elit. libero velit.\n\n700Sem. quis, libero volutpat ac velit. fringilla tortor Interdum ante\n\n701Posuere consectetur elit.\nLorem vel velit.\n\n702Elit. Vivamus massa, In ipsum orci orci, sagittis in libero Interdum aliquam\n\n703Viverra fames volutpat in, adipiscing ut Mauris vitae vel massa lorem dolor massa ante\n\n704Fames adipiscing scelerisque est eget adipiscing orci neque. pharetra quis, ut Vivamus ante\n\n705Purus elit. amet, amet, Ut metus in\n\n706Purus nunc Ut est vitae\n\n707Pretium orci, massa, elit. pretium ante quis, In nunc posuere pretium in, Interdum velit. ante\n\n708In dui ac eget vitae posuere vel ut ac Integer fames\n\n709Eget Ut ante nec ligula\n\n710Mauris felis. consectetur finibus ipsum massa, fringilla\n\n711Orci fames Vivamus ante sagittis felis. in, adipiscing vel molestie amet,\n\n712Est Ut fringilla fringilla vitae In volutpat\n\n713Efficitur volutpat in ipsum sem. eget enim\n\n714In ac ante Sed Interdum enim quis, consectetur libero ac\n\n715Iaculis. ante et massa massa consectetur in, nunc fames\n\n716Rutrum est in\nLorem ut ac adipiscing ut ligula\n\n717Aliquam adipiscing rutrum Mauris est Vivamus finibus ac ac neque. massa, In dolor ac\n\n718Vel hendrerit pharetra ac eget in ac faucibus. velit. eget bibendum,\n\n719Semper primis semper. iaculis. Mauris sit Integer metus semper. hendrerit Integer ac Mauris\n\n720Viverra ac iaculis. semper ut scelerisque tortor volutpat\n\n721Neque. ut malesuada molestie ac Fusce eget rutrum finibus metus in ut ante in, pretium\n\n722Scelerisque viverra ipsum semper in malesuada fringilla sagittis dolor molestie fringilla purus sagittis in\n\n723Pharetra In pretium libero libero elit. malesuada ante massa scelerisque ante dui efficitur in\n\n724Nec ligula ac primis et Integer quis, efficitur amet, libero\n\n725Orci amet, scelerisque ante scelerisque in ligula consectetur tortor\n\n726Volutpat ac consectetur purus aliquam et efficitur Duis\n\n727Lorem sit consectetur aliquam semper primis tortor sagittis elit.\n\n728Tincidunt. vel et semper. primis Fusce Fusce Fusce bibendum, lorem Vivamus volutpat massa\n\n729Dolor hendrerit faucibus. in, posuere condimentum semper. est quis, Fusce vitae\n\n730Pharetra massa, sem. velit. eget primis neque. dui Ut et In fringilla semper scelerisque\n\n731Ligula et dui hendrerit Integer posuere ac orci et\n\n732Massa, orci, ligula adipiscing in, et eget condimentum tincidunt. elementum\n\n733Rutrum Interdum elit. nec Duis velit. massa, ante\n\n734Semper. orci, tortor Sed dolor elit. finibus\n\n735Ut viverra in fames Integer Vivamus Vivamus nec vitae posuere lorem\n\n736Velit. vel ante sem. Interdum semper\n\n737Orci, pretium et Integer ante efficitur elit. malesuada neque. faucibus. elit.\n\n738Vivamus Ut malesuada sagittis in, consectetur orci,\n\n739Fames adipiscing metus velit. fringilla faucibus. ac lorem velit. In felis. ipsum\n\n740Vitae et Sed dolor rutrum\n\n741Condimentum semper. fringilla pharetra viverra libero purus in\n\n742Volutpat ac in tincidunt. enim\n\n743Primis volutpat malesuada orci massa,\n\n744Ut quis, et Vivamus et consectetur faucibus. dui primis elit. eget amet, elit. orci, Ut\n\n745Et enim molestie ante orci, eget bibendum,\n\n746Efficitur tortor neque. sem. et malesuada\n\n747In scelerisque nec iaculis. ante pharetra ante condimentum semper purus nunc finibus in,\n\n748Ipsum Sed sem. viverra enim posuere\n\n749Ut consectetur velit. in, elit. iaculis. eget\n\n750Tincidunt. elit. sit primis Sed posuere Interdum massa sit orci, ac sit dui velit. et\n\n751Est eget sagittis\nLorem eget Vivamus\n\n752Duis molestie ante pretium massa, primis ante amet,\n\n753Ut dolor malesuada efficitur sagittis ac orci vel ut ipsum dolor\n\n754Enim orci eget est et sit scelerisque adipiscing neque.\n\n755Posuere semper viverra pharetra eget efficitur fames\n\n756Integer elementum ipsum massa, felis. ligula volutpat ante scelerisque efficitur semper. aliquam consectetur\n\n757Consectetur vel purus posuere orci, Mauris Integer in, efficitur primis malesuada\nLorem\n\n758Adipiscing velit. efficitur Vivamus in, consectetur\n\n759Rutrum adipiscing bibendum, efficitur fames purus fringilla metus nunc vitae libero\n\n760Ac felis. in est consectetur ac in metus condimentum libero felis.\n\n761Efficitur eget est Mauris semper neque. faucibus.\n\n762Sit vitae ante efficitur et massa vitae sit enim ante in eget ipsum metus ante\n\n763Interdum ac ante tincidunt. massa vitae\n\n764Adipiscing finibus lorem ac sagittis sem. ac In elit. ipsum et et molestie\n\n765Vel velit. Interdum ante viverra elementum tortor libero In pretium In fringilla in primis dui\n\n766Metus fringilla Mauris lorem Fusce massa\n\n767Ac in semper nunc fames ac et Fusce\n\n768Metus primis lorem ipsum elit.\n\n769Molestie Sed ac semper Duis consectetur purus semper amet,\n\n770Enim dolor ante in, finibus consectetur ipsum condimentum ante In\n\n771In in, in finibus sem.\n\n772Condimentum nec primis eget adipiscing ut\n\n773Ac sem. ante ante Vivamus\n\n774Ipsum semper. vitae ipsum Ut orci tincidunt. in Ut vel aliquam ut Vivamus\n\n775Adipiscing fames elit. posuere neque. amet, tincidunt.\n\n776Malesuada pretium purus tortor dui tincidunt. sem. Sed ante\n\n777Felis. vitae purus enim pretium dolor sit tincidunt. metus libero\n\n778Purus posuere Fusce malesuada quis, fringilla eget ut\n\n779Ante adipiscing posuere finibus quis, efficitur consectetur ac ante dolor ipsum tincidunt. Fusce consectetur\n\n780In primis pharetra rutrum purus Duis\n\n781Amet, in, dolor vel ante felis. efficitur ac enim ante neque.\n\n782Mauris in bibendum, ipsum primis est aliquam fringilla in, Sed semper Mauris\n\n783Viverra ac molestie posuere Vivamus nec malesuada pharetra Fusce ipsum finibus elit. ligula Vivamus hendrerit\n\n784Hendrerit pharetra Interdum Interdum ipsum sit dui ac eget in finibus finibus dui eget velit.\n\n785Neque. dolor neque. et tincidunt. molestie dolor consectetur\n\n786Consectetur sem. ac est neque. efficitur quis, fringilla in sem. in ac fringilla elit.\n\n787Ipsum ac Mauris nunc et ante Ut scelerisque nec ante molestie Duis elit. fames In\n\n788Volutpat Interdum aliquam finibus tincidunt.\n\n789Integer ac dui finibus ut Ut efficitur fringilla ac semper. viverra orci ipsum lorem\n\n790Scelerisque massa, purus\nLorem ipsum\n\n791Sed ac massa, metus orci, et Integer\n\n792Fames in volutpat ante et efficitur volutpat\n\n793Ipsum ut ipsum sem. ut in Sed condimentum ante\nLorem Duis\n\n794Consectetur ligula tortor purus orci, molestie efficitur pretium efficitur in\n\n795Neque. ipsum et ac sit ac Ut tortor orci vitae orci, libero massa\n\n796Sem. Mauris in, sit ac orci dui quis, primis et nec tortor molestie volutpat\n\n797\nLorem eget felis. sem. malesuada massa,\n\n798Adipiscing dolor et semper orci fames vitae dolor\n\n799Vivamus scelerisque ipsum elementum quis, ac\n\n800Ante dui consectetur ante eget finibus ante Fusce ac vitae in semper. ipsum\n\n801Adipiscing hendrerit orci, massa lorem sagittis est bibendum, nunc metus ut efficitur elementum\n\n802In ipsum tincidunt. felis. libero\n\n803Tincidunt. condimentum sit posuere in,\n\n804Sed aliquam tortor finibus Mauris ipsum ac metus massa,\n\n805Et sem. ante semper. in, iaculis. Vivamus\n\n806Et ut est tincidunt. ac dolor In neque. Interdum et semper semper est adipiscing ligula\n\n807Est bibendum, sem. felis. velit. tortor finibus ante In faucibus. nunc malesuada rutrum\n\n808Fringilla Vivamus ac primis ac aliquam vel rutrum molestie rutrum eget\n\n809Ligula efficitur elit. ligula sit orci, scelerisque amet, metus sagittis finibus quis, orci ipsum\n\n810Condimentum ut molestie Integer enim bibendum,\n\n811Tincidunt. lorem volutpat molestie nec quis, ipsum Duis elementum lorem ut faucibus. semper\n\n812Velit. ante lorem ante volutpat In Ut primis pharetra rutrum et sem. in\n\n813Primis consectetur sagittis Sed malesuada amet, vitae ipsum neque.\n\n814Ante elementum finibus in et tincidunt. tortor massa, Fusce posuere\nLorem volutpat nec\n\n815Et Interdum libero malesuada faucibus. condimentum fringilla Integer In ipsum eget amet,\n\n816Ipsum Sed et enim dui consectetur ante dui nec\n\n817Faucibus. orci pretium sem. aliquam nunc sagittis pretium dolor dui sit condimentum purus\n\n818Fames enim hendrerit ac elit. vitae ligula sit velit. eget ligula Fusce massa,\n\n819Bibendum, volutpat ante libero nunc orci, fames metus Vivamus\n\n820Ac velit. ac eget massa ac consectetur et tincidunt. fringilla orci,\n\n821Felis. finibus et pharetra elementum Fusce vel\n\n822Tortor condimentum sagittis et pharetra hendrerit elementum Mauris orci dui sit\n\n823Tortor elit. ac rutrum ac primis\n\n824Consectetur primis ac ligula ac vitae In molestie\nLorem tortor\nLorem Mauris fames\n\n825Finibus neque. posuere tortor libero iaculis. libero efficitur ut\n\n826Faucibus. viverra malesuada finibus massa,\n\n827Et Sed aliquam scelerisque molestie ut aliquam felis. Sed elit. posuere eget\n\n828Neque. in finibus quis, orci, tortor libero ante primis Interdum scelerisque eget Mauris vitae orci\n\n829\nLorem tortor Sed vitae ante elit. nunc elementum et est in, Sed metus ut\n\n830Malesuada tincidunt. eget dui velit. consectetur In orci, consectetur volutpat pretium massa\n\n831Iaculis. enim sem. condimentum elementum consectetur eget sagittis in finibus molestie\n\n832Molestie Fusce viverra Ut elit. dolor nec lorem metus ac semper elit. lorem vel Interdum\n\n833Ipsum dui massa, scelerisque dui neque. adipiscing malesuada\n\n834Amet, ac semper eget felis. eget sit Duis ipsum tortor Sed velit. sit finibus quis,\n\n835Ipsum efficitur elementum in, viverra molestie consectetur ante\n\n836Scelerisque tincidunt. scelerisque elit. faucibus. rutrum elit. ante aliquam aliquam velit. nec sem. in primis\n\n837Massa Ut ac hendrerit Ut bibendum, eget\n\n838Ut iaculis. primis Sed consectetur enim fames elementum consectetur\n\n839Pretium amet, semper sagittis\nLorem ligula pretium elementum ante ac ipsum ipsum Duis in malesuada\n\n840Pharetra et neque. ut ipsum faucibus. Interdum elementum tortor ante Interdum rutrum\n\n841Semper. elit. ipsum semper primis\n\n842Elit. In ante semper primis ipsum adipiscing et ac massa velit. hendrerit ac malesuada quis,\n\n843Et hendrerit In velit. in primis orci libero ac Interdum sem.\n\n844Vivamus neque. faucibus. Interdum ante adipiscing fames Sed ipsum efficitur purus aliquam ligula est\n\n845Quis, in, tortor elit. elit. ac est Vivamus sit elementum Vivamus in, massa\n\n846Purus tincidunt. purus ligula eget pretium pharetra est\n\n847Pretium\nLorem et ac in, adipiscing semper. faucibus. ipsum aliquam posuere sit\n\n848Faucibus. Fusce ac viverra\nLorem eget Fusce ante finibus metus ac Mauris dui\n\n849Viverra aliquam massa dolor Interdum malesuada vitae\n\n850Ut sagittis in vitae orci ante faucibus. posuere dolor\nLorem in massa ac\n\n851Aliquam amet, pretium nec metus ac et volutpat elit. efficitur nunc condimentum Interdum libero\n\n852Posuere ligula efficitur malesuada consectetur finibus\n\n853Ut ac ut vel enim finibus et posuere vitae\n\n854Finibus quis, et dolor massa ut Vivamus felis. iaculis.\n\n855Rutrum ipsum nunc viverra ut consectetur felis. Integer ac semper ac hendrerit neque.\n\n856Consectetur malesuada pharetra molestie ut in semper.\nLorem sit massa Vivamus et aliquam ligula dui\n\n857Neque. scelerisque massa, tortor adipiscing eget primis Fusce\n\n858Finibus eget in neque. Integer Integer sit massa, malesuada posuere\n\n859Elit. ac massa, nunc quis, Fusce orci, Interdum ut\n\n860Ut Fusce consectetur purus sem. massa consectetur molestie tortor purus ante\n\n861Dolor semper efficitur ipsum semper. nunc bibendum, lorem\n\n862Viverra velit. in semper nec vitae scelerisque faucibus. adipiscing sem. volutpat\n\n863Ipsum finibus tortor tincidunt. viverra ac Ut\n\n864Tincidunt. Vivamus Integer Vivamus eget vitae in volutpat viverra Sed ut scelerisque elit. Duis ante\n\n865Amet, ac dui pharetra ut malesuada neque. ligula consectetur in\n\n866Lorem lorem rutrum Sed felis. volutpat pharetra lorem posuere felis. tincidunt. in, tincidunt. libero\n\n867Felis. Ut ac pretium pharetra ac scelerisque malesuada consectetur amet,\n\n868Felis. consectetur ipsum Vivamus consectetur sagittis massa ipsum\nLorem est hendrerit semper.\n\n869Et eget ac hendrerit Sed efficitur ipsum molestie Ut\n\n870Dolor ligula ac ante\nLorem fames semper. molestie vel est Fusce aliquam\n\n871Velit. in rutrum molestie fringilla enim efficitur sit nunc\n\n872Hendrerit efficitur viverra vel libero Mauris eget ac\n\n873Nec neque. ante libero rutrum posuere tincidunt. velit. sem. et elit.\n\n874Fames scelerisque purus condimentum aliquam ipsum faucibus. fringilla condimentum libero tortor hendrerit Ut\n\n875Vivamus ut et Mauris ipsum bibendum, libero consectetur In ante\n\n876Est tincidunt. aliquam orci, viverra nec efficitur scelerisque orci, ante\nLorem purus nec nec\n\n877Ante purus adipiscing ante elementum\nLorem in condimentum condimentum pretium ipsum\n\n878Ac scelerisque semper vitae in, bibendum, eget semper. amet, Mauris quis, faucibus. elit.\n\n879Efficitur in eget felis. tortor elementum primis\n\n880Ut Fusce pharetra faucibus. in faucibus. sagittis et semper posuere fames Integer consectetur\n\n881Vivamus consectetur Duis pretium semper. metus in nec Duis hendrerit in dui eget\n\n882Rutrum felis. adipiscing amet, ipsum viverra fringilla finibus Vivamus eget et et bibendum,\nLorem sagittis\n\n883Scelerisque ante primis Interdum condimentum ante condimentum semper In fringilla in finibus felis. et nunc\n\n884Malesuada Vivamus est ligula fames Duis dolor ac\n\n885Malesuada consectetur bibendum, sit Ut Ut\n\n886Integer primis et felis. neque. ante ac ante condimentum\n\n887Elementum efficitur condimentum bibendum, hendrerit in, et in\n\n888Ante finibus Sed elementum ac consectetur Sed lorem scelerisque iaculis.\n\n889Fringilla nunc tortor condimentum eget massa faucibus. sem. bibendum, ac sem. nunc primis\n\n890Sit in, elementum aliquam elit. ac bibendum, velit. volutpat malesuada scelerisque\n\n891Fringilla condimentum faucibus. ante quis, orci, felis. nec Integer eget tincidunt.\n\n892In ligula aliquam Vivamus orci, Vivamus Fusce aliquam faucibus. eget\n\n893Eget et consectetur rutrum condimentum Vivamus tincidunt. Mauris ut rutrum in, felis. semper dolor ipsum\n\n894Sit eget viverra est bibendum, libero bibendum, ac ante in Interdum Fusce sagittis faucibus.\n\n895Mauris Integer primis ante sem. quis, eget ante consectetur ut\n\n896Purus massa, consectetur in vel et\n\n897In vitae efficitur quis, ipsum Interdum ante lorem Vivamus consectetur ante\n\n898Ut vitae et massa et elit. in vel pretium primis enim ipsum in massa orci,\n\n899Efficitur finibus eget efficitur pharetra scelerisque ut dui\n\n900Nec vitae aliquam ligula est consectetur sit sagittis\n\n901Primis ac pretium ac dui vitae vel lorem pharetra\n\n902Sit tincidunt. ipsum lorem quis, lorem neque. aliquam posuere massa, felis. Fusce ac ligula\n\n903Fringilla velit. molestie in massa, eget semper\n\n904Elit. dui molestie ut eget ac efficitur ac orci posuere efficitur tortor\n\n905Ut elit. elit.\nLorem ac rutrum Vivamus ac ante molestie\n\n906In, ut in semper Interdum massa fames amet, velit. quis, quis,\n\n907Posuere sem. elit. eget enim Mauris in semper. Ut\n\n908Nunc lorem ante ante condimentum bibendum, sem. finibus massa, libero\n\n909Sem. orci condimentum Mauris malesuada\n\n910Iaculis. dolor faucibus. purus massa, metus orci Fusce et ac nunc\n\n911Faucibus. felis. lorem malesuada fringilla ante viverra sem. in eget scelerisque ipsum in In ut\n\n912Sit Integer in viverra fringilla\n\n913Fames ac nunc sit volutpat\n\n914\nLorem efficitur ipsum scelerisque nunc in sit\n\n915Orci, et vel volutpat posuere dui elit. In sit metus Vivamus\n\n916Lorem condimentum purus condimentum consectetur ac Mauris Sed\n\n917Bibendum, in Duis sagittis Integer enim scelerisque metus amet, ipsum elit.\n\n918Fringilla consectetur dui tortor quis, hendrerit rutrum dui Fusce aliquam ac massa est\n\n919In sagittis ante ut Fusce Vivamus\n\n920Massa libero nunc sagittis in eget neque. Ut in\nLorem\n\n921Ante hendrerit Ut velit. volutpat amet, est ut ac ut Duis Vivamus\n\n922Semper. in, ante neque. rutrum enim adipiscing sagittis pretium in elementum ut consectetur et Integer\n\n923Condimentum vitae ante Vivamus hendrerit efficitur orci, malesuada bibendum, ipsum vitae\n\n924Malesuada ac Mauris massa consectetur ipsum sagittis pretium\n\n925Semper. sem. ante pharetra dui ligula posuere nunc massa elementum\n\n926Et ut libero orci, Interdum ipsum ac neque. ut\n\n927Massa\nLorem Duis et est Fusce vel volutpat ligula\n\n928Interdum bibendum, ante ac massa, viverra et tortor bibendum, et eget sit viverra efficitur efficitur\n\n929Est Fusce In Duis bibendum, purus\n\n930Est metus ac neque. scelerisque Vivamus\n\n931Neque. eget vitae in tortor vel orci vel\n\n932Quis, malesuada felis. faucibus. felis. eget ac massa est velit. faucibus. nec\n\n933Pretium nec ut vitae finibus ante\n\n934Malesuada ut ipsum eget pharetra nunc Ut condimentum\n\n935Vel elementum purus condimentum vel condimentum in eget efficitur elementum ipsum viverra vitae ac Ut\n\n936Ante enim nec purus eget semper. metus massa, Sed hendrerit elit. pharetra malesuada Vivamus\n\n937Fusce et posuere Integer\nLorem felis. est volutpat fames efficitur Interdum\n\n938In elit. pharetra ante in massa, ante in, pretium ac primis\n\n939Vivamus scelerisque pretium ut primis in quis, fames ac ut malesuada pretium In\n\n940Mauris in Vivamus pharetra et nunc\n\n941Adipiscing in pretium sagittis in in, rutrum\nLorem et ut elit.\n\n942Fames felis. lorem ante orci, vel\n\n943Mauris adipiscing neque. amet, hendrerit pharetra lorem libero Sed est semper. ante primis\n\n944Volutpat sagittis et ac libero nec quis, eget ac purus velit. elementum tortor ac libero\n\n945Et adipiscing ac viverra in\n\n946Ante faucibus. Integer in purus tincidunt. Interdum in\n\n947Pharetra ante ipsum Integer ligula ut fames sagittis consectetur ac amet, adipiscing semper. vel in\n\n948Semper vel ipsum semper sit Interdum eget ac sagittis est nec\n\n949Pharetra rutrum aliquam Fusce ligula ipsum velit. semper. quis, consectetur Mauris\n\n950Ligula et in ipsum rutrum ut sit ut\n\n951Elit. dui massa ac nunc dolor Duis in hendrerit\n\n952Condimentum eget rutrum in molestie sit Interdum efficitur fringilla elit. ac ipsum fringilla\n\n953In, bibendum, elementum et ac primis rutrum ante ac in, pretium ac\n\n954Ut vel neque. posuere ante velit. Mauris In hendrerit\n\n955Aliquam in finibus in malesuada velit.\n\n956Efficitur Integer rutrum eget Duis consectetur finibus\n\n957Nunc condimentum tincidunt. aliquam dui eget lorem efficitur ipsum\n\n958Tortor nunc Vivamus rutrum massa, enim vitae efficitur nec felis. rutrum est massa\n\n959Malesuada massa pharetra posuere ligula iaculis. rutrum orci, elementum pretium rutrum\n\n960Amet, elementum nunc consectetur purus viverra ipsum dolor pharetra ut faucibus. dui in in\n\n961Tortor et et Duis elementum\nLorem\n\n962Scelerisque neque. in, faucibus. in malesuada felis. in primis Ut eget\n\n963Ut dui elit. fames molestie consectetur adipiscing in felis. dui elit. Mauris condimentum massa massa\n\n964Ut libero pharetra ac ut velit. pretium rutrum enim malesuada enim\n\n965Ante eget dolor ut aliquam volutpat nunc nunc ipsum felis. ante ipsum\n\n966Consectetur Duis ac fames ac massa consectetur fringilla scelerisque ante\n\n967Ipsum in, lorem in elit. ut Fusce est\n\n968Duis in et in neque. semper semper. elit.\n\n969Semper. orci, elit. tortor malesuada\n\n970Mauris in aliquam volutpat hendrerit\n\n971Bibendum, ipsum faucibus. ac rutrum ut scelerisque eget ligula vel\n\n972In In sagittis nec ut pretium orci, Mauris et ut ligula vel\n\n973Nec consectetur Sed elementum vitae\n\n974Efficitur pretium iaculis. lorem elementum volutpat massa, libero volutpat faucibus. Integer\n\n975Pharetra scelerisque ac hendrerit sem. semper. pretium dolor iaculis. libero aliquam in\n\n976Malesuada condimentum ut ante fringilla Vivamus nec\n\n977Vivamus sit felis. nec libero in ante in quis, condimentum sem. ipsum vel\n\n978Ac nunc purus molestie nec ac in velit. in eget eget adipiscing primis\n\n979Vitae fames ipsum eget in ac pretium enim enim semper. nunc\n\n980Fames vel vitae Interdum ante tortor\n\n981Et scelerisque consectetur elit. elementum eget ligula faucibus. viverra sit massa, quis, viverra\n\n982Ut fames Interdum in ante metus efficitur\n\n983Felis. In fringilla molestie molestie felis. elit. primis velit. consectetur fames efficitur orci In\n\n984Finibus Interdum tortor velit. quis, efficitur aliquam in, eget sit ligula\n\n985Rutrum ante dolor ante neque.\n\n986Et ipsum amet, Ut sem. nec fames efficitur in eget\n\n987Felis. efficitur ac volutpat pretium ac et ipsum posuere consectetur\n\n988Finibus finibus dui iaculis. libero tincidunt. Sed ipsum orci,\n\n989Tortor hendrerit hendrerit Vivamus massa primis rutrum\n\n990Ac ut Ut semper sagittis orci vitae consectetur semper. orci, semper ante\n\n991Vivamus eget et ipsum\nLorem eget volutpat elementum\n\n992Vel iaculis. semper. condimentum orci semper. purus eget pharetra consectetur fringilla ante\n\n993Iaculis. et fringilla Integer in, Sed massa, efficitur semper. pretium Interdum bibendum, efficitur\n\n994Ante posuere sit metus amet, rutrum in massa,\n\n995Purus vitae ut Mauris Vivamus in metus et ac in efficitur Integer\n\n996Mauris posuere est hendrerit viverra Duis pretium\n\n997Posuere dolor fringilla elit. semper Fusce felis. ac Sed pretium ac libero iaculis. quis, et\n\n998Semper. felis. ut lorem orci consectetur Interdum velit. ut scelerisque Sed massa consectetur enim aliquam\n\n999Ante In pharetra enim amet, est fringilla ipsum condimentum ante in consectetur\n\n1000Lorem libero et felis. finibus fames in est tortor\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | String | — | Unique button id. If not present a random id is generated. |\n| title | String / Node | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| items | Array of Objects | — | Items to display in the dropdown menu. |\n| └value | String / Node | — | The menu item element which will be shown in the dropdown menu. |\n| └onSelect | Function | — | Callback function triggered when an item is selected. |\n| └disabled | Boolean | — | Setting \"disabled\" to true will disable the respective item. |\n| └header | Boolean | — | Will treat the given value as a menu header. |\n| └divider | Boolean | — | Will add a divider line between the items inside the dropdown. |\n| dropup | Boolean | false | Defines whether the dropdown opens above or below. Set it to \"true\" additionally disables the automatic position feature. |\n| pullRight | Boolean | false | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| disabled | Boolean | false | Disables the dropdown button. |\n| bsSize | String | — | Defines how large the button will be rendered. Possible values are: \"xs\", \"sm\" and \"lg\" |\n| bsStyle | String | \"default\" | Defines the button color. Possible values are: \"default\" \"primary\" \"info\" \"warning\" \"danger\" \"success\" |\n| variant | String | — | Defines the variation of the button design. Possible values are: \"link\" \"link-inline\" \"outline\" \"action\" |\n| iconOnly | Boolean | false | Optional prop to defines whether the dropdown title is icon only which applies different padding so the button is a square. |\n| noCaret | Boolean | false | Defines whether the caret is shown or not. |\n| toggleButtonType | \"button\" \\| \"tag\" \\| \"label\" | button | Specify the toggle element type. |\n| splitButton | Boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| open | Boolean | — | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\n| onOpen | (event?: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. Depending on the defined \"toggleButtonType\" it will be either \"React.MouseEvent<HTMLButtonElement\" or \"React.MouseEvent<HTMLDivElement\". |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | Node | — | Allows to pass in custom dropdown menu content. |\n| className | String | — | Additional classes to be set to the wrapper element. |\n| dropdownClassName | String | — | Additional classes to be set on the dropdown. |\n| toggleClassName | String | — | Additional classes to be set on the dropdown-toggle button. |\n| usePortal | Boolean | false | Renders the dropdown into a dedicated react portal |\n| popperConfig | Object | — | Define custom popper.js configuration for dropdown placement and modifiers. |",
358
358
  "category": "Components",
359
359
  "section": "Selection",
360
360
  "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
@@ -854,7 +854,7 @@
854
854
  "title": "SaveableInput",
855
855
  "lead": null,
856
856
  "summary": "SaveableInput",
857
- "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nControlled - Stay open on invalid (default)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n01:38\n\nSaved value:\n\nControlled - With error\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n1:38 PM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | Date \\| Moment \\| String | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | \"stay-open\" \\| \"reset-and-close\" | \"stay-open\" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |\n| buttonStyle | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |\n| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
857
+ "searchText": "SaveableInput\nSaveableInput\nSaveableInput\n\nSaveableInput with value\n\nSaveableInput with previous value\nDolor sit amet\n\nSaveableInput with fixed previous value\nYou shall not pass\n\nSaveableInput with default button style\n\nSaveableInput with unit and icon\nPcs\n\nSaveableInput with feedback\nLab\n\nThis is an error message\n\nDisabled SaveableInput\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nWith error feedback and disabled save button\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | String | — | The actual input value. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| isValid | string | — | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| buttonStyle | string | primary | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| icon | string | — | Icon class name that shall be used. If defined, the input element is wrapped in an input-group and the icon will be set in an input-addon. Example: rioglyph-search. |\n| unit | String \\| ReactNode | — | Adds a given unit to the input. |\n| disabled | boolean | false | Disables the component so the user cannot enter the edit mode. |\n| onValueChanged | (value: string, previousValue: string) | — | Callback function triggered when the value changes. |\n| onInputChange | (keyValue: string, inputValue: string) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEsc | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component dna to handle the previous value on the outside. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nControlled - Stay open on invalid (default)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n04:02\n\nSaved value:\n\nControlled - With error\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2025›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹December 2025›\nSuMoTuWeThFrSa\n\n30123456\n78910111213\n14151617181920\n21222324252627\n28293031123\n45678910\n\n4:02 PM\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | String | — | The input placeholder. |\n| value | Date \\| Moment \\| String | — | The actual input value. |\n| isValid | boolean | true | Used to control the save button from the outside to disable it in case the entered value is not valid. |\n| errorMessage | string \\| ReactNode | — | Uses the built-in error handling. This is the error message that is shown below the input. It will be shown when the \"isValid\" prop is set to false. |\n| hideErrorIcon | boolean | false | Defines wether the error icon is shown or not. If enabled, it will be shown when the \"isValid\" prop is set to false. |\n| onValueChanged | (value: Moment \\| string, previousValue: Moment \\| string \\| Date) =void | — | Callback function triggered when the value changes and is saved. |\n| onInputChange | (value: Moment \\| string, isValid: boolean) =void | — | Callback function that gets triggered on every input change. Use this to control the component or when implementing key validation. |\n| onEnterEdit | VoidFunction | — | Callback function that gets triggered when the input is in edit mode. Use this to control the component and to handle the previous value on the outside. |\n| onExitEdit | (wasSaved: boolean) =void | — | Callback function that gets triggered when edit mode is exited (either saved or cancelled). |\n| onCancel | VoidFunction | — | Callback function that gets triggered when the user aborts the edit mode. Use this to control the component and handle the resetting of previous value on the outside. |\n| invalidExitBehavior | \"stay-open\" \\| \"reset-and-close\" | \"stay-open\" | Behavior when trying to exit edit mode with invalid input: stay-open: Keep edit mode open until valid input is provided reset-and-close: Close edit mode and reset to initial value |\n| buttonStyle | \"default\" \\| \"primary\" | — | Defines the button style: default or primary. |\n| inputProps | Attributes | — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | — | Props passed directly to the date picker component. |\n| disabled | Boolean | false | Disables the component so the user cannot enter the edit mode. |\n| inputClassName | String | — | Additional classes to be set on the input itself. |\n| className | String | — | Additional classes to be set on the wrapper element. |",
858
858
  "category": "Components",
859
859
  "section": "Interaction",
860
860
  "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
@@ -1084,7 +1084,7 @@
1084
1084
  "title": "VirtualList",
1085
1085
  "lead": "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.",
1086
1086
  "summary": "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.",
1087
- "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nEt viverra Sed et quis, adipiscing\n\nItem 2\nAc efficitur dolor molestie In finibus ipsum in in, nec felis. eget\n\nItem 3\nRutrum Mauris molestie finibus faucibus. pretium\n\nItem 4\nLibero massa, Mauris ante efficitur\n\nItem 5\nIn sem. in,\nLorem et\n\nItem 6\nVivamus sem. molestie in, vitae orci, ante ac in consectetur ut\n\nItem 7\nFinibus et faucibus. elit. et tortor\n\nItem 8\nAdipiscing tortor sem. in Mauris metus ligula felis.\n\nItem 9\nVitae in lorem dolor ante elit. efficitur finibus fames felis. et eget fringilla vel volutpat\n\nItem 10\nDuis tortor libero orci aliquam ac semper. elit. elit. finibus primis massa consectetur condimentum Vivamus\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |\nVirtual list with 5000 items\nVehicle 1\nLigula nec felis. in ante volutpat felis. fringilla finibus scelerisque\n\nVehicle 2\nLibero molestie molestie pretium efficitur ac felis. dui elit. Integer fames iaculis. Duis sit\n\nVehicle 3\nViverra Integer dolor molestie orci, primis\n\nVehicle 4\nFaucibus. orci, ante ut et libero primis\n\nVehicle 5\nIn orci In Vivamus libero adipiscing Sed ligula fringilla bibendum, elit. molestie ipsum ante finibus\n\nVehicle 6\nBibendum, adipiscing neque. ac semper in sem. Integer vel\n\nVehicle 7\nEfficitur rutrum lorem velit. ut\n\nVehicle 8\nQuis, eget viverra faucibus. aliquam elit. ante finibus ac fames libero finibus pretium\n\nVehicle 9\nOrci fames Interdum felis. Integer semper. purus efficitur fames sem. ac\n\nVehicle 10\nDolor semper. vitae sit libero sit quis,\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |",
1087
+ "searchText": "VirtualList\nThe VirtualList component is designed for efficiently rendering large lists of items by only displaying the visible portion of the list, also known as windowing.\nVirtualList\nIt allows a specified number of items outside the viewport for smoother scrolling. It optimizes performance by minimizing DOM updates and provides a customizable rendering function for each item, making it ideal for applications that require dynamic and responsive list displays.\nVirtual list with 100 itemsItem 1\nEget ligula consectetur posuere viverra lorem In ipsum malesuada\n\nItem 2\nFringilla elit. efficitur ipsum in elit. massa Duis\n\nItem 3\nOrci felis. iaculis. rutrum semper. ante\n\nItem 4\nEt tincidunt. metus quis, massa, lorem et orci neque. ut elementum efficitur ante massa,\n\nItem 5\nIpsum iaculis. sit primis ut orci\n\nItem 6\nNec in sit posuere malesuada pretium adipiscing sagittis metus efficitur enim eget in\n\nItem 7\n\nLorem libero metus tortor ante In In\n\nItem 8\nVivamus In vitae semper in pretium finibus Sed consectetur in, dolor et dolor lorem in,\n\nItem 9\nEfficitur felis. Duis bibendum, massa,\n\nItem 10\nSagittis ac scelerisque posuere faucibus. vel eget In quis,\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |\nVirtual list with 5000 items\nVehicle 1\nPosuere viverra semper Duis molestie orci\n\nVehicle 2\nPosuere vitae orci, pharetra eget orci, molestie metus ante orci,\n\nVehicle 3\nIn ut metus massa, consectetur iaculis. ligula molestie nunc pretium\n\nVehicle 4\nPurus tincidunt. et primis vitae consectetur Duis est ac primis ligula Vivamus est sagittis Fusce\n\nVehicle 5\nPharetra orci, volutpat aliquam eget massa pretium nec fringilla faucibus. vitae\n\nVehicle 6\nIaculis. efficitur felis. tortor est\n\nVehicle 7\nInterdum ante semper. hendrerit ante faucibus. pretium condimentum ligula hendrerit in in vitae\n\nVehicle 8\nTincidunt. in in orci elementum viverra Fusce in semper ut orci iaculis. Integer quis,\n\nVehicle 9\nVel orci, semper consectetur\nLorem ac pretium pharetra Vivamus\n\nVehicle 10\nTortor sagittis metus elit. ac ante dui efficitur felis. nec malesuada\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| items | T[] | — | The array of items to be rendered in the list. |\n| renderItem | (item: T, index: number) =React.ReactElement | — | A function that renders an item given its data and index. |\n| overscanCount | number | 3 | The number of items to render outside the visible area for smoother scrolling. |\n| defaultHeight | number | 50 | The default height for items if their height cannot be determined. |\n| scrollContainerRef | React.RefObject<HTMLElement| — | Optional ref to an external scroll container. Use this when VirtualList is inside a scrollable container. |\n| containerClassName | string | — | Additional classNames for the container of the list items. |\n| listItemWrapperClassName | string | — | Additional classNames for each individual list item wrapper. This wrapper is required for proper positioning each item in the list using an absolute top value. |\n| className | string | — | Additional classNames for the outer list container. |",
1088
1088
  "category": "Components",
1089
1089
  "section": "Content",
1090
1090
  "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1102,9 +1102,9 @@
1102
1102
  {
1103
1103
  "id": "start/changelog",
1104
1104
  "title": "Changelog",
1105
- "lead": "See the whole Recharts migration guide for more details:https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes",
1106
- "summary": "See the whole Recharts migration guide for more details:https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes",
1107
- "searchText": "Changelog\nSee the whole Recharts migration guide for more details:https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\nChangelog\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n- Icons Renamed icon rioglyph-retweet rioglyph-repeat-square Renamed icon rioglyph-cost-efficency rioglyph-cost-efficiency Renamed icon rioglyph-eye-option rioglyph-eye-open Removed icon as it was a duplicate of rioglyph-component rioglyph-maintenance-components\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n- New icons Added new rioglyph style for disabled icons with a line\n- Icons New icons rioglyph-ai rioglyph-arrows-collapse rioglyph-arrows-combine rioglyph-arrows-expand rioglyph-arrows-horizontal rioglyph-arrows-split rioglyph-assigned rioglyph-axis-x rioglyph-axis-y rioglyph-axis-z rioglyph-bar-chart-box rioglyph-battery-charging rioglyph-brain rioglyph-branch-horizontal rioglyph-branch-remove rioglyph-branch-vertical rioglyph-broadcast rioglyph-bulb rioglyph-chip rioglyph-cloud-progress rioglyph-coffee rioglyph-compass rioglyph-crown rioglyph-discount-badge rioglyph-emergency-stop rioglyph-eye-closed rioglyph-eye-open rioglyph-filter-reset rioglyph-get rioglyph-give rioglyph-globe-alt rioglyph-hierarchy rioglyph-history rioglyph-insert rioglyph-leafs rioglyph-magic-wand rioglyph-note rioglyph-progression rioglyph-satellite-radar rioglyph-stack-add rioglyph-stack-iso rioglyph-stats-high rioglyph-stats-line-dots rioglyph-stats-low rioglyph-stats-medium rioglyph-time-incomplete rioglyph-unassigned rioglyph-unavailable rioglyph-variable rioglyph-workflow-step rioglyph-workflow Updated icons rioglyph-arrow-down rioglyph-arrow-left rioglyph-arrow-right rioglyph-arrow-up rioglyph-battery-level-empty rioglyph-battery-level-full rioglyph-battery-level-low rioglyph-cloud-download rioglyph-cloud-not-saved rioglyph-cloud-upload rioglyph-compare rioglyph-component-custom-recurrent rioglyph-component-custom rioglyph-cost-efficency rioglyph-delivery-completed rioglyph-delivery-error rioglyph-delivery-late rioglyph-delivery-on-track rioglyph-delivery-warning rioglyph-delivery rioglyph-error-sign rioglyph-flash rioglyph-info rioglyph-maintenance-components rioglyph-merge rioglyph-missing rioglyph-off rioglyph-refresh rioglyph-repeat rioglyph-resize-full rioglyph-resize-horizontal rioglyph-resize-small rioglyph-resize-vertical rioglyph-save rioglyph-trash rioglyph-volume rioglyph-workshop rioglyph-wrench Removed icons rioglyph-video-off rioglyph-wifi-off\n\nSee the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n- Update Button Added new \"unstyled\" buttons style\n\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\n\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n- Fixed Action button style Fixed the muted style for action buttons.\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n- Icons New icons rioglyph-circle-dashed rioglyph-square-dashed rioglyph-cube-dashed rioglyph-cube rioglyph-group-blocks rioglyph-dashboard-view rioglyph-ok-dashed rioglyph-prompt rioglyph-recycle rioglyph-warehouse rioglyph-status-change rioglyph-status-change-horizontal rioglyph-transition-right rioglyph-transition-push-right rioglyph-migrate rioglyph-convert rioglyph-shelve rioglyph-conveyor-belt rioglyph-tracking-package rioglyph-issue-tracking Updated icons rioglyph-ok-sign rioglyph-ok-circle\n\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n- Style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph-fuel-liquid rioglyph-fuel-electric rioglyph-fuel-hydrogen rioglyph-fuel-gas rioglyph-fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. NOTE The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph-video rioglyph-video-off\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\n\nIn addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\nNote: The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list.\n\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\n\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\n\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n- Icons Added icons icons rioglyph-train rioglyph-cargo rioglyph-design\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\n\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n- New useTableExport Added new custom hook to easily export table data as CSV.\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\n\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n- Fixed usePostMessage Remove logging of triggered events to the console.\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n- Update ButtonToolbar Extend alignment prop to center buttons.\n- Update Switch Added new \"className\" prop to the Switch.\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n- Icons New icons rioglyph-envelope-open rioglyph-envelope-indicator\n- Migration\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\n\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n- Fixed Checkbox Fixed broken indeterminate state\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\n\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n- Fixed List groups Fixed list group buttons active style.\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-alignnaturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution <span className=\"has-inline-icon\"Lorem ipsum dolor sit amet <span className=\"rioglyph rioglyph-face-smile\"</span</spanLorem ipsum dolor\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n- Style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n- New Chart colors Added new chart colors to the chart color map.\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n- Icons New icons rioglyph-light-bulb Renamed icons rioglyph-filled-chart rioglyph-area-chart Updated icons rioglyph-am rioglyph-angle-double-down rioglyph-angle-double-left rioglyph-angle-double-right rioglyph-angle-double-up rioglyph-area-in rioglyph-area-out rioglyph-beacon rioglyph-bookable-poi rioglyph-bookmark-square rioglyph-brake rioglyph-businessman rioglyph-car-wash rioglyph-carrier rioglyph-component-custom-recurrent rioglyph-component-custom rioglyph-construction rioglyph-delivery-completed rioglyph-delivery-error rioglyph-delivery-late rioglyph-delivery-on-track rioglyph-delivery-warning rioglyph-delivery rioglyph-document-out rioglyph-download rioglyph-driver-card rioglyph-driver rioglyph-drivercard-in rioglyph-drivercard-out rioglyph-erase rioglyph-file-signature rioglyph-fill rioglyph-folder-open rioglyph-home rioglyph-inbox-in rioglyph-inbox-out rioglyph-log-in rioglyph-logout rioglyph-map-location rioglyph-map-marker rioglyph-pencil-square rioglyph-pm rioglyph-retrofit rioglyph-role-management rioglyph-tachograph-download rioglyph-tms rioglyph-trailer rioglyph-user rioglyph-volume rioglyph-warning-sign rioglyph-weight\n- React 18\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n- Guidelines\n- Removed Removed the outdated cross-browser style documentation.\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\n\nAlmost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font.\n\n- Previously, icons acted like text, inheriting line-height and vertical-alignnaturally.\n- Now, as SVG elements, icons better have layout adjustments in inline text scenarios.\n- The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup.\n- All icons can now also be displayed as filled icons by adding rioglyph-filled\n\nhtml\n<span className=\"has-inline-icon\"\nLorem ipsum dolor sit amet <span className=\"rioglyph rioglyph-face-smile\"</span\n</span\n\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\n\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n- Icons Updated icons rioglyph-cost-efficency Added icons rioglyph-newspaper rioglyph-rocket rioglyph-trophy rioglyph-check-badge rioglyph-check-shield rioglyph-sparkles rioglyph-academic-cap rioglyph-onboarding rioglyph-bookmark rioglyph-bookmark-square\n\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\n\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n- Icons Added icons icons rioglyph-oil-can\n\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\n\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n- Update Forms All form inputs have a subtle shadow now.\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n- New Chat Added new pure CSS chat component\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n- New Cursor Added more cursor-style utility classes\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n- Icons Added icons icons rioglyph-bookable-poi rioglyph-car-wash Updated icons rioglyph-truck rioglyph-truck-baseline rioglyph-truck-breakdown rioglyph-truck-unit rioglyph-van rioglyph-van-baseline rioglyph-trailer rioglyph-trailer-baseline rioglyph-trailerposition rioglyph-car rioglyph-car-baseline rioglyph-bus rioglyph-bus-baseline rioglyph-bus-breakdown rioglyph-filling-e-station rioglyph-filling-station rioglyph-euro-note rioglyph-order rioglyph-palette rioglyph-palette-broken rioglyph-parcel rioglyph-parcel-broken rioglyph-empty\n- Design\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\n\nNote: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\n\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n- Fixed Charts Fixed rendering of chart legends for all charts\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n- Icons Added and updated icons rioglyph-air-pay rioglyph-euro-note rioglyph-language rioglyph-calendar-parking rioglyph-engine\n- Guidelines\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\n\n- Fixed TreeOptions Fixed tree options tooltip position\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n- Fixed Fixed DateRangePicker type for backwards compatibility\n- Update Sliders Added new \"color\" prop\n- Update Switch Added new \"color\" prop\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n- Colors\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n- Guidelines\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\n\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\n\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n- Fixed Key Fixed key style for dark mode\n\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n- Update Marker Added new mapMarker \"cursor\" props\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n- New Input resize Added new input resize classes\n- Icons Added new Icon rioglyph-layer-pois\n\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n- Fixed Marker Fixed broken Marker component when using it without an icon\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph-direction rioglyph-parking rioglyph-antenna rioglyph-heart rioglyph-location-arrow\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n- New Added bg-none and hover-bg-none class\n\n- Typescript Migration\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. <script type=\"text/javascript\" src=\"https://js.api.here.com/v3/3.1/mapsjs-harp.js\"</script\n- Removed Fade Removed several deprecated props from the Fade component\n- Removed Removed \"BrowserWarning\" component\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n- Removed Removed getOffsetTopWholeScreen utility function\n- Breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n- Breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n- Breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n- Breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n- Breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = (diff: number) =setBoxWidth(oldWidth =oldWidth - diff)\n- Breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n- Breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange={(selectedOption: SelectOption | undefined) =handleChange(selectedOption?.id)} Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n- Breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ref, {borderBoxSize}] = useResizeObserver(); console.log(borderBoxSize); Update your code like so: const [ref, observerEntry] = useResizeObserver(); console.log(observerEntry?.borderBoxSize); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n- Fixed Spinner Outlined spinner buttons\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n- Fixed Tags Fixed 1px offset of tag icons\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n- Update Forms Added horizontal form demo\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n- Update TimePicker Added prop for rendering warning and error messages\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n- New EditableContent Added new EditableContent component that allows for inline text editing\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n- New HTML Emails New guidelines demo for HTML emails created with react email\n- Icons Icons rioglyph-drag-n-drop rioglyph-robot rioglyph-pin-range rioglyph-pin rioglyph-calendar-plus rioglyph-exclamation rioglyph-info rioglyph-question rioglyph-fuel-diesel rioglyph-fuel-electric rioglyph-fuel-hydrogen rioglyph-fuel-gas rioglyph-archive rioglyph-map rioglyph-map-location rioglyph-book rioglyph-face-frown rioglyph-face-neutral rioglyph-face-smile rioglyph-paper-clip rioglyph-share-nodes rioglyph-handshake rioglyph-stack rioglyph-building rioglyph-file-signature rioglyph-signature rioglyph-location-arrow rioglyph-wallet rioglyph-user-group rioglyph-window rioglyph-inbox rioglyph-inbox-stack rioglyph-inbox-in rioglyph-inbox-out rioglyph-id rioglyph-ruler rioglyph-cards-add rioglyph-truck-unit rioglyph-user-add rioglyph-user-ok rioglyph-user-remove rioglyph-pencil-square rioglyph-megaphone rioglyph-code-brackets rioglyph-code-braces rioglyph-hash rioglyph-server-stack rioglyph-shopping-bag rioglyph-search-list rioglyph-tasks rioglyph-fingerprint rioglyph-flag rioglyph-fire rioglyph-puzzle\n- New Line Height Added new \"line-height-150rel\" class\n- New Page Added new Page component for displaying documents\n- New SaveableInput Added new SaveableInput component\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n- New SmoothScrollbars Added a new SmoothScrollbars component\n- New Text Wrapping Added new \"text-wrap-balance\" class\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n- Loading CSS\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in yourpackage.json. See Automatic loading of UIKIT CSS Files\n- Color Combinations\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n- Writing style guide\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\n\nhtml\n<script type=\"text/javascript\" src=\"https://js.api.here.com/v3/3.1/mapsjs-harp.js\"</script\n\njsx\nconst handleResize = (diff: number) =setBoxWidth(oldWidth =oldWidth - diff)\n\njsx\nonChange={(selectedOption: SelectOption | undefined) =handleChange(selectedOption?.id)}\n\njsx\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\njsx\nconst [ref, {borderBoxSize}] = useResizeObserver();\n\nconsole.log(borderBoxSize);\n\njsx\nconst [ref, observerEntry] = useResizeObserver();\n\nconsole.log(observerEntry?.borderBoxSize);\n\n- Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed.\n- Added new \"xs\" dialog variant\n\n- Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button\n- Enhanced the background color of selected options for the Select and Multiselect component\n\n- Icons Deleted Icons:fax\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n- Fixed Fixed text ellipsis of selects. See Selects\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n- Update MapSettings panels are now closing on click outside. See MapSettings\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n- New Added new CalendarStripe component. See CalendarStripe\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n- Icons Added or updated icons: rioglyph-card-reader rioglyph-card-hotel rioglyph-api rioglyph-currency-euro rioglyph-thumbs-up rioglyph-thumbs-down rioglyph-hand-up rioglyph-hand-down rioglyph-hand-left rioglyph-hand-right See Icons\n\n- Merged hoverTextColor and hoverBgColor props to tabHoverClassName\n- Merged activeTextColor and activeBgColor props to tabActiveClassName\n\n- added arrowClassName prop\n- added tabsWrapperClassName prop\n- added tabClassName prop\n\n- added new className prop to DataTab child component",
1105
+ "lead": null,
1106
+ "summary": "- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.",
1107
+ "searchText": "Changelog\nVersion 2.0.1 (2025-12-15)\n- Fixed DatePicker Fixed DatePicker compatibility in ESM builds by unwrapping the CommonJS default export.\n\n- Fixed Area, Line Fixed chart components type definition for prop \"dataKey\".\nVersion 2.0.0 (2025-12-12)\n- Removed We’ve modernized our build setup by removing CommonJS support and switching entirely to ESM. If your project still depends on CommonJS (for example, with older tooling like Webpack), your build may fail. Please update your development environment to support ESM.\n\n- Removed Removed the root index.js barrel file that re-exported all components. This change eliminates multiple import paths, improves IntelliSense auto-import behavior, and prevents importing the entire UIKIT, ensuring proper tree shaking. Please update your imports to use default imports, for example: import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout'.\n\n- Removed CalendarStripe Removed deprecated prop \"render\". Please use \"renderDay\" instead.\n\n- Removed Collapse Removed deprecated prop \"in\". Please use \"open\" instead.\n\n- Removed ClearableInput Removed deprecated prop \"alwaysShowMask\". Please use \"maskVisibility='always'\" instead.\n\n- Removed Dialog Removed deprecated prop \"onHide\". Please use \"onClose\" instead.\n\n- Removed SingleMapMarker Removed deprecated prop \"size\". Please use \"anchorSize\" instead. Removed deprecated prop \"visibleOnHover\". Please use \"markerOnHover\" instead.\n\n- Removed DataTab Removed the internal \"fade in\" class names from the DataTab component, which were previously kept for backward compatibility with CSS transitions used in older service tests. Please use the new onAnimationStart and onAnimationEnd callbacks instead.\n\n- Renamed Animations Renamed \"framer-motion\" component to \"motion\" as we have migrated to the latest motion library that was formerly known as Framer Motion.\n\n- Removed NotificationsContainer Removed deprecated prop \"stacked\" since it is not supported anymore. Removed legacy usage documentation.\n\n- Breaking Notification Removed deprecated prop \"priority\" since it is not supported anymore. Removed old notification API in favor of the notifications options object. If you still use the legacy API \"Notification.info(message, title, timeOut, callback, priority)\", please migrate to the format \"Notification.info(message, options)\".\n\n- Removed OnboardingTip Removed deprecated prop \"clickflow\". Please use the \"useOnboardingTour\" hook instead.\n\n- Removed NumberInput / NumberControl Removed deprecated prop \"onValueChanged\". Please use \"onChange\" instead.\n\n- Removed Sidebar Removed deprecated prop \"enableNavigationButtons\". Please use \"headerButtons\" instead. Removed deprecated prop \"disableFullscreen\". Please use \"enableFullscreenToggle\" instead. Removed deprecated prop \"fullscreen\". Please use \"openInFullscreen\" instead.\n\n- Removed Removed old class \"invisible\". Please use \"visibility-hidden\" instead.\n\n- Icons Renamed icon rioglyph- retweet rioglyph- repeat-square Renamed icon rioglyph- cost-efficency rioglyph- cost-efficiency Renamed icon rioglyph- eye-option rioglyph- eye-open Removed icon as it was a duplicate of rioglyph- component rioglyph- maintenance-components\n\n- Breaking BarChart, RadialBarChart, PieChart, Legend With this release, the internal Recharts dependency has been migrated to version 3.x. This upgrade introduces a breaking change related to the Legend component: the payload prop, which was previously used internally to inject custom legend data, has been removed from Recharts. As a result, the legend behavior in BarChart and RadialBarChart has been updated. The default legend position is now correctly rendered vertically in the top-right corner. Previously, it appeared at the bottom despite the default settings. Please review your charts to ensure the legend position remains as intended. If you use colors defined inside your data objects for BarCharts, you must now provide both the items (your data array) and a custom content render function to the Legend. This replaces the old payload-based legend behavior. Series-based legends using a formatter continue to work as before. Recharts 2.x also used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed. For more details, see the Recharts activeIndex guide https://recharts.github.io/en-US/guide/activeIndex/ If your PieChart uses an activeShape render callback, you should now use the ChartTooltip component and set its defaultIndex to replace the previous activeIndex behavior. See the whole Recharts migration guide for more details: https://github.com/recharts/recharts/wiki/3.0-migration-guide#breaking-code-changes\n\n- Fixed FilePicker Fixed the type of the \"files\" parameter from FileList to File[] of the \"onPick\" callback.\n\n- Fixed Rioglyph Fixed Rioglyph icon typing to expose a concrete IconType union of all icon names, improving autocomplete and safety for consumers.\n\n- Update AssetTree Added new asset type \"car\" to AssetType type definition and to built-in type counter of the AssetSummary for the Tree component.\n\n- Update VolkswagenApplicationHeader Updated VolkswagenApplicationHeader with new VW Group logo. This single group logo also replaces the logo for \"VW Aktiengesellschaft\" and \"Group Logistics\" resulting in an overall smaller header height.\n\n- Update Migrated entire codebase from lodash to es-toolkit to leverage modern JavaScript.\n\n- New AnimatedTextReveal Added new AnimatedTextReveal component emphasize text through motion for showing incremental updates or loading states.\n\n- New useAutoAnimate Added a lightweight hook to animate add/remove/reorder operations of children with zero configuration.\n\n- New fit-content Added new \"min-width-fit-content\" utility classes. See detailed explanation and comparison to other content-based min-width classes.\n\n- New text-box Added new \"text-box\" utility classes to trimming off extra spacing from the block-start edge and block-end edge of a text element's block container.\n\n- New icons Added new rioglyph style for disabled icons with a line\n\n- Icons New icons rioglyph- ai rioglyph- arrows-collapse rioglyph- arrows-combine rioglyph- arrows-expand rioglyph- arrows-horizontal rioglyph- arrows-split rioglyph- assigned rioglyph- axis-x rioglyph- axis-y rioglyph- axis-z rioglyph- bar-chart-box rioglyph- battery-charging rioglyph- brain rioglyph- branch-horizontal rioglyph- branch-remove rioglyph- branch-vertical rioglyph- broadcast rioglyph- bulb rioglyph- chip rioglyph- cloud-progress rioglyph- coffee rioglyph- compass rioglyph- crown rioglyph- discount-badge rioglyph- emergency-stop rioglyph- eye-closed rioglyph- eye-open rioglyph- filter-reset rioglyph- get rioglyph- give rioglyph- globe-alt rioglyph- hierarchy rioglyph- history rioglyph- insert rioglyph- leafs rioglyph- magic-wand rioglyph- note rioglyph- progression rioglyph- satellite-radar rioglyph- stack-add rioglyph- stack-iso rioglyph- stats-high rioglyph- stats-line-dots rioglyph- stats-low rioglyph- stats-medium rioglyph- time-incomplete rioglyph- unassigned rioglyph- unavailable rioglyph- variable rioglyph- workflow-step rioglyph- workflow Updated icons rioglyph- arrow-down rioglyph- arrow-left rioglyph- arrow-right rioglyph- arrow-up rioglyph- battery-level-empty rioglyph- battery-level-full rioglyph- battery-level-low rioglyph- cloud-download rioglyph- cloud-not-saved rioglyph- cloud-upload rioglyph- compare rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- cost-efficency rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- error-sign rioglyph- flash rioglyph- info rioglyph- maintenance-components rioglyph- merge rioglyph- missing rioglyph- off rioglyph- refresh rioglyph- repeat rioglyph- resize-full rioglyph- resize-horizontal rioglyph- resize-small rioglyph- resize-vertical rioglyph- save rioglyph- trash rioglyph- volume rioglyph- workshop rioglyph- wrench Removed icons rioglyph- video-off rioglyph- wifi-off\nVersion 1.13.2 (2025-11-19)\n- Fixed Obfuscate data Fixed a bug that triggered an infinite loop when data-pii was applied to a nested child element.\n\n- Update Button Added new \"unstyled\" buttons style\nVersion 1.13.1 (2025-10-20)\n- Fixed Fixed bundling npm package. Resolve nested folder structure in npm package build.\nVersion 1.13.0 (2025-10-20)\n- Fixed fuel type utils Fixed missing root export for fuel type utils.\n\n- Fixed Action button style Fixed the muted style for action buttons.\n\n- Fixed MapMarker Fixed the active styling for the map marker active state to visually balance the state icon.\n\n- Update Rioglyph Added the missing feature to use external SVGs as a rioglyph icon.\n\n- Update FilePicker Added new \"fullHeight\" flag to set the dropzone wrapper element to 100% height. This comes in handy, when the dropzone should have 100 % height so it can grow.\n\n- New max-content Added new \"min-width-max-content\" and \"min-width-min-content\" utility classes. The first prevents content from breaking by expanding to fit its full width, while the second allows content to shrink to the smallest width possible without overflowing.\n\n- New Grid Added new \"grid-template-end--1\" utility class. This class allows grid items to span until the last grid line, effectively positioning them to extend to the end of the grid.\n\n- New Obfuscate data Added new \"data-hide-pii\" attribute to the <htmlelement to obfuscate sensitive data directly in the frontend. Obfuscate names, emails, or phone numbers — without needing backend filtering or extra code changes.\n\n- Icons New icons rioglyph- circle-dashed rioglyph- square-dashed rioglyph- cube-dashed rioglyph- cube rioglyph- group-blocks rioglyph- dashboard-view rioglyph- ok-dashed rioglyph- prompt rioglyph- recycle rioglyph- warehouse rioglyph- status-change rioglyph- status-change-horizontal rioglyph- transition-right rioglyph- transition-push-right rioglyph- migrate rioglyph- convert rioglyph- shelve rioglyph- conveyor-belt rioglyph- tracking-package rioglyph- issue-tracking Updated icons rioglyph- ok-sign rioglyph- ok-circle\nVersion 1.12.0 (2025-09-22)\n- Fixed Select Fixed an issue in the Select component where clearing the filter input after a no-results search caused the option list to remain incomplete. The dropdown now correctly restores the full option set when the filter is cleared.\n\n- Fixed AssetTree Fixed an issue where clicking the checkbox on a tree group would also toggle its expanded state. Now, selecting a tree group via its checkbox only triggers selection and no longer expands or collapses the group. This prevents unintended virtualization behavior where expanding a node could cause the tree to switch into virtualized mode, resulting in the loss of tree group selections.\n\n- Fixed Callout Removed overflow hidden from callouts so dropdowns can be shown correctly.\n\n- Fixed Ellipsis Fixed \"ellipsis-1\" class.\n\n- New Rioglyph, fuel type utils Added a new component for rendering Rioglyph icons as a span element. The component also supports paired icons, allowing two glyphs to be displayed together as a combined symbol. In addition, a \"getFuelIcon\" helper function was introduced that maps fuel types to their corresponding icons, ensuring consistent and correct icon usage across the application.\n\n- Update FormLabel Added missing \"Node\" type info for supportingText the props table and changed the handling of supportingText styling so that the text-italic class is only applied when the supportingText is a string. If you provide a string wrapped in a div or span, you have to set the italic class manually.\n\n- Update Tree Added a new \"pairIcon\" prop to TreeItem allowing pair icons to be individually specified in the Tree component.\n\n- Update ClearableInput Added new input mask related props \"maskOverwrite\", \"maskDefinitions\", and \"maskDispatch\" to support dynamic masking for more complicated use cases and to give more control over the masking.\n\n- Update useOnboardingTour Updated the typings and documentation for the useOnboardingTour hook.\n\n- style Pills Updated the hover style for the application header navigation as well as for the nav pills.\n\n- Icons As RIO will support more fuel types in the future, and because of inconsistencies in existing naming conventions, we introduced a new icon: \"rioglyph-fuel-liquid\". This icon replaces \"rioglyph-fuel-diesel\" to better represent a broader range of liquid fuels. With this change, there are now four dedicated fuel icons available, plus one for a mixed fuel type. rioglyph- fuel-liquid rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- fuel-mix With this approach, frontends can use the same icon for diesel or gasoline and also for CNG and natural gas by simply using the new \"getFuelIcon\" function form the Rioglyph component. The old “rioglyph-fuel-diesel” icon will continue to work, but it will no longer be listed in the UIKIT demo page icon list. Additional new icons: rioglyph- video rioglyph- video-off\n\n- Demo Service-specific settings Updated the ApplicationHeader demo to include an example of service-specific settings, establishing a consistent approach for presenting unique configurations that cannot be included in the global user profile settings. It helps ensure a familiar user experience across different services while keeping global settings clean and focused.\nVersion 1.11.0 (2025-08-11)\n- Fixed Map settings Updated implementation for map satellite view to support zoom limits by using a hybrid map layer approach.\n\n- Fixed SteppedProgressBar Fixed styling issue in circular variant of the SteppedProgressBar when an item is active.\n\n- Fixed SplitDialog Fixed left side width for larger dialogs. Added new prop to hide the split divider.\n\n- Fixed FormLabel Fixed usage of HTML tag label only when part \"htmlFor\" is set and has a value.\n\n- Update Tree Added a new \"expandedIcon\" prop to the TreeGroups to support showing a different icon when the group is expanded.\n\n- Update Sticky table columns Renamed \"table-sticky-cell-first\" and \"table-sticky-cell-last\" to \"table-sticky-column-first\" and \"table-sticky-column-last\" for improved clarity. Updated the styles to respect the table header and prevent content from peeking through when horizontally scrolled.\n\n- New useAverage, useCount, useMin, useMax, useSum Added useAverage, useCount, useMin, and useMax, and useSum hooks for locale-aware numeric aggregation of object lists. Supports specifying a dot-separated path to the target property.\n\n- New Table grid lines Added new table class \"table-grid-lines\" that is useful when building data heavy tables.\n\n- New Table row span and Table double row header Added new table examples showcasing row span and double header layouts to demonstrate table design capabilities for data heavy tables.\n\n- New Progress bars indeterminate style Added new indeterminate style to show a progress bar even when you not know how long it will take.\n\n- Demo Templates Added new template sections and several UI block examples. Updated the template menu structure to improve navigation and discoverability.\n\n- Demo Email generator We’ve built a neat little email editor that helps you compose emails and copy the HTML code.\n\n- Demo Route generator There is a new route generator with a JSON export of the LAT/LNG coordinates.\nVersion 1.10.1 (2025-01-08)\n- Fixed Map settings Changed implementation for map satellite view as the old implementation relied on deprecated Here APIs.\nVersion 1.10.0 (2025-07-28)\n- Fixed Fixed an issue where clicking the \"Scroll to Top\" arrow button would block further scrolling down the page. The scroll behavior is now fully restored after returning to the top, ensuring smooth navigation throughout.\n\n- Fixed DatePicker Fixed styling issue in DatePicker inputs with error feedback where input text was unnecessarily cut off due to padding for the clear icon, even when no clear button was rendered.\n\n- Fixed ApplicationHeader Fixed an issue where the application header rendered in mobile style on initial page load when the container width could not be determined in time. This resolves visual jumping between mobile and desktop header layouts during mount.\n\n- Fixed SavableInput / SavableDateInput Moved error handling into the components to simplify feedback styling. Added two new props, \"errorMessage\" and \"hideErrorIcon\", to control the visual appearance of error feedback.\n\n- Fixed Panels, Pills, Badges Fixed various element styles for brand themes.\n\n- Update Tree Added a new \"icon\" prop to TreeItem allowing icons to be individually specified or explicitly omitted in the Tree component. Also updated the TreeGroups to support icon values with or without the rioglyph- prefix for improved flexibility.\n\n- New CSS Container queries Introduced new utility classes to make use of container queries, enabling responsive spacing and layout adjustments based on container width rather than viewport size. For more details, please check out our responsiveness guidelines.\n\n- New Rounded table Added new utility classes \"table-bottom-rounded\" and \"table-rounded\" for use when placing a table inside a container with border radius. These utilities help visually align the table with the container’s rounded corners.\n\n- Icons Added icons icons rioglyph- train rioglyph- cargo rioglyph- design\n\n- Style We migrated our codebase from Less to Sass to modernize our tooling and take advantage of the latest CSS capabilities, as Less is no longer actively maintained.\n\n- Demo Renamed the main navigation items to improve clarity and consistency. “Design” is now called Foundations, and “UI Templates” has been simplified to Templates to better reflect their purpose.\n\n- Demo Added new sections and examples to UI templates that serve as a quick starting point for developing your own layouts and interfaces. See Expandable details, Details views, and Progress cards. Moved the panel example from the foundations tab to Panel variants.\nVersion 1.9.0 (2025-06-30)\n- Fixed Tooltip / SimpleTooltip Fixed delaying tooltips using a single delay number. Tooltip delay now only applies to showing, not hiding. To configure both show and hide delays, use the object format instead of a single delay number.\n\n- Fixed ClearableInput Properly pass external ref to underlying masked input component using its inputRef prop.\n\n- Fixed DatePicker Fixed an issue where the DatePicker would render incorrectly when used as a child inside a table cell.\n\n- Update TableHead, TableCol Extended table components to pass additional props to the underlying tag.\n\n- Update useTableSelection Extended useTableSelection hook to allow setting the selected rows and change the active row from the outside using the \"setSelectedRowIds\" and \"setActiveRowId\" setter functions.\n\n- Update Select, Multiselect We’ve reverted the max-width of the Select, and Multiselect dropdown to 100% to stay consistent with other components and to prevent unnecessary line breaks within dropdown items. If the dropdown appears too wide, you can use the dropdownClassName prop to apply a shorter max-width-x utility class as needed.\n\n- Update AssetTree Extend the Tree component to virtualize tree items when a certain threshold is reached. The number of items rendered beyond the visible area can be controlled using the \"overscan\" prop. This change improves performance for large trees and long lists.\n\n- Update Map Extend the Map component to allow specifying minimum and maximum zoom levels. By default, the minimum zoom level is set to 3, defining the furthest zoomed-out view. The maximum zoom level, representing the closest zoomed-in view, is set to 20. Improved zoom behavior to reduce momentum and allow for more controlled zooming.\n\n- Update FormLabel Extend the FormLabel component to allow passing in a React element as supporting text, making it easier to add question mark icons with tooltips.\n\n- New SavableDateInput Added new dedicated savable input component that wraps the DatePicker.\n\n- New BarList Added BarList component to display customizable, animated horizontal bars for comparative data.\n\n- New useTableExport Added new custom hook to easily export table data as CSV.\n\n- New useIsFocusWithin Added new custom hook to easily detect if the focus is inside a defined document node.\n\n- Docu Pagination Added usage documentation for pagination and explained why the load more button is preferred for tables.\n\n- Demo UI Templates Added new sections showcasing various UI templates and blocks that serve as a quick starting points for developing your own layouts and interfaces.\nVersion 1.8.0 (2025-05-19)\n- Fixed Map Fixed issue with satellite view layer not rendering correctly when Norwegian language is selected.\n\n- Fixed usePostMessage Remove logging of triggered events to the console.\n\n- Fixed Height classes Corrected height calculation when using \"\"...-height-100vh\" classes inside module-content; vertical padding was not properly subtracted.\n\n- Update URL feature toggles Made the feature toggle value types more precise. Added new feature toggle definition functions that allow you to specify a default value.\n\n- Update AssetTree Extended the Tree component with an onTypeFilterChange callback, allowing the service to filter selected assets accordingly.\n\n- Update Multiselect Added a maximum width of 200px for the Multiselect dropdown component. Additionally, there are two new props \"dropdownClassName\" and \"btnClassName\" to allow further customization similar to the Select component.\n\n- Update ButtonToolbar Extend alignment prop to center buttons.\n\n- Update Switch Added new \"className\" prop to the Switch.\n\n- Update ButtonDropdown Added new prop \"toggleButtonType\" to ButtonDropdown component to allow using a button, a tag or a label as toggle element.\n\n- Update ClearableInput Added a new prop \"maskVisibility\" to control when the mask pattern is visible. Deprecated the prop \"alwaysShowMask\". in favor of maskVisibility.\n\n- Update useOnboardingTour Expose internal onDestroyed callback. Add \"disableActiveInteraction\" prop to disable interaction of highlighted elements.\n\n- Update useSorting Added new callback function \"setSortDirection\" allowing to set sort direction when used with table card sorting.\n\n- New useLocationSuggestions Added new custom hook to fetch locations from Here API that can be used for search inputs.\n\n- New useSearch Added new custom hook to filter a list of objects by a search value.\n\n- New useTableSelection Added new custom hook to handle both single and multiple row selection in tables, optimized for large datasets.\n\n- New TableHead, TableCol Added new table components \"TableHead\" and \"TableCol\" to simplify table structures especially when used with custom hooks like \"useTableSelect\" and \"useSorting\".\n\n- New SvgImage Added new component that helps rendering SVG images hosted on RIO's CDN and lets you customize the colors for various brand themes.\n\n- Icons New icons rioglyph- envelope-open rioglyph- envelope-indicator\n\n- Replaced Replaced react-input-mask with react-imask in TimePicker and ClearableInput components. The mask prop format has changed and is no longer fully compatible with the old react-input-mask syntax. The main difference is the number placeholder, which has changed from \"9\" to \"0\". Please update the mask prop accordingly when using the ClearableInput with an input mask.\nVersion 1.7.1 (2025-02-14)\n- Fixed Banner Fixed height animation of the Banner component when expanding. Added prop \"initialAnimation\" to disable initial content animation.\n\n- Fixed FormLabel Check for various input group sizes to render respective label text sizes.\n\n- Fixed SplitDialog / ListMenu Fixed the issue where a ListMenu dropdown was rendering all menu items on mobile upon mount. Now, only the dropdown is rendered initially.\n\n- Fixed RIOglyph Removed default aspect ration of 1/1 because of problems in flex/grid layouts.\n\n- Fixed Checkbox Fixed broken indeterminate state\n\n- Update RIOglyph Added new rioglyph-align-top, rioglyph-align-bottom and rioglyph-align-baseline classes for proper alignment width texts. Replaced previously introduced has-inline-icon with new rioglyph-align classes.\nVersion 1.7.0 (2025-02-10)\n- Fixed Collapse Fixed visible content overflow in the Collapse and Expander components during content animations.\n\n- Fixed ApplicationLayout Fixed the issue with passing a ref to the ApplicationLayout by exposing the underlying wrapper element. When merging the external ref with the internal ref, the wrapper is now properly exposed, eliminating the need for accessing ref.current.current in the invoking component.\n\n- Fixed ButtonDropdown / useClickOutside Fixed performance of rendering many dropdowns in a large table by introducing an \"isActive\" flag to the useClickOutside hook so that events are only registered and listening when the dropdown is actually open.\n\n- Fixed Route Fixed rendering of dashed routes via the \"lineDash\" prop.\n\n- Fixed List groups Fixed list group buttons active style.\n\n- Icons RIOGlyph We've transitioned the RIOGlyph icon font to an SVG-based system and allowing support for custom SVGs. Please read our guidelines Almost all RIOGlyph implementations will work out of the box. However, in certain cases, adjustments are required because RIOGlyph icons no longer behave as a font. What has changed? Previously, icons acted like text, inheriting line-height and vertical-align naturally. Now, as SVG elements, icons better have layout adjustments in inline text scenarios. The HTML structure for MapMarkers has been changed to accommodate the new icons. Please update the DOM selectors in your tests accordingly if they rely on the markup. All icons can now also be displayed as filled icons by adding rioglyph-filled Recommended solution < span className = \" has-inline-icon \" Lorem ipsum dolor sit amet < span className = \" rioglyph rioglyph-face-smile \" </ span </ span Lorem ipsum dolor\n\n- Update Dialog Changed dialog footer to use flex layout to ensure proper button positioning. No more need to add \"pull-right\" or custom flex classes.\n\n- Update Dialog animation Add support for the browser's \"prefers-reduced-motion\" flag. When this flag is enabled, dialog animations are disabled. This can be helpful for customers experiencing performance issues while running the application.\n\n- Update ListMenu Added new props to ListMenuItem to allow adding a badge for the list menu group header.\n\n- Update AppNavigationBar Added new props to AppNavigationBar to support a back button title, a subtitle, and a title size. The title is now always centered.\n\n- Update Notifications Replaced the underlying notification library with \"react-toastify\", introducing new options while maintaining the same API for backward compatibility. This update also includes a refreshed notification style.\n\n- Update Charts Updated internal Recharts library to latest version 2.15.0 to remove some warnings.\n\n- style Labels Updated the design of standard labels for a more modern look and added documentation on when to use them.\n\n- New Button Added new \"muted-filled\" button for occasions where the default button is to prominent and the muted button is to subtle.\n\n- New StepButton Added new \"StepButton\" component for convenience and to ensure consistent styling of this type of button.\n\n- New ButtonToolbar Added new \"ButtonToolbar\" component for convenience and to ensure consistent spacing of buttons.\n\n- New FormLabel Added new \"FormLabel\" component for convenience to be used on form elements that utilizes a \"htmlFor\" prop and a label or other form elements.\n\n- New LabeledElement Added a simple wrapper component that associates a label with any content, ensuring a unified label style. It simplifies the usage of labels for both form and non-form elements\n\n- New Card Added new \"Card\" component for convenience to apply default styling for a card like element. This component aims to simplify and align common card styling.\n\n- New Avatar Added new \"Avatar\" component for showing the user name initials, a user image, or a user icon.\n\n- New Banner Added new \"Banner\" component for rendering informational content on a page.\n\n- New AccentBar Added new \"AccentBar\" component for visual cues.\n\n- New VirtualList Added new \"VirtualList\" component for rendering large lists using a windowing approach.\n\n- New useToggle Added new \"useToggle\" component to simplify boolean state handling. Use it to handle toggle-based logic like switches, modals, or content visibility.\n\n- New Chart colors Added new chart colors to the chart color map.\n\n- Demo Draggable map marker Added new map demo to showcase draggable map marker.\n\n- Icons New icons rioglyph- light-bulb Renamed icons rioglyph- filled-chart rioglyph- area-chart Updated icons rioglyph- am rioglyph- angle-double-down rioglyph- angle-double-left rioglyph- angle-double-right rioglyph- angle-double-up rioglyph- area-in rioglyph- area-out rioglyph- beacon rioglyph- bookable-poi rioglyph- bookmark-square rioglyph- brake rioglyph- businessman rioglyph- car-wash rioglyph- carrier rioglyph- component-custom-recurrent rioglyph- component-custom rioglyph- construction rioglyph- delivery-completed rioglyph- delivery-error rioglyph- delivery-late rioglyph- delivery-on-track rioglyph- delivery-warning rioglyph- delivery rioglyph- document-out rioglyph- download rioglyph- driver-card rioglyph- driver rioglyph- drivercard-in rioglyph- drivercard-out rioglyph- erase rioglyph- file-signature rioglyph- fill rioglyph- folder-open rioglyph- home rioglyph- inbox-in rioglyph- inbox-out rioglyph- log-in rioglyph- logout rioglyph- map-location rioglyph- map-marker rioglyph- pencil-square rioglyph- pm rioglyph- retrofit rioglyph- role-management rioglyph- tachograph-download rioglyph- tms rioglyph- trailer rioglyph- user rioglyph- volume rioglyph- warning-sign rioglyph- weight\n\n- Update Dependencies Updated the minimum React version requirement to 18 to ensure compatibility with the latest features and optimizations. If you are using older versions of React, please update.\n\n- Removed Removed the outdated cross-browser style documentation.\n\n- Update Notifications Extended the writing style guide for guidance for using different notification types\n\n- Update Commonly misspelled words Extend the writing style guide for a list of commonly misspelled or misformatted words\n\n- Update Formatting numbers with units Extended the list of formats for examples of \"kilowatt-hour\" and \"megawatt-hour\". Please note that these units are not yet officially supported by TC39.\nVersion 1.6.1 (2024-12-09)\n- Fixed ApplicationLayout Fixed the application layout to ensure the body contains only a single child, addressing issues with the recently introduced grid layout for the body scrollbar element.\nVersion 1.6.0 (2024-12-02)\n- Fixed SplitDialog Fixed the SplitDialog prop documentation for \"useOverflow\" to clarify that its default value is \"true,\" unlike other dialogs.\n\n- Fixed Multiselect Fixed the Multiselect component to correctly manage the dropdown state and filter value when used in multiline mode with an active filter.\n\n- Update Tree Added \"treeHeaderContent\" prop to the Tree component for rendering additional custom content at the top of the tree, useful for navigation pills.\n\n- Update Dialog Extended dialog sizes for \"fullheight-lg\" and \"fullheight-xl\".\n\n- New useOnboardingTour Introducing a new way to onboard users via an onboarding tour by using the \"useOnboardingTour\" custom hook. Note that weh have deprecated the \"clickflow\" prop for the OnboardingTip component with this new feature.\n\n- New OnboardingDialog Added new OnboardingDialog to initiate a onboarding tour and acts as the welcome dialog for the user of a service.\n\n- New Grid rows Added new grid helper class \"grid-rows-auto-1fr-auto\" to support a 3 row layout with expandable middle row.\n\n- Icons Updated icons rioglyph- cost-efficency Added icons rioglyph- newspaper rioglyph- rocket rioglyph- trophy rioglyph- check-badge rioglyph- check-shield rioglyph- sparkles rioglyph- academic-cap rioglyph- onboarding rioglyph- bookmark rioglyph- bookmark-square\nVersion 1.5.3 (2024-11-05)\n- Fixed AssetTree Fixed asset tree height by setting the \"scrollbar-content-wrapper\" to display flex and let the tree wrapper grow in the flex column direction.\nVersion 1.5.2 (2024-11-04)\n- Fixed SmoothScrollbars Changed height-100pct to min-height-100pct because of height side-effects in chrome.\n\n- Icons Added icons icons rioglyph- oil-can\nVersion 1.5.1 (2024-10-22)\n- Fixed Pills Fix rendering icons in justified filled pills when there is an icon only.\n\n- Fixed SmoothScrollbars Added height-100pct to the recently introduced smooth scrollbar content wrapper. This also fixes a side-effect on the AssetTree component.\n\n- Fixed MapMarker Tone down the POI marker color to better match the new Geofence color and to work better on a large satellite map.\nVersion 1.5.0 (2024-10-21)\n- Fixed Route Fix setting route arrow style. Added color constants for using status colors for routes. Extend demo examples to showcase usage of route styles and colors.\n\n- Fixed SmoothScrollbars Fix updating the scrollbar handle when the content height changes. This fix introduces a new wrapper div to check the children's height. Please check your tests and update them in case you rely on the old structure.\n\n- Fixed Select Fixed an issue with updating the dropdown menu options after the initial render, ensuring that the filter utilizes the updated DOM nodes.\n\n- Update LineChart Extended charts to render additional axis. The demos have been extended for interactive legends to highlight active lines.\n\n- Update Route Extended Route component to allow storing custom data to it which can be used when clicking on the routes polyline to set the route active.\n\n- Update Map isoline Extended the Polygon component to import the RIO colors to use it for an isoline or other polygons. Extended the demo to also include isoline colors.\n\n- Update Colors Adapted the \"gray-decent\" slightly and with that all derived classes like \"bg-decent\" and \"hover-bg-decent\"\n\n- Update Forms All form inputs have a subtle shadow now.\n\n- New Map marker A new map marker color has been added for road restrictions. The geofence color has been updated to avoid confusion with the restriction color used by HERE maps for their road restrictions. The new geofence color provides significantly better contrast and is clearer to see on the satellite map type.\n\n- New Chat Added new pure CSS chat component\n\n- New FadeUp Added new components to fade in from the bottom when an element appears on screen. This can be used to stagger elements on scroll.\n\n- New FadeExpander Added new components to expand content. This can be used to reveal or hide additional content triggered by all kinds of interaction.\n\n- New Cursor Added more cursor-style utility classes\n\n- New Shadows Added new shadow classes \"shadow-subtle\" and \"shadow-muted\", as well as directional classes \"shadow-muted-down\" and \"shadow-default-down\" to be used on light and white backgrounds. The hard shadow direction styles are now slightly more blurred to remove the hard line in the shadow. Note: the following shadow classes are deprecated: \"shadow-smooth-to-top\", \"shadow-smooth-to-bottom\", \"shadow-hard-to-top\", and \"shadow-hard-to-bottom\". Please use \"shadow-smooth-up\", \"shadow-smooth-down\", \"shadow-hard-up\", and \"shadow-hard-down\" instead.\n\n- New useSorting Added new useSorting hook for easily sorting any list by specified key using natural sort order\n\n- New URL feature toggles Added URL-based feature toggle handling and description of how to use them\n\n- Icons Added icons icons rioglyph- bookable-poi rioglyph- car-wash Updated icons rioglyph- truck rioglyph- truck-baseline rioglyph- truck-breakdown rioglyph- truck-unit rioglyph- van rioglyph- van-baseline rioglyph- trailer rioglyph- trailer-baseline rioglyph- trailerposition rioglyph- car rioglyph- car-baseline rioglyph- bus rioglyph- bus-baseline rioglyph- bus-breakdown rioglyph- filling-e-station rioglyph- filling-station rioglyph- euro-note rioglyph- order rioglyph- palette rioglyph- palette-broken rioglyph- parcel rioglyph- parcel-broken rioglyph- empty\n\n- Update Border radius and shadows The default border radius has been increased, and new shadow styles have been introduced, affecting various elements such as buttons, inputs, and panels. These updates collectively enhance the overall design, providing a more modern, refined, and visually appealing look and feel.\nVersion 1.4.1 (2024-09-12)\n- Update ButtonDropdown Added forwardRef to ButtonDropdown and pass it to the underlying dropdown toggle button. Fixed ButtonDropdown demo page examples.\n\n- Fixed Tooltip Wrapped Tag and Switch component in forwardRef so they work with the OverlayTrigger and SimpleTooltip component\n\n- New Map fullscreen demo Added a fullscreen map demo with rendering some metrics for inspection and customer feedback\nVersion 1.4.0 (2024-09-06)\n- Fixed Fixed dark mode listener when trying to read the theme from the colorScheme cookie\n\n- Fixed Charts Fixed rendering of chart legends for all charts\n\n- Update LineChart, AreaChart Extended LineChart and AreaChart components with reference lines\n\n- Update Select Added \"isLoading\" prop to show a loading spinner inside the Select and Multiselect dropdown\n\n- Update useKey Extend useKey hook to allow specifying specific keys to listen for\n\n- New ComposedChart Added new simple ComposedChart component to render a combination of line, area, and bar charts\n\n- New GroupedItemList Added new GroupedItemList component to render a list grouped by a specific key with the flexibility to customize the group header and the rendered items\n\n- New LicensePlate Added new LicensePlate component to display license plate information with various customization options\n\n- Icons Added and updated icons rioglyph- air-pay rioglyph- euro-note rioglyph- language rioglyph- calendar-parking rioglyph- engine\n\n- Update Notifications Extended the writing style guide for notification and \"copy to clipboard\" guidelines\nVersion 1.3.0 (2024-07-26)\n- Fixed TreeOptions Fixed tree options tooltip position\n\n- Fixed DataTab Fixed DataTab title to avoid being set to the div element and used as native tooltip\n\n- Fixed SimpleDialog, SplitDialog Fixed typings of SimpleDialog and SplitDialog\n\n- Fixed Select Fixed italic placeholders for Select and Multiselect\n\n- Fixed Fixed DateRangePicker type for backwards compatibility\n\n- Update Sliders Added new \"color\" prop\n\n- Update Switch Added new \"color\" prop\n\n- Update Forms Added new focus shadow for form inputs and changed the input border color\n\n- Update OverlayTrigger, Tooltip, OnboardingTip, Popover The OverlayTrigger and Popover components are no longer based on react-bootstrap. They have been rewritten to remove the dependency and to fix some warnings when used with React 19.\n\n- New useElapsedTime Added new useElapsedTime hook to get the time since a component was mounted or from a provided starting time\n\n- New Flexbox Added class \"flex-0\" to flexbox utility classes\n\n- New Rounded Added class \"rounded-inherit\" to rounded utility classes\n\n- Update RIO Theme The danger color has been slightly adjusted to better match the other colors. Dark mode colors for danger, warning, and success have also been updated.\n\n- Update VW Theme Adapt highlight colors to VWAG guidelines\n\n- Update Formatting guide Extracted number and date formatting guidelines into a dedicated formatting guide page. This makes it easier to find and to keep the writing style guide shorter.\n\n- New Form labels and placeholders Extended the writing style guide for form labels and placeholders\nVersion 1.2.2 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown header items\n\n- Fixed Checkbox Fixed the rendering position of the checkbox in the grid layout using align-baseline, ensuring it remains stable when checked and unchecked\nVersion 1.2.1 (2024-06-27)\n- Fixed MapSettings Fixed rendering of map settings dropdown when used in unit tests\n\n- Fixed Tree Fixed Tree scrolling when used as a standalone component without the wrapping AssetTree and when a \"scrollHeight\" is defined\n\n- Fixed AssetTree Merged the nested elements \".TreeLabel\" and \".TreeLabelName\" into a single element for TreeNode and TreeLeaf. This reduces the number of DOM elements and enhances performance. Note that you may need to update selector paths in integration tests if they reference tree items.\n\n- Fixed Key Fixed key style for dark mode\nVersion 1.2.0 (2024-06-26)\n- Fixed SmoothScrollbars Added missing root export for SmoothScrollbars component\n\n- Fixed ErrorState, EmptyState, CustomState Fixed button alignment for mobile screens\n\n- Fixed Marker Fixed \"list-group-item\" style when using color indicators\n\n- Fixed Multiselect Fixed filter input padding when Multiselect is used with a leading input addon\n\n- Fixed useAfterMount Fixed hook useAfterMount functionality\n\n- Update MapSettings Enhance MapSettings to include item labels. Substitute MapSettingsPanel with a Dropdown when labels are available. Please provide labels for users to improve usability. Note that providing labels will become mandatory in the future.\n\n- Update Marker Added new mapMarker \"cursor\" props\n\n- Update ListMenu Added new prop \"trailingInputAddon\" to allow adding additional elements to the filter input\n\n- Update DeviceUtils Added new device utils helper function to check for Apple Mac OS to be used for showing mac specific keys\n\n- New Feedback Added new feedback components to simplify requesting user feedback for various use cases\n\n- New Key Added style for keys by using the \"<kbd\" HTML tag\n\n- New Visibility Added new \"visibility-hidden\" class to only target the visibility without setting display to none\n\n- New Input resize Added new input resize classes\n\n- Icons Added new Icon rioglyph- layer-pois\nVersion 1.1.0 (2024-06-17)\n- Fixed CalendarStripe Fixed CalendarStripe component when resizing and rendering different amounts of columns\n\n- Fixed AssetTree Fixed rendering issue in AssetTree component when switching mode between \"fly\" and \"fluid\" externally\n\n- Fixed Marker Fixed broken Marker component when using it without an icon\n\n- Fixed Pills Fixed disabled styles for stacked and filled nav-pills\n\n- Fixed Traton Theme Fixed border radius for Dropdown, MapMarker, Slider, Tag, and Buttons\n\n- Update Marker Updated marker style for active and inactive markers. Extend marker colors for status colors. Adapt default colors for map for better readability in light and dark mode. Added new prop \"pinging\" to SingleMapMarker to render a pinging animation. Another new prop \"anchorIconName\" was added to render an icon directly on the markers anchor. The map direction icon can now be replaced via the new \"stateIconName\" prop and the default moving state can be changed.\n\n- Update AssetTree Added new prop \"treeOptionsTooltip\" to Tree component to show a tooltip for the tree options dropdown\n\n- Update ActionBarItem Updated the \"ActionBarItem.List\" style used for the service info popover. Please make sure to use the \"ActionBarItem.List\" and \"ActionBarItem.ListItem\" components to design the service info for the application header.\n\n- Update ErrorState, EmptyState, CustomState Added the prop \"bsStyle\" to the state components buttons to define other button styles like a default button. Also, when providing an href value, the button is rendered as a link. The headline size will increase now at the xl breakpoint to have a slightly smaller text size for smaller screens.\n\n- Update NoData Improved readability by improving text color contrast. Removed text uppercase according to the writing style guide.\n\n- Update Fieldset Update \"fieldset\" and \"legend\" style for grouping form elements. Added demo to showcase utility of using fieldsets in forms.\n\n- Icons Icons Update icons optical center to work better within circles like the direction icon for the map marker rioglyph- direction rioglyph- parking rioglyph- antenna rioglyph- heart rioglyph- location-arrow\n\n- New CSS Grid & Subgrid Added multiple CSS Subgrid utility classes and examples. Extended Grid classes and documentation\n\n- New Added bg-none and hover-bg-none class\nVersion 1.0.0 (2024-06-03)\n- Breaking With this version, we have started migrating all components towards Typescript for better typing support and documentation. With this migration, we will remove the internal types.ts file. As it was not intended to be used by any service, please make sure you update your imports accordingly. Check out the How to for more details. Be aware of possible changed component types as well.\n\n- Breaking Map With this version the HERE map implementation has changed significantly since we have migrated the map internally to the latest HERE APIs. This includes also the map rendering where the default render engine has changed from WebGL to HARP. Raster maps are rendered with the P2D engine. Due to this migration, the map types have a different design now. To make use of the new rendering engine, please add the following HERE dependency to your project. < script type = \" text/javascript \" src = \" https://js.api.here.com/v3/3.1/mapsjs-harp.js \" </ script\n\n- Removed Fade Removed several deprecated props from the Fade component\n\n- Removed Removed \"BrowserWarning\" component\n\n- Removed Removed \"text-muted\" utility class. Use \"text-color-gray\" instead\n\n- Removed Removed \"GroupSelectionUtil\" getNewGroupedSelected utility function\n\n- Removed Removed getOffsetTopWholeScreen utility function\n\n- breaking BottomSheet / Sidebar Renamed prop \"useBackdrop\" to \"hasBackdrop\" for BottomSheet and Sidebar component\n\n- breaking CalendarStripe Deprecated \"render\" prop of \"CalendarStripe\" component in favor of new \"renderDay\" prop\n\n- breaking Collapse / ExpanderPanel / ExpanderList Removed callbacks \"onEnter\", \"onEntering\", \"onExit\", and \"onExiting\" for ExpanderPanel and Collapse components. We introduced Framer Motions \"onAnimationStart\" callback instead. The ExpanderPanel header style underwent slight changes. The \"in\" class for the collapse is no longer used. Additionally, the \"react-transition-group\" library has been replaced with \"framer-motion\". The prop \"mountOnEnter\" has been removed from the ExpanderPanel, ExpanderList and Collapse components. Use \"unmountOnExit\" instead to control whether the collapsed content should be removed from the DOM when it is collapsed. The collapse prop \"in\" has been renamed to \"open\" to align with other components.\n\n- breaking List Groups and Expanders List groups no longer have a border and a border-radius by default. This has the advantage that they can now be used within other elements without having to overwrite many CSS values. To get the same look as before, you need to set the classes \"border\" and \"rounded\". Expander lists now have props for these two CSS properties, which are set to true by default.\n\n- breaking Resizer The Resizer component has been migrated from class component to functional component. With that the updated size value need to be set with a state setter function. Example: const handleResize = ( diff: number ) =setBoxWidth ( oldWidth =oldWidth - diff )\n\n- breaking Select / Multiselect Changed roles of Select and Multiselect dropdown menu from \"list\" to \"menu\" and the role of the individual select options from \"presentation\" to \"listitem\" to be aligned with the ButtonDropdown component. Fixed automatic drop direction check to open the dropdown above the toggle when there is not enough space. Removed deprecated size values \"small\" and \"large\" in favor of \"sm\" and \"lg\".\n\n- breaking Select The type definition for the Select component has changed. The more impactful change is the type for the \"onChange\" callback which has changed to handle the removal of a selection and therefor \"undefined\" will be returned. onChange = { ( selectedOption: SelectOption | undefined ) =handleChange ( selectedOption ?. id ) } Also important to note that the SelectOption type no longer can be imported via the \"types.ts\" file. Please adapt your import accordingly import Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\n\n- breaking Split SortArrows, SortArrowUp, and SortArrowDown in dedicated components. Change imports to default imports.\n\n- Removed useResizeObserver The \"Observer Entry\" object may now be null, so it can't reliably be destructured anymore. This doesn't work anymore: const [ ref, { borderBoxSize } ] = useResizeObserver ( ); console. log ( borderBoxSize ); Update your code like so: const [ ref, observerEntry ] = useResizeObserver ( ); console. log ( observerEntry ?. borderBoxSize ); Also, an option to specify the HTML element type of the generated ref was added (defaults do div).\n\n- Fixed Blockquote Change default blockquote padding from percentage to pixel. Please add custom padding classes to change it to your needs.\n\n- Fixed BottomSheet Fixed maximum width for BottomSheet component when using the \"detach\" prop. Allow defining the detach offset.\n\n- Fixed Chart Colors Fixed export of shared colors for diagrams\n\n- Fixed Loading Guidelines Fixed spinner size for buttons to avoid button size changes. Extended loading guidelines for spinner buttons in tables.\n\n- Fixed Sidebar Automatically switch Sidebar mode from \"fluid\" to \"fly\" to be put above the content when the ApplicationBody's module-content width reaches a defined minimum. This avoids breaking the entire application layout for fluid Sidebars on smaller screens or when resizing Sidebars.\n\n- Fixed SimpleTooltip Renamed SimpleTooltip prop \"tooltipWidth\" to \"width\" to align with underlying Tooltip component\n\n- Fixed Spinner Outlined spinner buttons\n\n- Fixed Spinner in Buttons Fixed style for spinner in button block\n\n- Fixed Tags Fixed 1px offset of tag icons\n\n- Fixed Tooltip Fixed tooltip arrow position on small elements\n\n- Update AutoSuggest Migrated AutoSuggest component to Typescript and cleaned up its props\n\n- Update AssetTree Added new TreeSummaryRow component to allow for more tree item type filter like fuel type. With this we also added a new \"supType\" property to the TreeItem to filter for it and to show a paired icon.\n\n- Update Button Added \"iconName\" prop to Button component to reduce boilerplate code when using icons. Use native HTML \"disabled\" prop instead of separate class.\n\n- Update ClearableInput Added an input mask to the ClearableInput to allow custom input formats to avoid user input mistakes\n\n- Update Dialog Added focus trap to Dialog component. Deprecate \"onHide\" callback in favor of \"onClose\". Extended the dialog for compound components to allow wrapping title, body, and footer with forms. Replaced the Dialog animation with framer-motion. As a result, the class \"modal-ender-done\" has been removed. Added new \"xs\" dialog variant\n\n- Update ExpanderPanel Added new \"onOpen\" and \"onClose\" callbacks to ExpanderList items\n\n- Update ExpanderPanel / Combined Tables in ExpandablePanel Added \"iconClassName\" prop to ExpanderPanel component to to allow for 100% width in the panel header. This comes in handy when using a table inside the header and the body that shall have the same column width. With that we also added a design demo to showcase the usage of the tow tables inside the expander panel.\n\n- Update Forms Added horizontal form demo\n\n- Update LoadMoreButton Extended LoadMoreButton component with props \"isInteractive\" and \"progressBarStyle\" to customize behavior and style\n\n- Update Map Settings / Map Layer Migrated the Here Map traffic layers to use the new APIs when using the WebGL mode. For raster maps tiles, we still have to use the deprecated APIs as there is no alternative for now. We also fixed the map translations so other countries are also properly translated and don't show their city names in their native language.\n\n- Update Multiselect Added prop \"multiline\" to allow wrapping selected item around within the multiline toggle. The style of the selected items has changed to be more muted so it better integrates with other form elements.\n\n- Update NumberInput / NumberControl Migrated NumberInput and NumberControl to Typescript and updated their typings. Added check to avoid entering letters or special characters into the input field for Firefox and Safari. Added prop for warning and error messages. Added new prop \"noDefault\" to keep the input empty instead of using the default value of 0. Fixed the NumberControl spinner buttons when holding down the mouse button to increase and decrease the value and leaving the input field.\n\n- Update TimePicker Added prop for rendering warning and error messages\n\n- Update Onboarding Added props \"previousButton\" and \"nextButton\" to Onboarding component to enable a better onboarding click flow\n\n- Update Print CSS Notifications are now hidden while printing the page when using our print.css\n\n- Update Select Added prop \"inputAddon\" to Select component to allow for adding icons as addon to the toggle button Enhanced the background color of selected options for the Select and Multiselect component\n\n- Update Sidebar Added prop \"hasSmoothScrollbar\" to Sidebar component to enable the built-in scrollbars instead of using the native browser scrollbars\n\n- Update Slider or RangeSlider Added \"valueLabelUnit\" prop to Slider and RangeSlider to use a label for the slider values\n\n- Update SplitDialog Added new \"leftContentClassName\" and \"rightContentClassName\" to the split dialog\n\n- Update Buttons Add gray-lightest hover background color to muted, link, and action buttons\n\n- Update Timeline Added new classes \"timeline-date-thin\" and \"timeline-date-dashed\" as well as color classes to change the timeline width and style. Updated Timeline examples to showcase variations as it's built with atomic classes.\n\n- New EditableContent Added new EditableContent component that allows for inline text editing\n\n- New DeviceUtils Added new \"isRetinaDevice\" to deviceUtils\n\n- New Divider Added new Divider component for horizontal and vertical dividing lines\n\n- New Forms New form \"form-group-not-editable\" style toggling editable forms\n\n- New FrameDialog Added new FrameDialog component that can be used to open a dialog from a widget iframe in the parent window\n\n- New Grid stack Added new grid stacking classes \"grid-stack\" and \"grid-stack-item\" as an alternative to position absolute\n\n- New HTML Emails New guidelines demo for HTML emails created with react email\n\n- Icons Icons rioglyph- drag-n-drop rioglyph- robot rioglyph- pin-range rioglyph- pin rioglyph- calendar-plus rioglyph- exclamation rioglyph- info rioglyph- question rioglyph- fuel-diesel rioglyph- fuel-electric rioglyph- fuel-hydrogen rioglyph- fuel-gas rioglyph- archive rioglyph- map rioglyph- map-location rioglyph- book rioglyph- face-frown rioglyph- face-neutral rioglyph- face-smile rioglyph- paper-clip rioglyph- share-nodes rioglyph- handshake rioglyph- stack rioglyph- building rioglyph- file-signature rioglyph- signature rioglyph- location-arrow rioglyph- wallet rioglyph- user-group rioglyph- window rioglyph- inbox rioglyph- inbox-stack rioglyph- inbox-in rioglyph- inbox-out rioglyph- id rioglyph- ruler rioglyph- cards-add rioglyph- truck-unit rioglyph- user-add rioglyph- user-ok rioglyph- user-remove rioglyph- pencil-square rioglyph- megaphone rioglyph- code-brackets rioglyph- code-braces rioglyph- hash rioglyph- server-stack rioglyph- shopping-bag rioglyph- search-list rioglyph- tasks rioglyph- fingerprint rioglyph- flag rioglyph- fire rioglyph- puzzle\n\n- New Line Height Added new \"line-height-150rel\" class\n\n- New Page Added new Page component for displaying documents\n\n- New SaveableInput Added new SaveableInput component\n\n- New TimedBottomSheet Added new TimedBottomSheet component to control a bottom sheets visibility with timers\n\n- New SmoothScrollbars Added a new SmoothScrollbars component\n\n- New Text Wrapping Added new \"text-wrap-balance\" class\n\n- New useFocusTrap Added new useFocusTrap hook that can be used for custom overlays\n\n- New useHover Added new useHover hook that can be used for style changes on hover for certain elements that can not be influenced by hover utility classes alone\n\n- New usePostMessage Added new usePostMessage hook that can be used to exchange messages between an iframe and the parent window\n\n- CSS With this version, the UIKIT adds its CSS link into the header automatically if it is not present. This should help to ease the update of the UIKIT library and the corresponding CSS. This means, you can remove the link from your index.html and only update the UIKIT dependency in your package.json. See Automatic loading of UIKIT CSS Files\n\n- Guideline For accessibility purposes, aim for a good color contrast between the foreground color (e.g. text, links, etc.) and the background color, we have added a new \"Color Combinations\" section. See Color Combinations\n\n- Guideline We have introduced some general writing guidelines to enhance consistency in UX writing and to maintain a unified voice. See Writing style guide\nVersion 0.16.3 (2023-03-14)\n- Icons Deleted Icons: fax\n\n- Fixed Fixed alignment of collapsed header menu items. See ApplicationHeader\n\n- Fixed Fixed fade in animation when the inital animation is set to false. See Fade\n\n- Fixed Fixed close animation for BottomSheet when hight is set to window height. See BottomSheet\n\n- Fixed Fixed AspectRatioPlaceholder declaration file name.\n\n- Fixed Fixed text ellipsis of selects. See Selects\n\n- Update Refactored DataTabs props. See DataTabs Merged hoverTextColor and hoverBgColor props to tabHoverClassName Merged activeTextColor and activeBgColor props to tabActiveClassName added arrowClassName prop added tabsWrapperClassName prop added tabClassName prop added new className prop to DataTab child component\n\n- Update Added new \"fullheight\" Dialog Size and renamed \"full\" to \"fullwidth\". See Dialog\n\n- Update MapSettings panels are now closing on click outside. See MapSettings\n\n- Update Extended the SimpleTooltip component to pass the \"delay\" and \"popperConfig\" props to the underlying component. See SimpleTooltip\n\n- Update Remove left padding from ReleaseNotes component to better work with images. Please add padding-left-15 manually, in case you want to work with lists. See ReleaseNotes\n\n- New Added new CalendarStripe component. See CalendarStripe\n\n- New Added new hook \"usePrevious\" to access state values of previous component render cycle. See usePrevious\n\n- Icons Added or updated icons: rioglyph- card-reader rioglyph- card-hotel rioglyph- api rioglyph- currency-euro rioglyph- thumbs-up rioglyph- thumbs-down rioglyph- hand-up rioglyph- hand-down rioglyph- hand-left rioglyph- hand-right See Icons",
1108
1108
  "category": "Getting started",
1109
1109
  "section": "Welcome",
1110
1110
  "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
@@ -1224,7 +1224,7 @@
1224
1224
  "title": "How to use the UIKIT",
1225
1225
  "lead": "Install the latest version of the UIKIT (that includes latest beta versions as well) via",
1226
1226
  "summary": "Install the latest version of the UIKIT (that includes latest beta versions as well) via",
1227
- "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\njavascript\nnpm install @rio-cloud/rio-uikit\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.0.0\nTypeScript\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManagedRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManualNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.0/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.0/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.0/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.0/scania-uikit.css\"\n\nManagedRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\nPrint styles\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.0/rio-uikit-print-utilities.css\"\nAdditional styling information\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.0.0/rio-uikit-colors.json\nDark mode\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.0.0/rio-darkmode.js\"</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"",
1227
+ "searchText": "How to use the UIKIT\nInstall the latest version of the UIKIT (that includes latest beta versions as well) via\nHow to use the UIKIT\n- Install the npm package\n- Typescript\n- Document <head /key meta tags\n- UIKIT CSS\n- Brand themes Print styles Additional styling information Dark mode\n- UIKIT Javascript packages via CDN\n- Dependencies\n\n- Typescript\n\n- Brand themes\n- Print styles\n- Additional styling information\n- Dark mode\nInstall the npm package\njavascript\nnpm install @rio-cloud/rio-uikit\n\nOr install a dedicated version via\n\njavascript\nnpm install @rio-cloud/rio-uikit@2.0.1\nTypeScript\nThe UIKIT is built with TypeScript and defines the types inside the components.\n\nNote: Do not import types from the ./types.ts file directly as this is an internal file and subject to change. Import enums, constants and types from the declaration file together with the component.\n\njavascript\nimport AutoSuggest, { type AutoSuggestSuggestion } from \"@rio-cloud/rio-uikit/AutoSuggest\";\nimport Select, { type SelectOption } from \"@rio-cloud/rio-uikit/Select\";\nimport TableViewToggles, { type TableViewTogglesViewType } from \"@rio-cloud/rio-uikit/TableViewToggles\";\nDocument <head /> key meta tags\nMandatory\n\nThe utf-8 meta tag is essential for ensuring that your webpage correctly displays text in a wide range of languages and symbols. By setting the character encoding to UTF-8, this tag enables support for almost all characters, including those used in non-Latin scripts, special symbols, and emojis.\n\nThis not only guarantees proper rendering of your content but also prevents common issues such as garbled or corrupted text and icons, known as mojibake. Modern web browsers and standards expect UTF-8 encoding by default, making this tag a critical component of any HTML document. Including this tag ensures your webpage is globally accessible and aligns with current best practices in web development.\n\nhtml\n<meta charset=\"utf-8\" /\n\nBest practices\n\nThe viewport meta tag is a cornerstone of responsive web design. It configures the viewport settings to match the device’s screen width, ensuring that your webpage adapts seamlessly to different screen sizes. Without this tag, mobile devices often display pages as a scaled-down version of their desktop layout, requiring users to zoom or scroll horizontally.\n\nBy specifying the initial scale and width, this tag guarantees that your content is displayed optimally on all devices, from smartphones to tablets to desktops. Additionally, it improves user experience, enhances accessibility, and supports SEO by meeting mobile-friendly standards, making it a crucial inclusion in any modern HTML document.\n\nhtml\n<meta name=\"viewport\" content=\"initial-scale=1.0, width=device-width\" /\nUIKIT CSS\nManagedRecommended\n\nWhen utilizing the ApplicationLayout component, the UIKIT automatically ensures the inclusion of the necessary CSS style tag within your index.html, providing seamless integration and enhanced functionality.\n\nYou no longer need to manually add the CSS style tag to your index.html. Feel free to remove it if you prefer to manage it yourself.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /, as it executes our init function.\n\nManualNot Recommended\n\nUse the CSS Stylesheet as follows (specify your required version number in the URL) if you need more control on what style you want to use.\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/rio-uikit.css\"\n\nNote: Please make sure to use the same UIKIT style version as the npm package, otherwise this will lead to inconsistency and UI bugs.\nBrand themes\nIn addition to the RIO theme, the UIKIT offers other brand-specific themes.\n\nThese other themes may only be used for applications or services who don't run on the RIO platform. All platform services have to use the RIO theme to achieve a distinct look and feel for the user when switching between services and applications.\n\nIn order to use such a brand theme, modify the URL in the <linktag that loads the CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/vw-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/man-uikit.css\"\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/scania-uikit.css\"\n\nManagedRecommended\n\nYou can simply omit the <linktag in your index.html altogether. The UIKIT will automatically load the correct CSS file for you.\n\nhtml\n<html data-brand=\"vw\"\n\nhtml\n<html data-brand=\"man\"\n\nhtml\n<html data-brand=\"scania\"\nPrint styles\nThe UIKIT supports simple print stylings in order to have printable content. See Print CSS\n\nhtml\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://uikit.developers.rio.cloud/2.0.1/rio-uikit-print-utilities.css\"\nAdditional styling information\nIn some cases like using D3 you may need the color variables as .json from the UIKIT provided via CDN. You can fetch the provided file from CDN via the following URL:\n\nhtml\nhttps://uikit.developers.rio.cloud/2.0.1/rio-uikit-colors.json\nDark mode\nThe UIKIT is fully dark mode ready.\n\nNote: Please note that every application and every widget must be wrapped with the <ApplicationLayout /as it executes our init function.\n\njsx\n<ApplicationLayout\n<ApplicationLayout.Header\n<ApplicationHeader label='RIO Service' navItems={navItems} /\n</ApplicationLayout.Header\n<ApplicationLayout.Body\n<divMy application</div\n</ApplicationLayout.Body\n</ApplicationLayout\n\njsx\n<ApplicationLayout\n<divMy widget</div\n</ApplicationLayout\n\nIn cases where the React ApplicationLayout component cannot be used, you can import the new darkmode.js from the UIKIT CDN and add it to your index.html. This script will take care of listening to the theme switch for you.\n\nhtml\n<script src=\"https://uikit.developers.rio.cloud/2.0.1/rio-darkmode.js\"</script\n\nIf you want to react on the dark mode for instance to exchange some images or apply some specific utility classes, you can use the custom hook useDarkMode to do so.\n\nTo manually enable dark mode when testing your application locally, adddata-theme=\"dark\" to the <htmltag.\nDependencies\nAs of version 1.7.0 the RIO UIKIT has the following dependencies:\n\npeerDependencies\n\njavascript\n\"react\": \"=18.0.0\"\n\"react-dom\": \"=18.0.0\"",
1228
1228
  "category": "Getting started",
1229
1229
  "section": "Welcome",
1230
1230
  "boost": "How to use the UIKIT start/howto #start/howto Getting started Welcome"
@@ -1284,7 +1284,7 @@
1284
1284
  "title": "Feature cards",
1285
1285
  "lead": null,
1286
1286
  "summary": "Lorem ipsum dolor sit amet",
1287
- "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nCompello consequuntur tollo comptus temperantia caelestis atavus corona civis.\nIste cinis utpote amplitudo totus pecco ultra ademptio.\nFugiat summa maiores appositus advenio video bibo.\nVorago subvenio adnuo tergiversatio succurro degusto.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nIste autus civis tempore cuius validus bis.\nCauda defessus turba ullam quibusdam ustulo curiositas pectus commodo.\nDucimus conculco adstringo.\nOccaecati vestrum derideo ascisco.\nRead more\nLorem ipsum dolor sit amet\nDepromo accendo auditor civitas.\nCapio abutor sonitus absum.\nDerideo curso casso vado decens voco enim possimus defendo.\nBenevolentia uberrime aptus considero solitudo.\nAro aliquid adstringo angustus sursum vulgus.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nHic cotidie peior cometes comptus caterva.\nDecipio aggredior subnecto voluptatibus quae calamitas concedo cenaculum.\nConitor vindico ipsam tibi certus temporibus quidem vacuus.\nVentus ter excepturi.\nQuae apto totus.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
1287
+ "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nDeludo cubicularis commodi demo.\nAccommodo demergo derelinquo vestrum itaque pectus universe.\nAbsum adiuvo vito sufficio victoria.\nSuasoria conculco bibo undique trans vir.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nVespillo reiciendis quasi.\nTamquam apto repellat inflammatio cito audio arx dolorum tenetur.\nAger benevolentia tot video ait coerceo varius sumo ducimus caelestis.\nCanto appello absconditus nihil.\nRead more\nLorem ipsum dolor sit amet\nVulgivagus adhuc aliquam voluptate quasi chirographum tantillus ipsam arto.\nAuxilium nihil tunc absens suffoco.\nBenigne tum antiquus tondeo utrum uredo ratione turpis tumultus.\nVociferor velit atrocitas.\nQuas timor defetiscor administratio uter cur subito capitulus.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nCaritas coaegresco desparatus corporis decet vigilo speculum.\nAudax conduco stultus damnatio cumque ventito enim aduro infit una.\nVulgivagus defungo angustus demum communis deserunt ipsum alii.\nVigor desolo aequitas odit cupiditas crur socius tardus tunc commemoro.\nVos adsidue defleo.\n\nView detailsGet started\nCustomize\nImport your own data\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more\n\nUse on mobile\nGet the app\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nDownload now\n\nTips\nDiscover new features\n\nCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.\nRead more",
1288
1288
  "category": "Templates",
1289
1289
  "section": "Content",
1290
1290
  "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
@@ -1294,7 +1294,7 @@
1294
1294
  "title": "Form summary",
1295
1295
  "lead": null,
1296
1296
  "summary": "Request summary",
1297
- "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personArchie Blick\nRequested roleFuture Infrastructure Representative\nContact emailMarlon70@gmail.com\nAnnual budget€77,023.00\nProject descriptionClamo nostrum utrimque sto calco vulgaris calcar acidus solio vallum.\nMolestiae aggredior excepturi votum tametsi vinitor tum.\nDeprecator universe vitium vallum corporis cinis viduo thalassinus amicitia.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
1297
+ "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personBeulah Stoltenberg\nRequested roleSenior Communications Developer\nContact emailDortha.Lesch23@hotmail.com\nAnnual budget€150,465.00\nProject descriptionSuspendo curis despecto tabella numquam defendo vorax adipiscor summa vomica.\nAgo reprehenderit eos thymbra.\nDebilito caries pecco cenaculum absum corrigo vergo debilito usus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
1298
1298
  "category": "Templates",
1299
1299
  "section": "Forms",
1300
1300
  "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
@@ -1314,7 +1314,7 @@
1314
1314
  "title": "List blocks",
1315
1315
  "lead": null,
1316
1316
  "summary": "Lorem ipsum dolor",
1317
- "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nVenia impedit arbustum cicuta nisi comes.\n\nRohan and Sons\nBenevolentia voluntarius vos timidus.\n\nConnect\n\nMedhurst, Morar and Jacobi\nSumo tonsor acies verecundia sto valeo.\nConfido aspernatur coniecto.\n\nConnect\n\nStark, Quitzon and Reichel\nFacere denique neque adsum adfectus crastinus.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nCultellus textilis tonsor temporibus.\n\nMurphy, Macejkovic and Bernier\nTurba coruscus cohors tertius occaecati.\n\nLeannon, Herman and Rosenbaum\nTextor voro avaritia brevis tamquam.\nCrinis tribuo thermae omnis una aetas tonsor.\n\nFeil, Hand and Hansen\nDeficio approbo vigilo.\nChirographum vinculum aequus vel ceno utpote cervus concedo.\nLorem ipsum dolor sit amet\nComis arto advenio defluo deleniti voluptas cura consuasor umbra.\nAger urbanus venia venustas astrum porro terreo defungo cruentus congregatio.\n\nBorer - Mraz\nAbutor tandem sperno color via bonus.\nPatria undique altus eum vapulus arto cedo.\nAuditor atrox ara repellendus atrocitas.\n\nParisian, Morissette and Sanford\nSopor animus vis curo denuo timor aduro certus.\nAdmiratio absque civis stillicidium necessitatibus tantum capto.\nAcquiro tollo pariatur.\n\nBecker Group\nConspergo tonsor error creta beneficium.\nCupiditate quisquam tumultus.\nConforto trucido vestrum coepi.\n\nLakin LLC\nQuos defleo conforto adopto crur.\nSolio avarus aequus.\nSapiente patruus aeger.\nEnhance your application with powerful add-ons!\n\nTasty Bronze Fish\nProfessional-grade Towels perfect for altruistic training and recreational use\n\n€38.79\nTotal per month\n\nGet Add-on\n\nSleek Metal Sausages\nIntroducing the Lithuania-inspired Bike, blending long style with local craftsmanship\n\n€49.69\nTotal per month\n\nGet Add-on\n\nHandcrafted Silk Fish\nOriental Salad designed with Aluminum for sturdy performance\n\n€57.05\nPer 1000 messages / month\n\nGet Add-on\n\nSmall Bamboo Salad\nExperience the teal brilliance of our Pants, perfect for pricey environments\n\n€45.85\nTotal per month\n\nGet Add-on\n\nLuxurious Concrete Pizza\nOur delicious-inspired Ball brings a taste of luxury to your partial lifestyle\n\n€49.49\nTotal per month\n\nGet Add-on\nFeatures\n\nIncredible Concrete Pants\nModern Cheese designed with Marble for stylish performance\n\nRustic Rubber Shirt\nIntroducing the Sierra Leone-inspired Pants, blending splendid style with local craftsmanship\n\nLuxurious Granite Gloves\nThe Claire Bike is the latest in a series of bowed products from Hintz - Rowe\n\nGorgeous Plastic Computer\nFantastic Shoes designed with Bronze for worse performance\n\nFantastic Aluminum Sausages\nThe Zora Bike is the latest in a series of productive products from Feeney, Gleason and Stoltenberg\n\nBespoke Marble Table\nThe sleek and true Fish comes with cyan LED lighting for smart functionality",
1317
+ "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nDelego adfectus via sortitus corporis tollo corroboro timidus adstringo vigor.\n\nOrtiz - Armstrong\nPecco tredecim tandem admoneo.\n\nConnect\n\nHansen Inc\nAbbas confugo conspergo annus.\nBaiulus admoneo hic quam villa.\n\nConnect\n\nKuphal - Pfannerstill\nAt et summopere considero benigne antepono carmen canto clarus averto.\n\nConnect\nMeeting type\n\nChoose the logistics session that fits your process\nFreight pickup\nSchedule cargo collection at origin\n\n30 min\n\nRoute planning\nDiscuss optimal route and ETA\n\n45 min\n\nDelivery coordination\nAlign final drop-off and documents\n\n60 min\nLorem ipsum dolor\nAccendo calcar curatio tonsor.\n\nPaucek, Conroy and Dare\nSummisse vulticulus cohaero quo canto ver.\n\nJones, Kessler and Little\nNihil adeo admoneo absum.\nSuscipit amor delicate tibi debilito antea.\n\nPowlowski, Romaguera and Bergstrom\nAngustus debeo thesis damnatio commodo tollo.\nAlter quo cupiditate barba distinctio arbustum amoveo.\nLorem ipsum dolor sit amet\nAdvenio adflicto paens viridis tunc.\nViduo creta modi dapifer.\n\nKoss, Stanton and Gibson\nEligendi crepusculum iure triumphus cunabula considero.\nRepudiandae suggero cognatus placeat.\nAmiculum quo copiose calco accusamus cura civitas hic turbo tergum.\n\nJones - Hane\nCena cena audeo.\nAdamo adstringo thymbra temeritas statim combibo temeritas absconditus color.\nDeporto dolorum atque cariosus placeat arbitro at amet solum.\n\nSchamberger and Sons\nVehemens conduco neque accusator.\nAqua vilis comitatus damnatio adsuesco textilis.\nCena colo vinum dolorem eius tenetur.\n\nWillms - Hirthe\nAuctus urbanus cibus.\nCorrigo debeo conitor conqueror.\nSono argentum sumo vel.\nEnhance your application with powerful add-ons!\n\nAwesome Rubber Table\nOur flamingo-friendly Ball ensures appropriate comfort for your pets\n\n€17.35\nTotal per user / month\n\nGet Add-on\n\nLicensed Silk Table\nNew Keyboard model with 82 GB RAM, 557 GB storage, and everlasting features\n\n€66.29\nPer 1000 messages / month\n\nGet Add-on\n\nPractical Plastic Pizza\nOur juicy-inspired Ball brings a taste of luxury to your jubilant lifestyle\n\n€72.89\nTotal per user / month\n\nGet Add-on\n\nGeneric Plastic Chicken\nSavor the juicy essence in our Chair, designed for realistic culinary adventures\n\n€66.03\nTotal per user / month\n\nGet Add-on\n\nFresh Bronze Chair\nThe sleek and victorious Bike comes with tan LED lighting for smart functionality\n\n€39.19\nPer 1000 messages / month\n\nGet Add-on\nFeatures\n\nElegant Rubber Shoes\nThe Arvilla Bike is the latest in a series of unwelcome products from Emmerich - Torp\n\nElegant Steel Computer\nThe Janessa Towels is the latest in a series of electric products from Romaguera - Quitzon\n\nUnbranded Concrete Sausages\nThe Operative tangible conglomeration Chips offers reliable performance and shocked design\n\nRecycled Marble Bike\nOur elephant-friendly Chicken ensures cheerful comfort for your pets\n\nBespoke Silk Chips\nLicensed Pizza designed with Rubber for sneaky performance\n\nElectronic Cotton Ball\nProfessional-grade Cheese perfect for avaricious training and recreational use",
1318
1318
  "category": "Templates",
1319
1319
  "section": "Content",
1320
1320
  "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1374,7 +1374,7 @@
1374
1374
  "title": "Form blocks",
1375
1375
  "lead": null,
1376
1376
  "summary": "SettingsCompany display name",
1377
- "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nSharable clear-thinking capability\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nMichiganMichigan\nNorth Carolina\n\nVenezuelaVenezuela\nMauritius\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
1377
+ "searchText": "Form blocks\nForm blocks\nSettingsCompany display name\nThis name will appear on your team profile page\n\nAbout the team\nWrite a short summary about your organization or group (max 240 characters).\n\nOptional interactive attitude\n\nCompany email\nYour contact email address for customer communication\n\nDisplay email on team page\n\nOffice location\nPrimary business address used for official correspondence\n\nNebraskaNebraska\nSouth Carolina\n\nBosnia and HerzegovinaBosnia and Herzegovina\nBermuda\n\nPreferred currency\nAll pricing and payouts will be shown in this currency\n\nEUR - EuroUSD - US Dollar\nEUR - Euro\nGBP - British Pound\n\nDiscardApply changes",
1378
1378
  "category": "Templates",
1379
1379
  "section": "Forms",
1380
1380
  "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1384,7 +1384,7 @@
1384
1384
  "title": "Stats blocks",
1385
1385
  "lead": null,
1386
1386
  "summary": "Stats page",
1387
- "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1472 units\n\n12%from last month\n\nOpen orders\n78\n\n5%from last month\n\nIn transit\n18\n\n-3%from last month\n\nIssues\n6\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
1387
+ "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n991 units\n\n12%from last month\n\nOpen orders\n76\n\n5%from last month\n\nIn transit\n22\n\n-3%from last month\n\nIssues\n10\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\n25M +\nOrders delivered\n\n99.99%\nTotal uptime\n\n4.8\nCustomer score\nOrders delivered\n25M +\n\nTotal uptime\n99.99%\n\nCustomer score\n4.8\nOrders processed\n72,678\nfrom 68,345\n\n11.5%\n\nOpen rate\n43.6\nfrom 41.6\n\n3.1%\n\nError rate\n3.6\nfrom 2.4\n\n2.01%\nSeptember, 2025\nRequests sent\n185\n\nNumber of data brokers removal requests have been sent to.\n\nRequests in progress\n185\n\nNumber of data brokers that have started processing our removal requests.\n\nRequests completed\n0\n\nNumber of data brokers that checked and confirmed that they are now not holding your data.\nLorem ipsum dolor\n\nJanuaryFebruaryMarchAprilMayJune\n\nLorem ipsum dolor\n\nStatusLocationETA\n\nIn transit\nHamburg, DE2024-02-02\n\nDelivered\nRotterdam, NL2024-01-29\n\nAwaiting pickup\nWarsaw, PL2024-02-05\n\nCustoms clearance\nAntwerp, BE2024-02-03\n\nTransport ipsum dolor\n\nOn-time delivery\n\nWarehouse efficiency\n\nTruck utilization\n\nFreight cost/km\n\nFuel consumption index\n\n92%\n\n84%\n\n78%\n\n65%\n\n15%",
1388
1388
  "category": "Templates",
1389
1389
  "section": "Content",
1390
1390
  "boost": "Stats blocks templates/stats-blocks #templates/stats-blocks Templates Content"
@@ -1534,7 +1534,7 @@
1534
1534
  "title": "useDebugInfo",
1535
1535
  "lead": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
1536
1536
  "summary": "The useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.",
1537
- "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1765543185577\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
1537
+ "searchText": "useDebugInfo\nThe useDebugInfo hook allows to return detailed information about render count, render time and changed component props and also to print these information to the console.\nuseDebugInfo\nComponent props:isToggled: false\ncount: 0\n\nDebug Info:{\n\"renderCount\": 1,\n\"changedProps\": {},\n\"timeSinceLastRender\": 0,\n\"lastRenderTimestamp\": 1765811030338\n}\n\nToggleIncrement\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| component | String | — | The name of the component that will be printed out. |\n| props | Object | — | The component props that will be checked for changed values. |",
1538
1538
  "category": "Utilities",
1539
1539
  "section": "UI state & input hooks",
1540
1540
  "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
@@ -1824,7 +1824,7 @@
1824
1824
  "title": "useTableExport",
1825
1825
  "lead": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
1826
1826
  "summary": "The useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.",
1827
- "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1GinaWatsicaLoyal.Feil57@hotmail.com\n2GunnerEbertErika59@hotmail.com\n3CandaceGloverTroy.Lebsack@hotmail.com\n4TommieDibbertLinwood_Anderson33@hotmail.com\n5LacyRippinAbby98@yahoo.com\n6EnaOsinskiCyril28@hotmail.com\n7EthylNolanTroy.Jast22@hotmail.com\n8NatashaAuerBeth.Huel78@hotmail.com\n9AftonLefflerTheresa.Witting@hotmail.com\n10ChaseKuhlmanNapoleon6@gmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
1827
+ "searchText": "useTableExport\nThe useTableExport hook provides a simple and reusable way to export tabular data as a downloadable CSV file in React applications. It supports custom delimiters, UTF-8 BOM for Excel compatibility, and column header mapping for more readable exports. This is especially useful for tables with user-facing data that may need to be downloaded for offline analysis or reporting.\nuseTableExport\nExport data\n\nIdFirst nameLast nameE-mail\n\n1AlbertaBartonFanny_Bernhard78@hotmail.com\n2ZeldaGibsonJarvis87@gmail.com\n3DomenicaArmstrongKyleigh56@gmail.com\n4VanTreutelCristian70@yahoo.com\n5OfeliaSchuppeStewart10@gmail.com\n6ArlieHeaneyRetta30@yahoo.com\n7MargaritaSipesJaylen.Kunde@hotmail.com\n8MarcosLarsonCora.Wisoky25@hotmail.com\n9StefanHettingerLeonora5@gmail.com\n10AnnettaChamplinSylvia_Kshlerin@hotmail.com\n### Options of the returned exportToCSV function\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| data | T[] | — | Array of data objects to export. Each object represents one row in the table. |\n| fileName | string | export.csv | Optional name for the exported file. |\n| columns | (keyof T)[] | — | Optional list of object keys to export as columns. If omitted, all keys from the first row will be used. |\n| headers | Partial<Record<keyof T, string| — | Optional map of column keys to custom header labels. Example: { firstName: 'First Name' } |\n| delimiter | string | , | Optional delimiter to use between values in the CSV. You can use \";\" or \"\\t\" for other formats. |\n| withBom | boolean | true | Whether to include UTF-8 BOM (useful for Excel). |",
1828
1828
  "category": "Utilities",
1829
1829
  "section": "Table & data hooks",
1830
1830
  "boost": "useTableExport utilities/useTableExport #utilities/useTableExport Utilities Table & data hooks"
@@ -1834,7 +1834,7 @@
1834
1834
  "title": "useTableSelection",
1835
1835
  "lead": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
1836
1836
  "summary": "The useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.",
1837
- "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1MaiaWildermanDemarcus.Rogahn@yahoo.com\n2MaeveWiegandBrandy_Abernathy77@yahoo.com\n3StephaniaShieldsDoris11@hotmail.com\n4TyrellParkerAmara.Pollich@gmail.com\n5JuniorDoyleAgnes.Lakin56@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1MalikaWittingEttie.Rempel61@gmail.com\n\n2MariahConsidineDayna_Schowalter33@hotmail.com\n\n3DorthaConnellyCarey5@hotmail.com\n\n4JamarJohnsonKaya42@gmail.com\n\n5RutheReynoldsLila.Jakubowski@hotmail.com\n\n6MadisonLegrosAileen.Hills75@hotmail.com\n\n7EricaKesslerSilas70@yahoo.com\n\n8MontanaOkunevaNikki_Hagenes@gmail.com\n\n9RubyeSteuberAlessandra.Feest70@yahoo.com\n\n10WinifredO'KonSebastian.Wuckert25@hotmail.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
1837
+ "searchText": "useTableSelection\nThe useTableSelection hook simplifies the implementation of selection behavior in tables for single selection and multi-selection use cases. It’s especially useful for large datasets, as it optimizes performance by preventing unnecessary re-renders of all rows.\nuseTableSelection\nNote: , when using a checkbox column for multi-selection and a column for some action buttons, make sure to apply the classes \"table-checkbox\" and \"table-action\" to the respective row \"td\" elements. The latter class automatically stops event propagation, preventing the row from being selected when an action button is clicked.\nActive row\n-\n\nIdFirst nameLast nameE-mail\n\n1KarleeSchambergerBradley_Quigley@hotmail.com\n2LornaGulgowskiKaelyn_Durgan@hotmail.com\n3KevenNicolasTimmy59@hotmail.com\n4BusterNikolausAddison_Renner@hotmail.com\n5StefanPaucekSincere49@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |\nMulti-selection\nActive row\n-\n\nSelected rows\n4\n\nDeselect all ItemsSelect some rows\n\nIdFirst nameLast nameE-mail\n\n1EudoraBeckerAnderson_Christiansen80@hotmail.com\n\n2GenevieveToyNicklaus83@gmail.com\n\n3ForestMacGyverFelix.Herzog84@hotmail.com\n\n4IsidroNikolausCorine_Hane@hotmail.com\n\n5LaurenMayerGreg_Breitenberg@yahoo.com\n\n6KarleyHermanKiara48@yahoo.com\n\n7LondonLangoshBrandt8@hotmail.com\n\n8BlancheFraneckiTerence_Reinger83@yahoo.com\n\n9DomenicaWeimannIsidro_Thiel40@gmail.com\n\n10KorbinSchinnerLuciano_Hackett16@yahoo.com\n### Options for the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableData | TData[] | — | The array of data items to be displayed in the table. The hook uses this to determine all possible row IDs for \"select all\" functionality. |\n| idKey | keyof TData | — | The key in TData objects that serves as the unique identifier for each row. |\n| initialSelectedRowIds | string[] | — | Optional array of row IDs that should be initially selected. |\n| initialActiveRowId | string | — | Optional ID of the row that should be initially marked as active. |\n| checkboxQuerySelector | string | '.table-checkbox input[type=\"checkbox\"]' | Optional CSS query selector to find the checkbox input element within each table row. |\n| dataAttributeName | string | data-id | Optional name of the HTML data attribute on <trelements that holds the unique row ID. |\n| ref | RefObject<HTMLTableElement| — | Optional external ref for the table element. If not provided, the hook creates its own. Useful if the parent component needs direct access to the table DOM element for other purposes. |\n### Return value of the useTableSelection hook\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| tableRef | RefObject<HTMLTableElement| — | React ref attached to the <tableHTML element. Ensure this ref is assigned to your table element to enable DOM manipulations. |\n| selectedRowIds | string[] | — | An array of strings, where each string is the ID of a currently selected row. |\n| setSelectedRowIds | (rowIds: string[]) =void | — | Setter function to change selected rows from the outside in a controlled manner. |\n| activeRowId | string | — | The ID of the currently active row. An empty string signifies no row is active. |\n| setActiveRowId | (activeRowId: string \\| undefined) =void | — | Setter function to change the active row from the outside in a controlled manner. Use this to deselect an active row. |\n| onSelection | (event: React.MouseEvent<HTMLElement) =void | — | Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes). It expects the clicked element to be within a <trthat has the specified dataAttributeName. Manages the selection state of a single row. |\n| onActiveRowChange | (event: React.MouseEvent<HTMLTableRowElement) =void | — | Callback handler to be attached to the click event of table row (<tr) elements.Manages the active row state. |\n| onToggleAll | (shouldSelect: boolean) =void | — | Callback handler to select or deselect all rows. If \"shouldSelect\" is set to true, all rows in tableData will be selected; otherwise, all selections will be cleared. |\n| updateRowSelection | () =void | — | Function to update row selection and active highlighting. This is useful when the row data changes due to a search value or any other filter. |\n| hasSelection | boolean | — | A boolean indicating whether at least one row is currently selected. |\n| isAllSelected | boolean | — | A boolean indicating whether all rows in the current tableData are selected. |",
1838
1838
  "category": "Utilities",
1839
1839
  "section": "Table & data hooks",
1840
1840
  "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"