@rio-cloud/uikit-mcp 1.1.6 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/dist/doc-metadata.json +18 -18
  2. package/dist/docs/components/accentBar.md +1 -1
  3. package/dist/docs/components/activity.md +1 -1
  4. package/dist/docs/components/animatedNumber.md +2 -2
  5. package/dist/docs/components/animatedTextReveal.md +6 -6
  6. package/dist/docs/components/animations.md +30 -30
  7. package/dist/docs/components/appHeader.md +1 -1
  8. package/dist/docs/components/appLayout.md +77 -60
  9. package/dist/docs/components/appNavigationBar.md +1 -1
  10. package/dist/docs/components/areaCharts.md +4 -4
  11. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  12. package/dist/docs/components/assetTree.md +143 -337
  13. package/dist/docs/components/autosuggests.md +1 -1
  14. package/dist/docs/components/avatar.md +1 -1
  15. package/dist/docs/components/banner.md +2 -2
  16. package/dist/docs/components/barCharts.md +13 -13
  17. package/dist/docs/components/barList.md +10 -10
  18. package/dist/docs/components/basicMap.md +1 -1
  19. package/dist/docs/components/bottomSheet.md +1 -1
  20. package/dist/docs/components/button.md +1 -1
  21. package/dist/docs/components/buttonToolbar.md +1 -1
  22. package/dist/docs/components/calendarStripe.md +1 -9
  23. package/dist/docs/components/card.md +1 -1
  24. package/dist/docs/components/carousel.md +1 -1
  25. package/dist/docs/components/chartColors.md +1 -1
  26. package/dist/docs/components/chartsGettingStarted.md +1 -1
  27. package/dist/docs/components/chat.md +2 -2
  28. package/dist/docs/components/checkbox.md +1 -1
  29. package/dist/docs/components/circularProgress.md +6 -6
  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 +1 -1
  34. package/dist/docs/components/dataTabs.md +9 -9
  35. package/dist/docs/components/datepickers.md +5 -5
  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 +4353 -4398
  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/groupedItemList.md +1 -1
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +1 -1
  50. package/dist/docs/components/labeledElement.md +1 -1
  51. package/dist/docs/components/licensePlate.md +1 -1
  52. package/dist/docs/components/lineCharts.md +4 -4
  53. package/dist/docs/components/listMenu.md +1 -1
  54. package/dist/docs/components/loadMore.md +1 -1
  55. package/dist/docs/components/mainNavigation.md +1 -1
  56. package/dist/docs/components/mapCircle.md +1 -1
  57. package/dist/docs/components/mapCluster.md +1 -1
  58. package/dist/docs/components/mapContext.md +1 -1
  59. package/dist/docs/components/mapDraggableMarker.md +1 -1
  60. package/dist/docs/components/mapGettingStarted.md +1 -1
  61. package/dist/docs/components/mapInfoBubble.md +1 -1
  62. package/dist/docs/components/mapLayerGroup.md +1 -1
  63. package/dist/docs/components/mapMarker.md +1 -1
  64. package/dist/docs/components/mapPolygon.md +1 -1
  65. package/dist/docs/components/mapRoute.md +1 -1
  66. package/dist/docs/components/mapRouteGenerator.md +1 -1
  67. package/dist/docs/components/mapSettings.md +1 -1
  68. package/dist/docs/components/mapUtils.md +1 -1
  69. package/dist/docs/components/multiselects.md +1 -1
  70. package/dist/docs/components/noData.md +1 -1
  71. package/dist/docs/components/notifications.md +1 -1
  72. package/dist/docs/components/numbercontrol.md +1 -1
  73. package/dist/docs/components/onboarding.md +1 -1
  74. package/dist/docs/components/page.md +1 -1
  75. package/dist/docs/components/pager.md +1 -1
  76. package/dist/docs/components/pieCharts.md +36 -36
  77. package/dist/docs/components/popover.md +1 -1
  78. package/dist/docs/components/position.md +1 -1
  79. package/dist/docs/components/radialBarCharts.md +25 -25
  80. package/dist/docs/components/radioCardGroup.md +1 -1
  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 +1 -1
  88. package/dist/docs/components/saveableInput.md +9 -9
  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/textTruncateMiddle.md +1 -1
  108. package/dist/docs/components/timeline.md +1 -1
  109. package/dist/docs/components/timepicker.md +1 -1
  110. package/dist/docs/components/toggleButton.md +1 -1
  111. package/dist/docs/components/tooltip.md +1 -1
  112. package/dist/docs/components/tracker.md +1 -1
  113. package/dist/docs/components/virtualList.md +79 -76
  114. package/dist/docs/foundations.md +120 -120
  115. package/dist/docs/start/changelog.md +789 -1
  116. package/dist/docs/start/goodtoknow.md +1 -1
  117. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  118. package/dist/docs/start/guidelines/custom-css.md +1 -1
  119. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  120. package/dist/docs/start/guidelines/formatting.md +1 -1
  121. package/dist/docs/start/guidelines/iframe.md +1 -1
  122. package/dist/docs/start/guidelines/obfuscate-data.md +1 -1
  123. package/dist/docs/start/guidelines/print-css.md +1 -1
  124. package/dist/docs/start/guidelines/spinner.md +1 -1
  125. package/dist/docs/start/guidelines/state-in-url.md +1 -1
  126. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  127. package/dist/docs/start/guidelines/writing.md +1 -1
  128. package/dist/docs/start/howto.md +1 -1
  129. package/dist/docs/start/intro.md +1 -1
  130. package/dist/docs/start/responsiveness.md +1 -1
  131. package/dist/docs/templates/common-table.md +11 -11
  132. package/dist/docs/templates/detail-views.md +2 -2
  133. package/dist/docs/templates/expandable-details.md +1 -1
  134. package/dist/docs/templates/feature-cards.md +55 -55
  135. package/dist/docs/templates/form-summary.md +22 -22
  136. package/dist/docs/templates/form-toggle.md +1 -1
  137. package/dist/docs/templates/list-blocks.md +197 -197
  138. package/dist/docs/templates/loading-progress.md +1 -1
  139. package/dist/docs/templates/options-panel.md +1 -1
  140. package/dist/docs/templates/panel-variants.md +1 -1
  141. package/dist/docs/templates/progress-cards.md +1 -1
  142. package/dist/docs/templates/progress-success.md +1 -1
  143. package/dist/docs/templates/settings-form.md +23 -23
  144. package/dist/docs/templates/stats-blocks.md +16 -16
  145. package/dist/docs/templates/table-panel.md +1 -1
  146. package/dist/docs/templates/table-row-animation.md +1 -1
  147. package/dist/docs/templates/usage-cards.md +1 -1
  148. package/dist/docs/utilities/classNames.md +1 -1
  149. package/dist/docs/utilities/deviceUtils.md +1 -1
  150. package/dist/docs/utilities/featureToggles.md +1 -1
  151. package/dist/docs/utilities/fuelTypeUtils.md +1 -1
  152. package/dist/docs/utilities/routeUtils.md +1 -1
  153. package/dist/docs/utilities/useAfterMount.md +1 -1
  154. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  155. package/dist/docs/utilities/useAverage.md +1 -1
  156. package/dist/docs/utilities/useClickOutside.md +1 -1
  157. package/dist/docs/utilities/useClipboard.md +2 -2
  158. package/dist/docs/utilities/useCookies.md +1 -1
  159. package/dist/docs/utilities/useCount.md +1 -1
  160. package/dist/docs/utilities/useDarkMode.md +1 -1
  161. package/dist/docs/utilities/useDebugInfo.md +4 -4
  162. package/dist/docs/utilities/useEffectOnce.md +1 -1
  163. package/dist/docs/utilities/useElapsedTime.md +1 -1
  164. package/dist/docs/utilities/useElementSize.md +1 -1
  165. package/dist/docs/utilities/useEsc.md +1 -1
  166. package/dist/docs/utilities/useEvent.md +1 -1
  167. package/dist/docs/utilities/useFocusTrap.md +1 -1
  168. package/dist/docs/utilities/useFullscreen.md +1 -1
  169. package/dist/docs/utilities/useHover.md +1 -1
  170. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  171. package/dist/docs/utilities/useInterval.md +1 -1
  172. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  173. package/dist/docs/utilities/useKey.md +1 -1
  174. package/dist/docs/utilities/useLocalStorage.md +1 -1
  175. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  176. package/dist/docs/utilities/useMax.md +1 -1
  177. package/dist/docs/utilities/useMin.md +1 -1
  178. package/dist/docs/utilities/useMutationObserver.md +1 -1
  179. package/dist/docs/utilities/useOnScreen.md +1 -1
  180. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  181. package/dist/docs/utilities/usePostMessage.md +1 -1
  182. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  183. package/dist/docs/utilities/usePrevious.md +1 -1
  184. package/dist/docs/utilities/useResizeObserver.md +1 -1
  185. package/dist/docs/utilities/useRioCookieConsent.md +1 -1
  186. package/dist/docs/utilities/useScrollPosition.md +1 -1
  187. package/dist/docs/utilities/useSearch.md +1 -1
  188. package/dist/docs/utilities/useSearchHighlight.md +1 -1
  189. package/dist/docs/utilities/useSorting.md +1 -1
  190. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  191. package/dist/docs/utilities/useSum.md +1 -1
  192. package/dist/docs/utilities/useTableExport.md +51 -51
  193. package/dist/docs/utilities/useTableSelection.md +87 -87
  194. package/dist/docs/utilities/useTimeout.md +1 -1
  195. package/dist/docs/utilities/useToggle.md +1 -1
  196. package/dist/docs/utilities/useUrlState.md +1 -1
  197. package/dist/docs/utilities/useWindowResize.md +1 -1
  198. package/dist/index.mjs +1 -1
  199. package/dist/version.json +1 -1
  200. 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 FAATTXJEAOK\n\nItem BR7CAEFSQE\n\nItem JZMO19RZFVI\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 2KM3LW7UIU\n\nItem AWT2UKFGLD\n\nItem UYIKHVVYQ2G\n\nItem IS8QR1Q48O\n\nItem 6CS9IVYH85\n\nItem QMDZFXEZVC",
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 OJZVGQA3W1\n\nItem O2YWLCZCY8\n\nItem VAJA7ROY1W\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 IMGUJ26458\n\nItem SFU5JE7VRI\n\nItem NLLNGG2GSBG\n\nItem XNU98Q531P\n\nItem 1L6E76Z95QI\n\nItem ERTDUB2X0J",
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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n2\n5\n4\n3\n\nAsset Group8\nVehicle-2026Asset 1005\nVehicle-2510Asset 1013\nVehicle-3097Asset 1000\nVehicle-4057Asset 1006\nVehicle-5409Asset 1009\nVehicle-6612Asset 1012\nVehicle-8140Asset 1011\nVehicle-8303Asset 1007\n\nUngrouped6\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |\nComplete example with all components\nRIO Service\n\nNavigation 1\nNavigation 2\nNavigation 3\n\n4\n\n4\n3\n1\n3\n\nAsset Group9\nVehicle-1343Asset 1010\nVehicle-2513Asset 1002\nVehicle-2575Asset 1005\nVehicle-2741Asset 1006\nVehicle-6386Asset 1000\nVehicle-6560Asset 1001\nVehicle-6904Asset 1008\nVehicle-7768Asset 1009\nVehicle-9357Asset 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 | MutableRefObject<HTMLDivElement \\| null| — | 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| className | string | — | Additional class names that are added to the respective component |\n### ApplicationLayoutBody\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |\n| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |\n| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |\n| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |\n| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |\n| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |\n| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |\n| innerClassName | string | — | Additional class names that are added to the inner module-content component. |\n| className | string | — | Additional class names that are added to the respective 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| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |\n| buttonAlignment | ButtonAlignmentLeft \\| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |\n### ApplicationLayoutBodyBanner\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| textColor | string | text-color-white | One of the text-color utility classes. |\n| backgroundColor | string | bg-primary | One of the bg-color utility classes. |\n| isSticky | boolean | false | Allows sticky banner while scrolling. |\n| className | string | — | Additional class names that are added to the respective component. |",
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": null,
106
106
  "summary": "Filter",
107
- "searchText": "AssetTree\nAssetTree\nFilter\n\n5670\n4\n\nGroup - Aaron Shanahan - 47639\n\nGroup - Abdiel Reynolds - 902710\n\nGroup - Abigale Halvorson-Spinka - 310410\n\nGroup - Abner Considine - 36217\n\nGroup - Abraham Huel - 668719\n\nGroup - Abraham Wintheiser - 24628\n\nGroup - Adalberto Hackett - 112014\n\nGroup - Afton Bins - 97177\n\nGroup - Agnes Botsford - 737111\n\nGroup - Agnes Padberg - 21789\n\nGroup - Al Wuckert DVM - 880713\n\nGroup - Alexanne Carroll - 934910\n\nGroup - Alfonso Ankunding - 245010\n\nGroup - Alice Casper - 956411\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n7\n10\n8\n5\n\nMy Empty Group4\n\nTruck Group East1\n\nTruck Group North5\nN18-G229 / M-AN 1019\nN18-G262 / M-AN 1005\nN18-G401 / M-AN 1001\nN18-G797 / M-AN 1024\nN18-G976 / M-AN 1004\n\nTruck Group South3\n\nTruck Group West12\n\nAll my unassigned Trucks5\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\n3\n3\n7\n7\n\n5\n5\n2\n4\n4\n\nMixed Vehicles11\nVehicle-1411Debug: lpg\nVehicle-3190Debug: diesel\nVehicle-3484Debug: heavy_fuel_oil\nVehicle-3817Debug: lpg\nVehicle-4527Debug: dual_fuel_diesel_cng\nVehicle-4730Debug: dual_fuel_diesel_cng\nVehicle-4965Debug: hydrogen\nVehicle-5906Debug: dual_fuel_diesel_cng\nVehicle-6102Debug: cng\nVehicle-7127Debug: cng\nVehicle-7953Debug: electric\n\nUngrouped9\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nGroup 017\n\nGroup 027\n\nGroup 036\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 017\n\nFolder 027\n\nFolder 033\n\nFolder 043\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 019\n\nFolder 023\n\nFolder 032\n\nFolder 046\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |",
107
+ "searchText": "AssetTree\nAssetTree\nFilter\n\n5143\n4\n\nGroup - Aaron Waters - 73367\n\nGroup - Abagail Stoltenberg - 913613\n\nGroup - Abelardo Considine DVM - 62765\n\nGroup - Abraham Senger PhD - 132716\n\nGroup - Alberta Veum - 57937\n\nGroup - Alek Gulgowski - 954312\n\nGroup - Alena Welch - 15629\n\nGroup - Alessandro Blanda - 38079\n\nGroup - Alexandra Hyatt I - 382820\n\nGroup - Alison Jerde - 909211\n\nGroup - Alta Schuppe - 900418\n\nGroup - Alvin Wolf - 135517\n\nGroup - Amber Hodkiewicz V - 132312\n\nGroup - Amber O'Reilly - 345011\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with single select\n5\n8\n8\n9\n\nMy Empty Group7\n\nTruck Group East3\n\nTruck Group North2\nN18-G225 / M-AN 1027\nN18-G660 / M-AN 1019\n\nTruck Group South8\n\nTruck Group West7\n\nAll my unassigned Trucks3\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nAssetTree with multiple asset filter in summary\n7\n5\n5\n3\n\n6\n5\n2\n5\n2\n\nMixed Vehicles4\nVehicle-2107Debug: hydrogen\nVehicle-2123Debug: cng\nVehicle-7629Debug: diesel\nVehicle-8638Debug: hydrogen\n\nUngrouped16\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree with custom icons\nGroup 0110\n\nGroup 027\n\nGroup 033\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| bordered | boolean | false | Defines whether the component has a border or not. |\n| width | 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 | (isOpen: boolean) =void | () ={} | 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 | (selectedCategoryId: string) =void | () ={} | Callback for handling change of category. |\n| onResizeEnd | VoidFunction | () ={} | Callback for when the resize is done. |\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### 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 \\| React.ReactNode | — | 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 | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | (newValue: string, event: React.ChangeEvent \\| React.MouseEvent) =void | () ={} | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | A custom value to be shown in the counter. |\n### TreeOption\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| isChecked | boolean | false | Defines whether the option is set. |\n| onChange | (event: React.MouseEvent<HTMLDivElement) =void | — | Callback triggered when option is selected. |\n| label | string \\| React.ReactNode | — | The label for the option. |\n| className | string | — | Additional classes added to the wrapping element. |\nTree\nTree with header and search\n\n20\n\nFolder 016\n\nFolder 023\n\nFolder 037\n\nFolder 044\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 017\n\nFolder 022\n\nFolder 035\n\nFolder 046\n\nSelected items:\n\nExpanded folders:\n### Tree\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| groups | TreeGroup[] | [] | 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 \\| React.ReactNode | — | The name of a group. |\n| └position | 'last' | — | Can be set to \"last\" to enforce the last position in the tree. |\n| └disabled | boolean | — | Disallows the selection of the group itself. |\n| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └className | string | — | Additional classes added to the group element. |\n| items | TreeItem[] | [] | The list of items. |\n| └id | string | — | A unique identifier of an item. |\n| └name | string \\| TreeItemName | — | 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 \\| React.ReactNode | — | The subline of an item. This can e used to show additional information for that 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| └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. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |\n| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |\n| └pairIcon | string \\| null \\| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |\n| └groupIds | string[] | [] | List of group ids the items is associated with. |\n| └className | string | — | Additional classes added to the item element. |\n| selectedGroups | string[] | [] | List of selected group ids. |\n| selectedItems | string[] | [] | List of selected item ids. |\n| onSelectionChange | ({ items, groups }: SelectionChangeResponse) =void | — | 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 | (value: string) =void | — | Callback for when the search value changes. |\n| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |\n| summary | React.ReactNode | — | 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| 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| 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 | React.ReactElement | — | 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 | string[] | — | List of group ids which are expanded. |\n| onExpandGroupsChange | (newExpandedGroups: string[]) =void | — | Callback function triggered when a group expands or collapses. |\n| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |\n| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |\n| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |\n| disableAnimation | boolean | false | Disables animation when filtering or using search |\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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | 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 | TreeSummaryCounts | — | 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| └car | number | — | The amount of cars |\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 | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |\n| enableActivity | boolean | false | 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 | (type: string) =void | — | 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. |\n| value | string \\| React.ReactNode \\| number | — | 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\nTuesday\n24 February 2026\n\nWednesday\n25 February 2026\n\nThursday\n26 February 2026\n\nFriday\n27 February 2026\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| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |\nFeb\n24\n2026\n\nFeb\n25\n2026\n\nFeb\n26\n2026\n\nFeb\n27\n2026\n\nFeb\n28\n2026\n\nMar\n1\n2026\n\nMar\n2\n2026\n\nMar\n3\n2026\n\nMar\n4\n2026\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| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days 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\n24 February 2026\n\nWednesday\n25 February 2026\n\nThursday\n26 February 2026\n\nFriday\n27 February 2026\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| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |\nFeb\n24\n2026\n\nFeb\n25\n2026\n\nFeb\n26\n2026\n\nFeb\n27\n2026\n\nFeb\n28\n2026\n\nMar\n1\n2026\n\nMar\n2\n2026\n\nMar\n3\n2026\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| renderDay | (date: Date) =React.JSX.Element | — | A function that renders each individual day to be displayed. |\n| skipWeekends | boolean | false | Defines whether the days for the weekends are included. |\n| startDate | Date | the current date | The date of the first day that are rendered. |\n| onNextClick | (newStartDate: Date) =void | — | Callback function for when the next button is clicked. |\n| onPreviousClick | (newStartDate: Date) =void | — | Callback function for when the previous button is clicked. |\n| buttonClassName | string | — | Additional classes set to the navigation buttons. |\n| className | string | — | Additional classes set to the calendar element. |\n| daysWrapperClassName | string | — | Additional classes set to the days wrapper element. |\n| dayWrapperClassName | string | — | Additional classes set to the days wrapper element. |",
208
208
  "category": "Components",
209
209
  "section": "Misc",
210
210
  "boost": "CalendarStripe components/calendarStripe #components/calendarStripe Components Misc"
@@ -334,7 +334,7 @@
334
334
  "title": "DatePicker",
335
335
  "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.",
336
336
  "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.",
337
- "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‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nOnly month\n\n‹2026›\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‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n02:41\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nTo:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\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‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nReset\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)",
337
+ "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‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nNo timeFormat: YYYY-MM-DD\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nOnly month\n\n‹2026›\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‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nWith min-width\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and mandatory value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nClearableInput and optional value\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nDatePicker with wrapped error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nThis is an error message\n\nWith clearable and error feedback\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n04:48\n\nThis is an error message\n\nUsage of two DatePicker as a date range\nFrom:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nTo:\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nUnspecified localeFormat: MM/DD/YYYY\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\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‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00 AM\n\nReset\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)",
338
338
  "category": "Components",
339
339
  "section": "Pickers",
340
340
  "boost": "DatePicker components/datepickers #components/datepickers Components Pickers"
@@ -364,7 +364,7 @@
364
364
  "title": "Dropdowns",
365
365
  "lead": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
366
366
  "summary": "Dropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.",
367
- "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\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 \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | '' | Displayed button title. |\n| items | MenuItem[] | — | Items to display in the dropdown sub menu. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\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 \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\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 \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Sagittis dui condimentum ac lorem aliquam ipsum consectetur\n\n2Integer Interdum consectetur consectetur pharetra Ut tortor\n\n3Libero enim rutrum sit in Ut Integer\n\n4Vivamus ante iaculis. massa, ut elementum elit. dolor eget Interdum lorem eget consectetur ipsum\n\n5Libero semper volutpat fringilla ante libero consectetur massa ut viverra\n\n6Nec sagittis metus In sit semper condimentum ac semper. scelerisque sem. iaculis. semper. molestie rutrum\n\n7Volutpat pharetra eget in Integer ante\n\n8Semper elit. Mauris volutpat vel sem. purus tortor finibus posuere in,\n\n9Condimentum Ut fames elementum dui velit. metus ac\n\n10Ac efficitur amet, elementum scelerisque iaculis. Interdum ante pretium et finibus orci\n\n11Ipsum massa, posuere Mauris nunc metus dui posuere condimentum pharetra Vivamus enim felis. quis, aliquam\n\n12Adipiscing libero ac efficitur orci, scelerisque nunc in, in tortor Sed rutrum et aliquam\n\n13Vitae ante Sed condimentum velit. ligula fames Duis dui Integer posuere\n\n14Faucibus. in ac In rutrum\n\n15Metus ante Ut libero ligula consectetur Integer sit\n\n16Hendrerit finibus ac in, fringilla quis,\n\n17Semper. in sit fames viverra\n\n18Sagittis ut Interdum in velit. rutrum vel Ut ante efficitur semper. ligula viverra elit.\n\n19Ante enim et ac In\n\n20Finibus amet, quis, scelerisque amet, sagittis massa ut ante efficitur volutpat ut massa\n\n21In neque. ac ac faucibus. elit. ante ac eget primis est\n\n22Massa, dui Sed nec pretium sagittis adipiscing massa enim faucibus. in,\n\n23Fusce in dolor massa, adipiscing massa,\n\n24Vitae et ante consectetur fringilla sit\n\n25Semper dui eget dui nunc ac efficitur dolor orci ante malesuada libero\n\n26Massa, finibus elit. hendrerit consectetur\n\n27Felis. tortor tincidunt. ac molestie aliquam condimentum velit. neque. primis in nec ante\n\n28Fringilla elementum iaculis.\nLorem ac velit. condimentum vel vel Sed elementum adipiscing est\n\n29Hendrerit neque. condimentum Sed efficitur Duis Fusce fringilla in,\n\n30Pretium est in massa in fringilla pharetra malesuada rutrum faucibus.\n\n31Nec sem. efficitur Interdum massa ipsum ante felis. posuere eget est dolor et molestie\n\n32Ac viverra primis viverra Ut pharetra\n\n33Pretium ut finibus velit. enim\n\n34Vel tincidunt. et est orci et eget nunc pretium eget enim adipiscing adipiscing finibus consectetur\n\n35Hendrerit ligula elit. fringilla iaculis. malesuada posuere fames elit. ante tortor posuere sit posuere bibendum,\n\n36Ipsum ut amet, ante viverra elit. ante vitae ac\n\n37Ante sit metus faucibus. pharetra fringilla ipsum sit ante in amet,\n\n38Pretium iaculis. neque. in, Interdum malesuada purus felis. In in dui Sed felis. sagittis\n\n39Rutrum ac libero ante purus Mauris sit volutpat ac\n\n40Felis. nunc ut Vivamus consectetur metus\n\n41Ipsum et aliquam efficitur tortor Sed malesuada\n\n42Consectetur pretium tincidunt. rutrum pharetra elit. faucibus. molestie volutpat semper. malesuada in\n\n43In eget velit. viverra fames ipsum malesuada ante\n\n44Sagittis efficitur finibus et Mauris Duis iaculis. consectetur condimentum\n\n45Fringilla viverra Fusce condimentum In\n\n46Tortor eget in ac fringilla vitae in\n\n47Sed eget ipsum efficitur consectetur adipiscing Ut nec\n\n48Condimentum vitae ipsum tortor orci, nunc Interdum\n\n49Ac molestie dui Integer nunc elit.\n\n50Libero elit. tincidunt. Mauris elementum posuere elementum metus et Fusce efficitur purus\n\n51Sem. hendrerit scelerisque rutrum finibus metus adipiscing orci, ligula\n\n52In faucibus. ante Duis consectetur viverra elit.\n\n53Elit. tortor rutrum tincidunt. Integer consectetur iaculis. in nunc in efficitur\n\n54Rutrum ac ante purus purus scelerisque et ante enim amet,\n\n55Fusce Duis ante hendrerit vel iaculis. elit. pretium\n\n56Orci in in amet, orci nunc ante\n\n57Enim vitae ut in, enim felis. nec viverra semper. pretium\n\n58Viverra ac efficitur nec massa, purus in pretium ut consectetur eget nec volutpat\n\n59Vitae libero ipsum ac Ut in eget faucibus. ligula nunc ac ligula\n\n60Ante ac ac fames ac ut ipsum in elit. in orci ipsum\n\n61Nec scelerisque semper. ante efficitur ac Ut ut ac elit. quis, primis Ut amet, condimentum\n\n62Sem. in et malesuada lorem ac posuere nunc sagittis In aliquam purus ac est\n\n63In, orci ipsum tortor Vivamus condimentum vel in, ante condimentum in,\n\n64Massa elementum ante ac adipiscing condimentum\n\n65Sem. metus ac faucibus. elit. eget ipsum\nLorem in metus Interdum\n\n66Malesuada sit ipsum semper elit. eget sagittis elit. ligula in sem. massa nec libero\n\n67Tortor ac Fusce Integer elementum elit. volutpat ut\n\n68Ante In pharetra fames Integer tincidunt. rutrum et nunc nunc rutrum ac\n\n69Semper in primis dolor fames\n\n70Eget efficitur elit. enim consectetur\n\n71Malesuada fames tincidunt. ipsum faucibus. consectetur ac est massa efficitur condimentum In velit.\n\n72Finibus dolor efficitur ante orci adipiscing aliquam\n\n73Semper. in felis. nec bibendum, et et in, purus elit. ut Ut elit. quis,\n\n74Ac aliquam enim ligula vel molestie volutpat amet, Fusce elit. elementum rutrum metus lorem\n\n75Ipsum ut ante ligula purus In pharetra condimentum Interdum ut enim consectetur ac finibus\n\n76Lorem massa, massa, massa, amet, ut\n\n77Ac neque. est ipsum adipiscing neque. dui neque.\n\n78Viverra rutrum\nLorem nec in rutrum elementum Fusce bibendum, dui tincidunt. Ut tortor est\n\n79Ante ante tincidunt. finibus In sagittis condimentum pharetra\n\n80Fames Ut ante massa, fames efficitur ut sit fames faucibus. In ut\n\n81Mauris dui Fusce molestie Fusce vitae Ut dui ac iaculis.\n\n82Ante purus scelerisque purus massa lorem Fusce enim quis, iaculis. neque. posuere semper orci\n\n83Iaculis. Integer nec Duis massa nunc\n\n84Ut semper velit. orci, fringilla semper sagittis elementum\n\n85In Integer semper faucibus. consectetur est consectetur bibendum, orci, finibus velit. ipsum\nLorem iaculis.\n\n86Et aliquam nunc faucibus.\nLorem ut eget efficitur ipsum Interdum in et\n\n87Ante\nLorem semper consectetur primis sem. in viverra neque. orci,\n\n88In ut velit. In nec ipsum pretium iaculis. felis. purus purus nec\n\n89Quis, pretium vel aliquam primis felis. est in, Duis ante\n\n90Semper hendrerit sem. molestie elit. ante sem. dui\n\n91Ligula In enim efficitur dui tortor fames elit. volutpat in, eget iaculis. pretium\n\n92Consectetur fringilla viverra ac sem. massa, fames sit volutpat In\n\n93Fringilla ipsum semper lorem amet, in massa, Integer ligula ac Mauris dui\n\n94\nLorem Vivamus neque. tortor ante amet, Sed finibus malesuada viverra tortor ac\n\n95Primis malesuada in ut enim Sed faucibus. efficitur et hendrerit massa\n\n96Dolor in Ut Fusce amet, fringilla tincidunt. et semper.\nLorem ac hendrerit Duis elit. libero\n\n97Hendrerit dolor ac in fames elit. quis, consectetur ipsum\n\n98Neque. Ut semper. ante molestie et ac et pharetra\n\n99Nunc faucibus. nec massa, eget ac\n\n100Velit. nec viverra ante purus tincidunt. malesuada est posuere\n\n101Molestie consectetur molestie est adipiscing et Sed adipiscing metus\n\n102Eget viverra scelerisque rutrum metus metus est malesuada velit. ligula metus massa\n\n103Massa faucibus. nec enim ante eget posuere pretium Ut nec\n\n104Vivamus hendrerit amet, Fusce Ut bibendum, amet, iaculis. fames In elementum felis. est\n\n105Quis, ut fames iaculis. felis. orci, libero nec hendrerit\n\n106Sed rutrum dui velit. felis. vel\n\n107Bibendum, ante ipsum enim viverra sagittis primis purus efficitur iaculis. ac\n\n108Fringilla eget purus orci Interdum viverra ante orci, in, dolor elit. lorem\n\n109Et ut ac tortor Integer Integer lorem scelerisque Interdum est nec in, in ac iaculis.\n\n110Massa, adipiscing molestie tincidunt. hendrerit rutrum\n\n111Volutpat volutpat Integer Integer sagittis pretium pretium eget aliquam elit. ut Duis quis, fames ante\n\n112Interdum neque. tortor In elementum\nLorem\n\n113Volutpat Ut ante finibus sagittis consectetur eget Mauris Interdum viverra neque. pharetra primis\n\n114Lorem in Duis rutrum sem. In In fringilla\n\n115Faucibus. eget semper et tincidunt. posuere\n\n116Consectetur Sed Duis fringilla Mauris Mauris aliquam Mauris et elit. molestie velit. pretium\n\n117Sit efficitur pharetra eget tortor tincidunt. posuere dui ac efficitur felis.\n\n118Nec fringilla elementum ac metus efficitur\n\n119Posuere quis, et elit. amet, elit. ligula enim adipiscing in,\n\n120Ipsum pretium et orci,\nLorem est viverra in est Sed ante in\n\n121Ut neque. molestie Interdum ac sit posuere ante ante elementum ac Vivamus tortor ante\n\n122Sed in sit ac ante massa molestie condimentum efficitur massa, dui fringilla vel Mauris Mauris\n\n123Malesuada condimentum ipsum efficitur felis. felis. quis,\n\n124Adipiscing eget massa, purus nec libero viverra amet,\n\n125Pretium finibus et ipsum finibus lorem ac elit. primis ac scelerisque ac dolor\n\n126Fringilla libero quis, volutpat sit volutpat nec in in\n\n127Est\nLorem ac molestie posuere Integer viverra est primis adipiscing elit. dui sem. massa,\n\n128Ligula bibendum, Sed in ac in, rutrum Integer quis, felis. ut\n\n129Ac neque. elit. pretium orci, viverra in felis. ante\n\n130Ipsum Ut in Duis orci,\n\n131Duis massa eget est semper et semper. semper hendrerit molestie ipsum\n\n132\nLorem ante ligula et fringilla fringilla scelerisque massa, Mauris\n\n133Elit. adipiscing et hendrerit tincidunt. posuere volutpat massa,\nLorem Fusce primis adipiscing metus libero\n\n134Viverra elementum metus massa fames tincidunt. iaculis. efficitur\n\n135Rutrum Fusce ac efficitur pharetra ac tortor Integer primis in nunc\n\n136Ipsum amet, volutpat sit faucibus. iaculis. elit. metus amet, tortor rutrum\n\n137Est quis, ac in Integer primis lorem adipiscing posuere quis, est eget pretium\n\n138Viverra est in, lorem ac pharetra vitae ac velit. fames faucibus. tortor ac elementum\n\n139Massa, vitae in, Fusce lorem ante\n\n140Vivamus nec libero ac efficitur purus sagittis sem. velit. libero et finibus ac scelerisque\n\n141Semper. ante bibendum, ipsum efficitur consectetur\n\n142In, consectetur volutpat scelerisque ut ante sem.\n\n143Rutrum tortor sagittis tortor felis. Fusce orci amet, Ut adipiscing orci, adipiscing felis.\n\n144Libero dui ac orci, efficitur Fusce efficitur amet, fames\n\n145\nLorem Duis metus hendrerit finibus primis pharetra tortor quis, tincidunt. velit. neque.\n\n146Iaculis. enim ipsum ante vel\n\n147Sed purus Duis felis. in, et consectetur\n\n148Bibendum, dui ac Fusce felis. ante libero\n\n149Semper. nunc Mauris Interdum nec metus elementum consectetur\n\n150Ante elementum fringilla Integer ac Sed ante\n\n151Ut sit semper ligula ut Fusce tincidunt. neque. primis\n\n152Et metus ut vitae Mauris pharetra neque. Sed hendrerit sagittis efficitur nec pretium\n\n153Semper elit. Vivamus bibendum, dolor finibus\n\n154Malesuada eget libero rutrum ac molestie condimentum in pretium\n\n155Aliquam tortor eget molestie pretium Duis molestie ac Mauris et Vivamus bibendum,\n\n156In, efficitur consectetur semper ut ac vel semper\n\n157Et pretium efficitur bibendum, tincidunt. orci, molestie\n\n158Ut ac tortor Fusce in, consectetur dolor elementum hendrerit tortor malesuada\n\n159Ut purus vel malesuada efficitur ipsum\n\n160Integer semper. dui ac scelerisque dolor velit.\nLorem\n\n161In orci, massa, in sem. In ipsum et lorem ante ac\n\n162Ante pharetra est elit. posuere ut Mauris consectetur massa semper. Interdum\nLorem\n\n163Fames elit. dolor et vel nec velit. elit. Fusce fames ac malesuada dui ante posuere\n\n164In consectetur dolor finibus ipsum dolor sit rutrum sit massa, massa tortor\n\n165Purus ac primis fringilla metus aliquam bibendum, massa, ipsum orci,\n\n166Pretium ante in ante sit finibus elementum tortor primis in,\n\n167Ante hendrerit aliquam ipsum volutpat\nLorem posuere orci, in,\n\n168Fusce eget orci orci, tortor scelerisque ipsum elit.\n\n169Felis. ante velit. condimentum molestie posuere In metus\n\n170Fusce dui Fusce rutrum finibus ipsum faucibus. purus lorem\n\n171Orci, ut iaculis. in in Duis et efficitur viverra\n\n172Integer\nLorem scelerisque in, Integer libero sem. elementum faucibus. sem. tincidunt. ac libero\n\n173Consectetur in, iaculis. elit. sagittis ut tortor viverra\n\n174Elit. neque. Duis rutrum orci\n\n175Interdum condimentum Duis viverra posuere fringilla ut sem. amet, fringilla\n\n176Elit. ipsum efficitur ipsum efficitur ante efficitur ante\n\n177Efficitur elementum lorem quis, ipsum fames lorem\n\n178Orci primis viverra dui aliquam\n\n179Molestie vitae efficitur semper. condimentum neque. massa massa efficitur ante Vivamus\n\n180Faucibus. ipsum hendrerit Mauris ipsum amet,\n\n181Velit.\nLorem semper. in elit. ligula ante faucibus. molestie semper. in,\n\n182Purus efficitur ut condimentum Vivamus eget vitae elit. fames\n\n183Scelerisque ligula ut hendrerit felis. in\n\n184Nunc ac fames ante volutpat efficitur pharetra\n\n185Ut Sed orci, sagittis enim molestie\n\n186Et Mauris aliquam condimentum ut consectetur faucibus. nec dolor fames ac ante pharetra\n\n187Ut felis. enim ipsum Ut Duis ut\n\n188Hendrerit massa, Mauris\nLorem ut nunc elementum iaculis. molestie dui In nec elit. primis\n\n189Elementum primis primis in semper Fusce quis, finibus\n\n190Ac ante adipiscing et ut scelerisque scelerisque\n\n191Faucibus. dolor Sed dolor massa\n\n192\nLorem sem. nunc Duis nec rutrum ipsum orci, neque. in posuere elementum ante dolor\n\n193Adipiscing in tincidunt. ipsum et\n\n194Purus condimentum purus et bibendum, purus\n\n195Ipsum eget scelerisque Ut metus ante scelerisque pretium ac adipiscing purus ac condimentum\n\n196Ac Ut primis quis, Interdum elementum elementum ac ante malesuada Interdum in massa, aliquam ac\n\n197Est ut nec\nLorem elit. ipsum nunc et rutrum amet, ac sem.\n\n198Ut consectetur massa, neque. est rutrum Fusce nunc\n\n199Posuere vitae ac semper. metus finibus pharetra volutpat\n\n200Scelerisque Mauris eget ante nunc vel nec Fusce tortor semper. eget Duis semper scelerisque Interdum\n\n201Molestie sem. fames scelerisque neque. orci, quis, consectetur bibendum, Interdum\n\n202\nLorem condimentum sit volutpat in neque. molestie elementum Ut Duis semper. ac\n\n203Bibendum, Interdum lorem et quis, semper dolor consectetur massa aliquam vel metus orci, Duis libero\n\n204Sagittis eget elit. in semper efficitur pretium Ut orci, fames elit. amet, Fusce\n\n205Posuere bibendum, scelerisque purus Ut\n\n206In bibendum, neque. in condimentum elit. est\nLorem pretium condimentum viverra ante viverra\n\n207Ac velit. dolor elementum semper. eget\n\n208Massa in ut fames molestie sagittis pharetra amet, scelerisque Interdum massa, nec\n\n209Hendrerit condimentum vel elit. Duis Duis consectetur elementum pretium\n\n210Eget amet, ante malesuada vitae aliquam sit\n\n211Semper. in efficitur Ut purus primis Fusce et elit.\n\n212Aliquam In Sed libero bibendum, neque. ac faucibus. finibus tortor\nLorem\n\n213Volutpat sagittis tortor eget malesuada\n\n214Velit. orci, felis. ut hendrerit sagittis ac orci in in, In primis ipsum semper sagittis\n\n215Felis. orci Interdum nec consectetur Integer ut ut ut in ante eget\n\n216Molestie enim ante bibendum, enim\n\n217Ac In Ut ligula dolor ut\n\n218Adipiscing sem. felis. elementum iaculis.\n\n219Interdum neque. vel in, tortor vel volutpat ligula ipsum\n\n220Interdum purus libero ante ac orci, nec ipsum orci Ut orci consectetur ligula\n\n221Integer eget condimentum ipsum in sem.\n\n222In, scelerisque semper. ac in\n\n223Sem. sit semper. est Mauris ante adipiscing semper. efficitur ac orci,\n\n224Orci, purus volutpat viverra semper. est ac orci primis rutrum libero sit orci, semper ante\n\n225Integer sit Ut Duis Duis\n\n226Finibus elit. aliquam tortor et\n\n227Massa, Ut finibus vitae et ac\n\n228Sagittis orci eget massa, metus\n\n229In dolor libero efficitur rutrum faucibus. Mauris\n\n230Vivamus ac ac posuere aliquam viverra bibendum,\n\n231Rutrum viverra orci, molestie elit. ut in nec tincidunt. in ante Mauris\n\n232Et finibus Interdum ipsum ipsum sagittis iaculis.\n\n233Dolor malesuada aliquam In massa, quis,\n\n234Ipsum felis. libero ac in, Fusce ac Integer condimentum\n\n235Ut Sed ac dui in Vivamus metus libero vel ipsum elit.\n\n236Hendrerit\nLorem hendrerit ipsum orci Duis elit. ac ut ante tincidunt. consectetur ac nunc et\n\n237Ligula est ac dui amet, semper. in in ac iaculis. Duis est Ut posuere fringilla\n\n238Ut ligula elit. Mauris efficitur massa, semper Interdum elit. Vivamus lorem efficitur adipiscing felis. consectetur\n\n239Ut et consectetur in eget\n\n240Felis. ante tincidunt. quis, bibendum, fames in, amet, ac\n\n241Rutrum quis, felis. quis, purus\n\n242Ac faucibus. enim sit dolor adipiscing Sed sem. Ut iaculis. semper. elit. sagittis\n\n243Ante ligula dui ut in\n\n244In in amet, ac fames ac lorem lorem in, ante eget ac\n\n245Fusce metus libero Duis ipsum et ac Integer\nLorem adipiscing amet, amet, nec\n\n246Efficitur ipsum est quis, vitae\n\n247Velit. tincidunt. efficitur volutpat ut malesuada\n\n248Ante volutpat in dui ut semper. volutpat sit\n\n249In purus malesuada faucibus. fringilla posuere orci purus ac lorem\n\n250Adipiscing pharetra malesuada efficitur primis neque. ac ante\n\n251Primis sit et efficitur tortor ac ac libero Vivamus\n\n252Massa, eget ut eget posuere fringilla primis in In Vivamus bibendum, purus ac\n\n253Finibus semper posuere ipsum velit.\n\n254Enim ac purus Vivamus posuere Integer in volutpat rutrum consectetur massa finibus ante\n\n255Ut in ut efficitur consectetur sem. nec purus condimentum dui\n\n256Duis elit. tincidunt. neque. in massa ligula ligula condimentum vitae ipsum massa, fames rutrum\n\n257Aliquam ut tincidunt. pretium\nLorem est In ante ut\n\n258Ut finibus pretium pharetra bibendum, ipsum molestie pharetra ac et metus in, lorem\nLorem\n\n259Malesuada efficitur consectetur libero dolor molestie viverra velit. malesuada posuere\nLorem Sed\nLorem\n\n260Fringilla quis, consectetur elit.\nLorem malesuada In consectetur in\n\n261Faucibus. ut primis et sit bibendum, faucibus. velit. enim orci elit.\nLorem iaculis.\n\n262Fusce velit. ac velit. adipiscing\nLorem Fusce\n\n263Elit. tortor In hendrerit nunc ipsum posuere nunc in metus amet, ac massa ac ipsum\n\n264Semper ante felis. tincidunt. iaculis. Duis\n\n265Tortor semper vel nec ut\n\n266Ante faucibus. ligula lorem massa, semper enim consectetur hendrerit massa,\n\n267Amet, ipsum fames pretium libero enim fringilla iaculis. scelerisque\n\n268Pretium ante nunc ipsum Vivamus tincidunt. sem. Interdum Fusce volutpat\n\n269Mauris enim fringilla ipsum orci enim massa, lorem eget dui scelerisque efficitur Interdum\nLorem\n\n270Orci, ipsum orci vel fames\n\n271Velit. bibendum, finibus ac elit.\n\n272Mauris iaculis. et finibus ipsum libero bibendum, malesuada sagittis Interdum ante tincidunt. fames ligula\n\n273Velit. velit. faucibus. orci, scelerisque sit felis. libero scelerisque ac ut Sed\n\n274Finibus Vivamus et nunc ligula vel metus purus\n\n275Ut eget orci, rutrum ac neque. hendrerit consectetur Sed eget Fusce et iaculis. velit.\n\n276Mauris enim rutrum elit. ut efficitur eget ac sagittis massa\n\n277Ut ipsum ipsum dolor et scelerisque nec efficitur et ipsum dolor\n\n278Libero primis Vivamus tortor quis, orci, Fusce\n\n279Vivamus Duis ac semper est semper. nec neque.\n\n280Fusce velit. enim elit. posuere elementum massa,\n\n281Velit. Mauris est sem. sit scelerisque ligula est\n\n282Dui In hendrerit ac rutrum amet, ante\n\n283Vel et consectetur ac massa, ac efficitur et velit. libero purus in\n\n284Sed massa, purus dolor massa\n\n285Vitae ante eget consectetur in In ligula consectetur orci sagittis\n\n286Integer volutpat enim Sed dolor viverra\n\n287Quis, sagittis pharetra elementum orci, et\n\n288Elementum bibendum, libero nunc in semper. efficitur semper.\n\n289Vel massa, bibendum, faucibus. sagittis tortor faucibus.\n\n290Efficitur consectetur sem. elementum semper sagittis ut condimentum et\n\n291Ante condimentum ac et fringilla\n\n292Efficitur purus velit. orci, tortor condimentum ut in malesuada amet, dui pharetra eget\n\n293Elit. viverra pretium posuere enim malesuada et ut\n\n294Sagittis Sed scelerisque neque. orci, nunc ac efficitur posuere condimentum viverra nec ac In Vivamus\n\n295Eget orci vitae viverra semper. amet, In nunc volutpat nec nec fringilla condimentum\n\n296Et\nLorem In ac amet, consectetur dolor faucibus. amet, molestie hendrerit ipsum scelerisque\n\n297Enim fames ac neque. ligula malesuada ante elit. ante\n\n298Bibendum, ut volutpat metus ante primis elit. iaculis. rutrum semper. elit. amet, ac efficitur massa\n\n299Mauris Ut elementum dolor in, eget bibendum, dolor adipiscing hendrerit Duis vitae metus eget\n\n300Lorem in in, posuere Duis consectetur eget pretium\n\n301Elementum lorem sem. adipiscing sit finibus efficitur semper ac rutrum ligula semper. vel viverra\n\n302Consectetur nec sagittis ut ipsum consectetur nec Mauris tortor\nLorem in efficitur ante finibus\n\n303Pretium efficitur in, ligula purus Ut ipsum elementum velit. dolor primis\n\n304Quis, in, enim purus consectetur\nLorem eget fringilla finibus dui semper ut\n\n305Massa velit. Integer ac ipsum malesuada massa,\n\n306Malesuada pharetra Ut eget elementum dolor\n\n307Et faucibus. dolor ante est massa, elit. Fusce viverra consectetur ac felis. massa quis, ipsum\n\n308In, ante Ut vitae ipsum sagittis malesuada semper consectetur rutrum lorem ac ac ipsum\n\n309Volutpat Ut ac ligula in ligula In vitae neque. felis. elit. in efficitur\n\n310Mauris in Interdum efficitur nec nec quis, nunc rutrum ante ipsum iaculis. massa semper.\n\n311Ac eget aliquam ac ipsum in condimentum\n\n312Scelerisque et ut nunc ipsum ante ipsum Integer eget fames ipsum\n\n313Dui faucibus. Vivamus ac neque. consectetur ac eget semper. condimentum lorem in, efficitur et ac\n\n314Mauris dolor faucibus. ante aliquam libero tortor Sed In Duis tortor tortor elit. in\n\n315Vel Mauris lorem semper In neque.\n\n316Pharetra molestie sagittis iaculis. sem. elit. felis. lorem\n\n317Iaculis. enim faucibus. pharetra ac in Ut ut nec in\n\n318Eget aliquam dolor consectetur Vivamus In Integer ac\n\n319Consectetur Fusce purus et eget et in condimentum semper posuere semper Vivamus Sed Mauris\n\n320Volutpat aliquam ipsum metus metus sagittis metus orci Interdum eget semper ipsum dui finibus\n\n321Felis. nec viverra In Vivamus vel purus elit. pretium amet, rutrum velit. libero volutpat massa\n\n322Eget elit. hendrerit ligula sagittis viverra consectetur tortor fringilla ac aliquam elementum massa lorem\n\n323Aliquam in ante in hendrerit\n\n324Iaculis. nec sit enim et ut consectetur Duis\n\n325Metus massa viverra dolor est Duis\nLorem consectetur Fusce consectetur posuere finibus\n\n326Integer Mauris scelerisque molestie elit. in ante In orci ligula aliquam\n\n327Efficitur neque. nec Ut in, in ac faucibus. finibus Mauris Sed libero ac eget\n\n328Felis. ac sagittis tincidunt. rutrum tortor Sed eget in, faucibus. Vivamus orci viverra purus Mauris\n\n329Mauris vel dui Duis tincidunt. in faucibus. fames finibus ante enim Vivamus quis, eget\n\n330In consectetur Mauris adipiscing aliquam nunc semper. ut in\n\n331Volutpat pharetra viverra dolor elit. libero\n\n332Eget quis, iaculis. nec dui enim velit. ante posuere\n\n333Ipsum ac condimentum ante Sed purus orci, Sed Sed in, nunc scelerisque\n\n334Efficitur velit. volutpat aliquam Fusce semper. ac\n\n335Purus posuere sagittis eget massa, eget\n\n336Viverra faucibus. bibendum, pretium Duis amet, Fusce posuere Interdum quis, vel Interdum fames metus enim\n\n337Tortor ipsum primis aliquam semper. orci eget\n\n338Consectetur ac scelerisque pretium in ac consectetur\nLorem\n\n339Ipsum hendrerit Mauris primis ante semper. sit nunc et\n\n340Purus Vivamus Duis fames rutrum elit. ligula elit. ut efficitur\n\n341In ac pretium hendrerit fames nec tincidunt. posuere Mauris sit lorem primis Interdum vel In\n\n342Volutpat Integer ligula ligula posuere velit. ipsum bibendum, volutpat consectetur Ut consectetur massa, ut\n\n343Finibus ante ut\nLorem ipsum Fusce orci sit est ante molestie vitae\n\n344Interdum ut fames ut in, hendrerit ligula\n\n345Rutrum ut ut vitae lorem\n\n346Sem. primis purus ligula efficitur\n\n347Neque. enim ante massa efficitur Duis pharetra\n\n348Mauris hendrerit posuere ac efficitur tortor Duis elit. ante semper massa, eget condimentum nunc\n\n349Finibus tortor finibus iaculis. et sem. posuere Mauris faucibus. ligula\n\n350Neque. hendrerit condimentum elit. tincidunt. Fusce\n\n351Ut rutrum ut Integer ut condimentum sem. Duis ut Interdum rutrum\n\n352Tincidunt. iaculis. molestie orci, tincidunt. Duis ac orci et Sed fringilla ante\n\n353Sed lorem viverra ipsum ac\n\n354Integer eget Fusce ac purus sem. aliquam Fusce efficitur efficitur in, elementum\n\n355Est semper. malesuada ac Integer neque. vitae Vivamus semper\n\n356Ligula molestie\nLorem velit. pharetra viverra\n\n357Elementum est Sed ut Duis Mauris ut orci, rutrum rutrum ante efficitur Duis quis,\n\n358Quis, in ac et Mauris efficitur ante Fusce massa, elit. tincidunt. nunc faucibus.\n\n359In fringilla Interdum molestie libero enim elit.\n\n360Rutrum semper. et consectetur purus condimentum volutpat nec sagittis semper pharetra\n\n361Quis, semper scelerisque dolor Ut semper.\n\n362Eget ac molestie ac ipsum fames enim\nLorem nec ut dolor sit\n\n363Ac ligula nec finibus ante\n\n364Ante elit. adipiscing Vivamus bibendum, elit. tortor Interdum orci ac tortor libero neque. eget Ut\n\n365Sagittis Integer consectetur iaculis. metus consectetur Sed in, Vivamus sagittis amet,\n\n366Eget Integer sagittis libero dolor Interdum sem. ac velit. libero eget felis. condimentum\n\n367Primis massa eget dolor est et in\nLorem quis, nunc fringilla felis.\n\n368Elementum Integer semper. nec ante hendrerit ipsum finibus semper. ac viverra Duis\n\n369Ut adipiscing semper Interdum vel consectetur amet, Sed viverra ligula elementum posuere In massa, efficitur\n\n370Et semper. quis, ac lorem\n\n371Pharetra sem. in ut eget Sed fames ut faucibus. pretium semper Fusce elementum ut\n\n372Primis massa, orci, elit. in,\n\n373Ut Mauris enim orci, in, Sed ac ante eget bibendum, consectetur sit neque. scelerisque\n\n374Neque. dolor ante pharetra sagittis in consectetur rutrum hendrerit nec viverra ac scelerisque\n\n375Massa rutrum orci Sed efficitur\n\n376Fames in, ac in ante dui in, iaculis. dolor Duis efficitur eget ipsum ut\n\n377Duis metus fames primis ante aliquam Fusce\n\n378Elementum orci condimentum viverra sem. vel Sed efficitur amet,\n\n379Hendrerit lorem scelerisque massa, ut semper et sagittis in et\n\n380Elementum velit. in, consectetur Integer semper. ipsum in Vivamus molestie\nLorem Vivamus\n\n381Eget lorem malesuada ante faucibus. hendrerit in viverra ac fames\n\n382Bibendum, Ut purus consectetur Fusce\n\n383Efficitur elit. Sed scelerisque in ut\n\n384\nLorem massa, orci, neque. dolor\n\n385Scelerisque Interdum eget ac sagittis Vivamus\nLorem ut tortor\n\n386Integer dolor bibendum, ligula ante condimentum massa, velit. sem.\n\n387Ac pharetra in et sem. nunc vitae molestie enim efficitur Vivamus nunc enim massa, volutpat\n\n388Neque. massa efficitur tortor scelerisque orci adipiscing elit. ac scelerisque posuere hendrerit primis\n\n389Ut ligula dolor eget massa, in ac Fusce ac in enim orci, elit.\n\n390Dui ligula semper bibendum, velit. tincidunt. rutrum iaculis. semper. aliquam libero\n\n391Ante tincidunt. ipsum sem. metus fames neque. Interdum felis. efficitur consectetur molestie nunc amet, massa,\n\n392Ante ac bibendum, ante ipsum nec orci enim in efficitur semper.\n\n393Est elit. quis, in, Duis Duis bibendum, sit massa\n\n394Ut metus in bibendum, in Ut\n\n395Massa, in tortor ante sit elementum ut consectetur\n\n396Eget elit. elit. amet, volutpat ligula faucibus. ut efficitur aliquam\n\n397Ligula et condimentum fames Fusce fames efficitur posuere Fusce ut in\n\n398Malesuada vitae pretium Sed tincidunt. ante pharetra sagittis viverra enim sagittis condimentum semper\n\n399Iaculis. ut bibendum, In tortor adipiscing\n\n400Aliquam dui pretium efficitur finibus aliquam nec velit. eget\n\n401Molestie vitae Interdum orci, efficitur felis. Sed Vivamus condimentum massa, pretium velit. consectetur lorem Sed\n\n402Et tortor efficitur adipiscing vitae fringilla\n\n403Ante Interdum in Duis ut elit.\n\n404Elit. ligula malesuada orci vel efficitur ipsum volutpat ac efficitur Mauris semper. ipsum elit. metus\n\n405Volutpat semper nec Duis viverra sagittis enim semper. ac Sed Vivamus pretium\n\n406Sed neque. orci, adipiscing Ut nec vitae dui ante nunc Ut tortor efficitur\n\n407Ut iaculis. fames et et vitae neque. elit. ut ut\n\n408Est bibendum, sit orci, felis. elit. ac elementum ipsum eget orci, sit quis,\n\n409Pretium Fusce ac Interdum elit.\n\n410Fusce aliquam sem. vitae et elit. lorem lorem\n\n411Est felis. et ipsum Integer enim\n\n412Quis, dolor volutpat est ac pharetra fames vel elit. orci,\n\n413Ut in, in sit Sed libero eget Mauris enim amet, lorem neque.\n\n414Ante metus semper. quis, ac semper ante volutpat rutrum malesuada orci, sem. faucibus. sit\n\n415Ipsum purus iaculis. ac ipsum\n\n416Libero est ac malesuada orci\n\n417Ipsum ut Duis in scelerisque ac faucibus. semper. felis. ipsum adipiscing volutpat metus felis.\n\n418Orci Integer et in molestie ac finibus massa,\n\n419Faucibus. pharetra in elementum neque. vitae efficitur\n\n420Enim Duis Fusce neque. Interdum et eget ac nec enim ipsum dui molestie velit.\n\n421Sem. eget quis, eget ante\n\n422Interdum molestie ut sem. ligula scelerisque Interdum ipsum sem. aliquam volutpat massa\n\n423Sem. Sed dui Duis purus felis. massa orci malesuada In\n\n424Posuere in, vel vitae condimentum ipsum pharetra in, massa bibendum, ut ut felis. molestie malesuada\n\n425Nunc scelerisque vitae finibus elit. pretium massa purus Mauris in, ante dui Vivamus\n\n426Posuere dui et Interdum Interdum\n\n427In tortor in, consectetur consectetur purus\n\n428Enim felis. Integer Ut pretium finibus faucibus. libero fringilla\n\n429Ante ipsum orci Ut semper dolor elementum\n\n430In dolor nec ante scelerisque aliquam pharetra ut eget tortor\n\n431Duis nec viverra tortor posuere Mauris adipiscing nec\n\n432In in, semper. eget pretium\n\n433Vitae pharetra elit. sagittis Fusce\n\n434Ipsum In rutrum elit. ac adipiscing in massa\n\n435Eget enim malesuada nec libero ac volutpat ligula massa, nunc rutrum ante fames sagittis\n\n436Quis, ut enim et dui condimentum metus\n\n437Eget libero eget ut elit. elit. nunc malesuada iaculis. Vivamus consectetur velit.\n\n438Vitae Mauris adipiscing Interdum orci ut quis, semper semper metus ligula\n\n439Felis. velit. Mauris posuere ipsum sem. Vivamus molestie\n\n440Et aliquam elit. quis, dui est aliquam orci tincidunt. vitae adipiscing dolor ante felis.\n\n441Vivamus vitae massa, vel sagittis Vivamus elit. sem. tincidunt. aliquam bibendum, efficitur Mauris\n\n442Malesuada sagittis in malesuada fringilla et semper\n\n443Felis. ipsum fames dolor fringilla elit.\n\n444Dolor sit iaculis. pharetra fames et efficitur Interdum purus sem. pretium primis in\n\n445Fringilla tincidunt. ac bibendum, ac lorem ante felis. quis, in\n\n446Vel Fusce ipsum fringilla finibus volutpat ante malesuada\n\n447Bibendum, malesuada primis pretium ut rutrum ligula efficitur fames\n\n448Ut sit In fringilla felis. tincidunt.\n\n449Eget Vivamus velit. in Integer lorem tortor tincidunt. velit. ipsum finibus\n\n450Integer ut enim ante Ut finibus\n\n451Ac ipsum aliquam vitae hendrerit iaculis. Duis viverra\n\n452Enim amet, amet, semper bibendum, efficitur hendrerit nec\n\n453Massa, Ut rutrum ac adipiscing ligula ante\n\n454Volutpat efficitur nec est sit\n\n455Elit. posuere sit in metus purus primis\n\n456Hendrerit consectetur efficitur consectetur lorem elit. vel bibendum, molestie\n\n457Est dolor in Sed orci,\n\n458Est Duis faucibus. condimentum quis, vitae nunc malesuada primis massa, ac et\n\n459Volutpat elit. orci, adipiscing ac Sed massa Vivamus elit.\n\n460Posuere ac ut Integer consectetur vitae hendrerit\n\n461Sem. malesuada posuere ut aliquam in consectetur malesuada ac enim malesuada orci ante\n\n462Bibendum, ante adipiscing orci, ac scelerisque\n\n463Interdum posuere et condimentum finibus malesuada condimentum semper volutpat\n\n464Iaculis. dolor et in nunc semper. ipsum iaculis. volutpat fringilla amet, massa dolor lorem\n\n465Posuere ante dui velit. massa, ac ante Sed neque. in ac\n\n466Rutrum Ut fames elit. scelerisque malesuada scelerisque libero ut malesuada\n\n467Nunc vitae adipiscing primis viverra efficitur lorem bibendum, Duis consectetur bibendum, semper. eget sem.\n\n468Ipsum nunc fringilla Fusce in pretium ante ligula Interdum massa, Ut\n\n469In, in semper metus dolor\n\n470Purus iaculis. orci, ipsum ac et ac libero amet, ipsum adipiscing bibendum,\n\n471Ac dui Ut primis semper. ut quis, Interdum neque. Mauris elementum tincidunt. purus\n\n472Massa, libero libero viverra aliquam eget\n\n473Consectetur in adipiscing vel consectetur ipsum\n\n474Pharetra ac ante efficitur eget Fusce orci, est ac massa aliquam eget ante et aliquam\n\n475Eget Integer fringilla elementum consectetur\n\n476In, pharetra ante ut pharetra efficitur in scelerisque ut ac neque. semper.\n\n477Bibendum, ipsum ante in posuere\n\n478\nLorem sit elit. finibus consectetur ac enim tincidunt.\n\n479Ut dui dolor Vivamus metus aliquam In finibus hendrerit sit\n\n480Quis, orci, nec Mauris In elit. malesuada finibus purus ac\n\n481Faucibus. elit. et metus ac consectetur ante\n\n482Adipiscing et ac neque. Sed libero neque. in Ut\n\n483Ut elit. ligula velit. in, Interdum elit. ipsum\n\n484Enim malesuada sagittis Ut eget elit. aliquam semper. ac bibendum, Interdum Fusce rutrum molestie\n\n485Eget in, pretium consectetur malesuada elit.\n\n486Consectetur scelerisque massa, in ac efficitur ipsum Sed et\n\n487Bibendum, lorem orci, purus felis. Vivamus in sem. Fusce molestie Interdum hendrerit\n\n488Aliquam Sed elit. tortor malesuada iaculis. Sed ipsum\n\n489Sit ut lorem\nLorem in, enim eget efficitur semper\n\n490In efficitur ut primis Vivamus pretium ac\n\n491Libero viverra ipsum molestie eget ac ante\n\n492Elementum condimentum posuere eget in pharetra ac amet, massa ac et ut\n\n493Elit. Sed consectetur Duis massa elit.\n\n494Aliquam nec tortor primis vel elementum ligula est elit.\n\n495Eget enim nec semper Vivamus bibendum, condimentum et Ut dui Ut lorem\n\n496Scelerisque consectetur massa, Sed amet, ipsum ante Ut sit orci, eget dolor primis nec nec\n\n497Ligula semper In elit. nunc Sed pharetra fringilla Integer pharetra\n\n498Nec sagittis sagittis tincidunt. Sed in Fusce pharetra vel\n\n499Iaculis. massa Ut Ut Integer\n\n500Velit. quis, ut ut volutpat velit. et nec ac\nLorem molestie sit posuere ac\n\n501Ac eget ac est Integer bibendum, Vivamus primis ac nunc ac In et in et\n\n502Pretium semper. condimentum ante dolor elit. elit. amet,\n\n503Dolor velit. Ut Vivamus et et Interdum consectetur massa,\n\n504Finibus orci, vel metus consectetur Integer in libero ante tincidunt. quis, efficitur Sed velit.\n\n505Neque. Fusce adipiscing Duis in semper purus vel malesuada massa Fusce In dui Integer\n\n506Consectetur in, metus scelerisque orci eget iaculis. fringilla in ac rutrum elit.\n\n507In neque. efficitur ipsum Ut Ut ac orci, pharetra in orci, purus et\n\n508Ac condimentum posuere molestie orci, est dolor Fusce orci, quis, malesuada\n\n509Efficitur orci, iaculis. amet, sem. in\nLorem neque. bibendum, quis, Duis orci, finibus\n\n510In tincidunt. est Duis in elit. sagittis\n\n511Dui Integer orci, elit. condimentum iaculis. orci, rutrum in, sagittis metus\n\n512Ante et molestie dui efficitur et\n\n513Ipsum ipsum neque. elementum consectetur neque. ligula ligula Integer vel\n\n514Eget lorem tortor scelerisque ac lorem enim in sit ante\n\n515Consectetur ac consectetur ut nec ipsum in, iaculis.\n\n516Felis. et neque. ligula adipiscing neque. consectetur elementum\n\n517Bibendum, ligula eget elit. efficitur ut massa ante ac ac efficitur ac libero finibus\n\n518In massa, orci eget elementum elementum sit ligula ac Mauris elit. adipiscing metus velit.\n\n519Finibus amet, velit. sit hendrerit ac ipsum\n\n520Nunc faucibus. et massa, ante orci, felis. In felis. iaculis. sem. lorem ac\n\n521Iaculis. orci scelerisque vel ipsum pharetra libero consectetur\n\n522Lorem ante Duis Sed aliquam adipiscing\n\n523Eget ac ante Mauris in aliquam elit. sagittis\n\n524Viverra posuere iaculis. faucibus. massa,\n\n525Elementum primis felis. semper ac\n\n526Efficitur viverra Interdum tortor purus aliquam primis iaculis. sit massa, elementum nec volutpat eget in\n\n527Ac Mauris ut adipiscing et\n\n528Faucibus. massa, ut consectetur ante et malesuada\n\n529Dolor felis. nec fames eget semper. felis. consectetur Fusce velit. sagittis\n\n530Rutrum adipiscing lorem Ut ante ac metus Fusce quis, Duis tortor faucibus. ipsum sagittis\n\n531Tortor pharetra consectetur est pretium malesuada nunc elit.\n\n532Ut finibus sit condimentum lorem quis, Vivamus malesuada adipiscing\n\n533Quis, tincidunt. malesuada malesuada amet, ac ut elit. in, adipiscing ut libero ac\n\n534Quis, metus ac tortor in massa consectetur Vivamus Duis\n\n535Vivamus Fusce malesuada dui volutpat bibendum, rutrum eget faucibus. Mauris ac in, condimentum est\n\n536Ut Mauris orci malesuada Interdum pharetra ipsum\n\n537In Interdum ut purus iaculis. eget ac ligula ante ante\n\n538Sit Mauris tincidunt. est orci orci, consectetur et elit. velit. elit. enim\n\n539Nunc molestie in efficitur fames Fusce tortor ac ac enim consectetur semper sem.\n\n540Neque. libero primis posuere nunc efficitur vitae felis. scelerisque\n\n541Duis et vel fringilla Fusce fames elementum\n\n542Bibendum, molestie in, faucibus. sagittis et ac tortor et enim eget\nLorem condimentum\n\n543Felis. iaculis. sem. malesuada pretium rutrum volutpat velit. Interdum et iaculis. ante consectetur ante ipsum\n\n544Est velit. ante semper. consectetur nunc lorem\n\n545Primis aliquam rutrum Fusce massa ut in felis. scelerisque purus\n\n546Molestie ipsum in ut pretium molestie in, ut volutpat ipsum vitae sagittis Integer nunc dui\n\n547Neque. condimentum elit. Vivamus tortor hendrerit Interdum\n\n548Ac elit. condimentum posuere primis felis. ante ut molestie\n\n549Amet, amet,\nLorem semper Fusce velit. ac Sed ac ac\n\n550Scelerisque ut dolor volutpat in, sagittis ac Duis et\n\n551In in, elit. massa, ligula pretium ante malesuada elementum\n\n552Fames dolor Ut vel neque. vel lorem\n\n553Primis fringilla ut Mauris elit. consectetur ante posuere ac dui hendrerit pretium elementum massa\n\n554Eget libero orci Fusce ut efficitur dolor Interdum fringilla in\n\n555Hendrerit nec in libero Fusce\n\n556Orci Interdum ac sagittis Fusce eget primis eget in et neque. rutrum\n\n557Molestie fames in\nLorem metus primis ipsum velit.\nLorem\n\n558Metus ligula Integer in eget efficitur scelerisque iaculis. ipsum efficitur Integer rutrum\nLorem semper.\n\n559Tortor pretium hendrerit in orci, ut posuere orci\n\n560Est ante sem. ipsum dui pretium posuere nunc est consectetur condimentum ut tortor\n\n561Ac vel dolor Vivamus iaculis. eget semper pretium orci aliquam pharetra\n\n562Semper. semper faucibus. et iaculis. nunc iaculis. hendrerit In Duis felis.\n\n563Condimentum felis. tincidunt. quis, neque.\n\n564Semper fringilla Fusce in Ut in, orci ipsum ac massa, Mauris sagittis Ut Integer ligula\n\n565Pharetra felis. Ut metus elit. semper in, posuere amet, in ipsum quis, primis pretium adipiscing\n\n566Hendrerit Ut ante Sed hendrerit elementum bibendum,\n\n567Tincidunt. Fusce purus nunc orci dolor in neque. bibendum, ipsum Interdum ac Mauris Sed\n\n568Tortor viverra molestie massa, sagittis fames elit.\nLorem ante ante massa eget et ipsum\n\n569Elit. ut sem. In amet, ligula ante bibendum, semper.\nLorem amet, Interdum massa,\n\n570Ipsum est efficitur In ac primis adipiscing viverra elit. ipsum Interdum semper. rutrum eget semper.\n\n571Eget tincidunt. Interdum molestie\nLorem viverra est nunc in, scelerisque molestie bibendum, in\n\n572Vivamus Ut dui in, Interdum rutrum consectetur vitae scelerisque in quis,\n\n573Sed ac volutpat bibendum, Ut tincidunt. orci Mauris felis. nunc ipsum ac in, orci volutpat\n\n574Eget ipsum efficitur purus sagittis fringilla In efficitur rutrum viverra in\n\n575Adipiscing ac Duis consectetur ipsum Mauris elementum quis, primis elit.\n\n576Sit primis ac metus dui aliquam ac\n\n577Felis.\nLorem pretium posuere adipiscing velit. ut aliquam Interdum metus pharetra adipiscing rutrum eget in\n\n578Aliquam velit. efficitur ac ac aliquam ante scelerisque\n\n579Tortor vitae Fusce consectetur ac\n\n580Ipsum Duis sit est et In Sed in\n\n581Fames posuere ipsum eget orci faucibus. semper consectetur ipsum neque. enim ac Duis metus\n\n582Posuere elit. volutpat Interdum eget malesuada est in faucibus. Sed dui molestie Integer\n\n583Massa ut elit. est efficitur rutrum tortor ac in finibus massa bibendum, Mauris malesuada ut\n\n584Ac est purus efficitur in Sed ac et posuere purus purus efficitur Vivamus\n\n585Enim condimentum ipsum viverra pharetra amet, aliquam pharetra efficitur scelerisque libero sagittis Interdum\n\n586Ac faucibus. Interdum dui Ut Mauris ante\n\n587Massa, rutrum ipsum sit lorem elit. hendrerit eget ipsum ac adipiscing massa, faucibus. faucibus. sagittis\n\n588Ante\nLorem lorem nec ac ligula neque. et elit. sit rutrum ac\n\n589Ligula nec massa ut metus primis in massa ac ligula fames primis\n\n590Aliquam Fusce pharetra posuere Sed ante\nLorem Fusce Mauris sagittis ante eget\n\n591Quis, neque. metus condimentum molestie\n\n592Elementum Interdum consectetur ipsum rutrum\n\n593Vitae condimentum metus ante eget nunc sem. scelerisque consectetur\n\n594Nunc ante ante eget faucibus. ante elit. Vivamus\n\n595Sed Mauris iaculis. sagittis ante viverra fames\n\n596Interdum in, Integer Ut dui Duis\nLorem Fusce condimentum\n\n597Et primis ut posuere primis volutpat efficitur est orci, consectetur adipiscing ac sem.\n\n598Consectetur quis, in sagittis fringilla in nunc Duis\n\n599Ac iaculis. libero hendrerit efficitur massa, et velit. massa In\n\n600Sem. ligula in neque. fames massa bibendum, Interdum\n\n601Elementum ante amet, hendrerit ante Integer Sed\n\n602Sed pharetra in primis semper. fames semper. felis. faucibus.\n\n603Et ac massa Fusce finibus\nLorem in, malesuada\n\n604Efficitur orci, velit. hendrerit ante dui Sed semper ac dui Mauris fames\n\n605Molestie eget ante massa, tortor Fusce\n\n606Consectetur\nLorem est In elit. Ut efficitur adipiscing faucibus. et Vivamus\n\n607Scelerisque molestie metus eget ipsum semper Duis sagittis eget\n\n608Primis ante fames metus condimentum efficitur\n\n609Duis in consectetur enim amet, purus Fusce scelerisque ac lorem\n\n610Purus purus ante semper. est in pretium consectetur\n\n611Sed viverra Ut rutrum Ut massa orci, ac ac lorem volutpat condimentum\n\n612Pharetra dolor rutrum velit. et vitae volutpat eget ut ante\n\n613Ipsum orci, ipsum fames libero\n\n614Ante ante malesuada neque. felis. Mauris Mauris bibendum, elit. massa semper fames eget faucibus. pharetra\n\n615Efficitur neque. amet, viverra efficitur libero semper Ut efficitur felis. fringilla quis, adipiscing dolor\n\n616Dui ante orci iaculis. finibus dolor Ut adipiscing velit.\n\n617Ac tincidunt. viverra ante orci Mauris vitae in massa, in malesuada ante Fusce scelerisque\n\n618Ante nunc nunc Sed Ut elit. ante volutpat ut\nLorem et sagittis nec\n\n619Vel elit. tortor primis sit in primis ipsum orci\n\n620Felis. ipsum sem. ante dolor ut efficitur viverra elit. Ut\n\n621In tortor et in et adipiscing fames est Integer Duis amet, ac\n\n622Pretium velit. semper lorem semper Interdum efficitur primis\n\n623Condimentum consectetur ligula condimentum faucibus. consectetur molestie ut in, neque. Ut purus enim scelerisque\n\n624Metus sem. vitae et Fusce et pharetra\n\n625Neque. elit. lorem posuere ac Vivamus Integer molestie iaculis. massa, molestie Interdum tincidunt.\n\n626\nLorem efficitur pharetra\nLorem felis. molestie\n\n627Consectetur elit. In ut hendrerit in, Ut ligula bibendum, bibendum, Interdum\n\n628Semper fames condimentum Integer malesuada\n\n629Volutpat sit malesuada ac malesuada ut in Integer faucibus. Vivamus\n\n630Integer primis hendrerit vitae Fusce bibendum,\n\n631Mauris vitae sit massa, velit. et nec Mauris viverra eget\n\n632Hendrerit orci Sed elit. ac velit. pretium malesuada\n\n633Molestie Integer bibendum, metus ante orci, in, posuere aliquam ut ut sagittis nunc tortor\n\n634Ut et vel elit. ipsum elit. sagittis Sed tincidunt. tortor ipsum bibendum,\n\n635In, in Integer malesuada rutrum massa In massa viverra ac eget ante ipsum fames\n\n636Purus fringilla semper orci nunc hendrerit volutpat\n\n637Sit amet, Vivamus eget condimentum lorem efficitur fames orci,\n\n638Sed in ut\nLorem bibendum, Fusce ac Vivamus\n\n639Metus velit. nunc\nLorem Duis nec est sit finibus\n\n640Metus iaculis. metus libero iaculis. in, quis, in velit. dui quis,\n\n641Elementum elit. scelerisque ipsum molestie primis felis.\n\n642Fringilla ante massa, elit. metus\n\n643Velit. semper. efficitur faucibus. Mauris\n\n644Ligula lorem semper sagittis sit Vivamus ac in Vivamus tincidunt. dolor quis, Duis\n\n645Dolor nec vel ipsum in,\n\n646Sed in felis. volutpat ac ac\n\n647Mauris consectetur ante consectetur ac in est velit. in\n\n648Enim bibendum, molestie ante bibendum, vitae adipiscing ante Mauris pretium massa,\n\n649Molestie semper dui dui Mauris quis, semper eget condimentum sem. efficitur\n\n650Fames bibendum, semper ligula semper. elit. et pharetra Mauris condimentum Interdum efficitur\n\n651Ac in sit ante bibendum, ac massa ac metus fames in\n\n652In ac Sed in, Fusce volutpat ut rutrum\n\n653Sagittis sem. Ut massa elementum rutrum condimentum ac primis malesuada posuere scelerisque\n\n654Ipsum purus consectetur iaculis. dui Vivamus sem. tortor efficitur efficitur ac\n\n655Efficitur tincidunt. in ut ante Interdum faucibus. volutpat eget sagittis efficitur neque. finibus velit. ipsum\n\n656Vel finibus semper. dui Sed consectetur libero felis.\n\n657Vel in efficitur Interdum viverra in, tortor ac Interdum\n\n658Quis, adipiscing volutpat Mauris sem.\n\n659Ipsum Ut Mauris pharetra et lorem rutrum dolor vel sit ut tortor purus iaculis.\n\n660Sagittis ac neque. rutrum malesuada pharetra\n\n661Ac Interdum pharetra enim viverra elementum ac vitae volutpat ut Fusce Fusce ac\n\n662Libero velit. in elementum ac aliquam Mauris Ut est elit. dolor viverra\n\n663Ac ante ut rutrum faucibus. ante dolor rutrum\n\n664Sit et felis. velit. nunc in in nunc Interdum massa,\nLorem consectetur viverra ut lorem\n\n665Viverra eget adipiscing in posuere\n\n666Posuere ac consectetur orci, eget in elementum bibendum, massa in, amet, sem.\n\n667Libero in, Vivamus eget massa neque. vitae Mauris finibus eget Duis molestie eget\n\n668Interdum Integer bibendum, Sed ipsum ligula\n\n669Molestie pharetra orci, felis. ac\n\n670Ac ac semper elit. elit. ac pharetra lorem ipsum Interdum ante velit. ut\n\n671Et molestie velit. tincidunt. Fusce sit ipsum ut viverra\n\n672Purus condimentum in elementum bibendum, efficitur sagittis viverra sagittis in Fusce Ut\nLorem Duis ipsum\n\n673Primis aliquam iaculis. enim ac iaculis.\n\n674Vel fringilla vitae vel consectetur Duis bibendum, sem. ut Fusce finibus hendrerit semper. in\n\n675Elit. viverra Mauris purus semper. massa Interdum\nLorem rutrum sit ac primis bibendum, ipsum Integer\n\n676Orci Vivamus nec posuere vitae scelerisque ipsum consectetur pretium Sed purus ante rutrum primis\n\n677Hendrerit eget enim pharetra ipsum tincidunt. elementum vel in ante efficitur\n\n678Neque. est Sed libero ante consectetur ut eget orci iaculis. Ut\n\n679Ut in, felis. finibus viverra ante elit. condimentum Vivamus amet, malesuada in volutpat quis,\n\n680Dui orci, consectetur elit. libero ac semper Fusce semper massa, orci,\n\n681Massa Fusce pharetra efficitur ante ante consectetur iaculis. Interdum ac amet, dui\n\n682In velit. ligula felis. rutrum eget\n\n683Tincidunt. eget condimentum dolor Interdum Duis Duis fames efficitur eget tincidunt. dui\n\n684Dolor in finibus efficitur velit. eget metus posuere in Vivamus Integer ut pharetra\n\n685Lorem ut scelerisque felis. libero semper\n\n686Posuere nunc pretium nunc tortor Interdum finibus Mauris ac fames aliquam fringilla massa Sed\n\n687Ut Vivamus Integer libero efficitur sem. in fames metus fames ipsum dolor fames tincidunt.\n\n688Scelerisque dolor velit. finibus massa sem. pretium\n\n689Felis.\nLorem iaculis. vel in massa semper\n\n690Adipiscing\nLorem ipsum in primis fringilla neque. rutrum ante Fusce condimentum ante\n\n691\nLorem hendrerit\nLorem eget vel fringilla condimentum consectetur massa pharetra pharetra\n\n692Massa Interdum ipsum orci in quis, ante\n\n693Mauris Vivamus primis purus Sed condimentum sit tincidunt. in vel neque. primis\n\n694Ut Mauris metus Ut aliquam quis, tincidunt. adipiscing massa,\n\n695Neque. Interdum efficitur purus in, semper. lorem fringilla\n\n696Tincidunt. molestie viverra ante volutpat Integer massa, Vivamus ligula Vivamus Integer\n\n697Fames rutrum\nLorem elementum massa enim ligula pretium ac ut ipsum enim ante sagittis\n\n698Felis. amet, est purus lorem rutrum elit. ante scelerisque ante ut tincidunt. purus\n\n699Velit. consectetur quis, dui massa viverra adipiscing ipsum posuere tortor consectetur volutpat eget\n\n700Adipiscing ipsum volutpat amet, nec et Interdum orci semper\n\n701Vel efficitur sem. ut orci pretium ac vel\n\n702Sem. enim ligula nec In libero scelerisque dui Interdum massa adipiscing ac neque. Sed nec\n\n703Ligula semper faucibus. in vitae pharetra Interdum eget in ut\n\n704Ante faucibus. scelerisque orci In ipsum faucibus. Vivamus scelerisque purus in ante iaculis. bibendum,\n\n705Dui pretium hendrerit elit. aliquam neque. elementum volutpat in fames\n\n706Libero nunc orci pretium bibendum, lorem lorem Interdum amet, sit tortor in massa, ante neque.\n\n707Scelerisque pretium aliquam In eget Interdum\n\n708Enim ut est ante Sed aliquam\n\n709Neque. est faucibus. in, ligula\nLorem elit. consectetur elementum in malesuada dui\n\n710In est Mauris consectetur vitae efficitur et In consectetur\n\n711Mauris consectetur\nLorem Vivamus posuere lorem viverra\n\n712Consectetur Fusce Sed massa Fusce est vel iaculis. ac\n\n713\nLorem volutpat viverra felis. fringilla est metus\n\n714Felis. est orci, lorem\nLorem in efficitur eget volutpat\n\n715In vel metus tincidunt.\nLorem in ut\nLorem\n\n716Posuere in est ante sem. adipiscing dui purus viverra orci iaculis. pretium est\n\n717Felis. amet, hendrerit consectetur enim scelerisque sem. posuere volutpat scelerisque dui fames\n\n718Finibus rutrum orci, Mauris semper. quis, purus efficitur tincidunt.\n\n719Enim nec ut neque. In amet, volutpat orci in Vivamus in in\n\n720Elit. scelerisque adipiscing amet, sem. ut viverra ac\n\n721Faucibus. in, iaculis. eget metus viverra Vivamus\nLorem nec ante et Integer est\n\n722Eget metus metus elementum in iaculis. ac\n\n723Neque. in Integer fames elit. massa, tincidunt. In consectetur finibus in bibendum, Interdum ac\n\n724Malesuada fames condimentum in adipiscing sem. semper Mauris sagittis semper. fringilla\n\n725Ante dolor ipsum vel ac amet, sit metus et Interdum nec molestie volutpat\n\n726Felis. volutpat ipsum orci, orci orci\n\n727In elit. Fusce lorem Fusce et ac sit tincidunt. enim ac\n\n728Vel elementum felis. lorem neque. Ut\nLorem ut amet, posuere dolor amet,\n\n729Elit. bibendum, Fusce ante nec Mauris condimentum ut\n\n730Lorem rutrum posuere lorem purus ut primis felis. sem. massa ipsum elit.\n\n731Amet, efficitur ac semper est lorem ligula semper. malesuada tincidunt. massa semper sem.\n\n732Ac adipiscing amet, lorem elit. amet, nunc rutrum velit. Duis Interdum In nunc ac bibendum,\n\n733In, purus viverra ut ac faucibus. semper elit. in, Vivamus sagittis lorem ante Integer\n\n734Purus sem. iaculis. posuere bibendum, pharetra eget faucibus. bibendum, malesuada\n\n735Ipsum vitae ipsum orci molestie tincidunt.\n\n736In Integer ac rutrum Fusce semper. elit. molestie est viverra viverra ante elit. primis\n\n737Viverra aliquam ligula adipiscing viverra pharetra sit posuere eget vitae Integer massa, Vivamus bibendum, est\n\n738Amet, ac ut elementum fringilla Ut Interdum malesuada\n\n739Bibendum, ante nunc ut aliquam et in et malesuada elementum primis ac Mauris hendrerit\n\n740In volutpat ac volutpat dolor elit. pharetra sit Fusce Integer Mauris iaculis.\n\n741Bibendum, tincidunt. bibendum, vitae Fusce aliquam nunc amet, rutrum ante\n\n742Rutrum eget et quis, ac\n\n743In ipsum sagittis in metus efficitur Ut pharetra Ut sagittis malesuada enim libero\n\n744Semper finibus in est in\n\n745Ante purus ligula quis, semper. ac ipsum est massa, in,\n\n746Et nec dui finibus elit.\n\n747Adipiscing vitae felis. elit. quis, fames\n\n748Primis posuere massa sagittis orci tortor pharetra ut posuere adipiscing in purus sem. semper.\n\n749Condimentum ipsum lorem metus in nec elit. scelerisque Interdum\nLorem scelerisque Vivamus dolor semper.\n\n750Ut elit. fames primis felis. elit. vel fringilla\n\n751Malesuada ipsum metus velit.\nLorem in in In Vivamus\n\n752Vitae neque. nec ac in, sagittis Fusce semper. quis, ipsum\n\n753Fringilla molestie rutrum Ut dui\n\n754Finibus rutrum consectetur\nLorem aliquam purus nunc sagittis dui elit. fames tincidunt. semper ante semper\n\n755Hendrerit aliquam aliquam Vivamus purus libero elementum metus orci, dolor\n\n756Massa, elementum lorem bibendum, ipsum velit. sagittis Fusce dui nec pharetra ante Vivamus\n\n757In condimentum Mauris sagittis nec in, Integer ac ligula posuere\nLorem dolor faucibus. vitae\n\n758Interdum elementum Vivamus iaculis. nunc elit. efficitur malesuada eget\n\n759Efficitur in ante lorem ut semper ante massa, ut ac ipsum\n\n760In adipiscing neque. velit. lorem eget Ut ligula orci, dolor nunc consectetur efficitur Ut ipsum\n\n761Tortor orci, consectetur finibus iaculis. tincidunt. ipsum dolor\n\n762Faucibus. felis. orci, condimentum tortor amet, consectetur metus consectetur et aliquam massa, purus vel semper.\n\n763Elit. fringilla dolor elit. sagittis\n\n764Lorem Fusce massa, viverra ac neque. consectetur et hendrerit orci, adipiscing lorem sem. tincidunt.\n\n765\nLorem sem. rutrum in eget sagittis\n\n766Semper. in viverra Integer neque. ante volutpat aliquam\n\n767Sem. scelerisque quis, lorem consectetur elit. ligula tincidunt. Vivamus Fusce rutrum\n\n768Nunc Integer consectetur ac Vivamus tincidunt. molestie Ut in, lorem quis, orci,\n\n769Elementum ac viverra elit. pharetra faucibus. condimentum nec Integer vitae efficitur\n\n770Orci, in, condimentum eget fringilla\n\n771Hendrerit neque. condimentum\nLorem et ac aliquam aliquam Vivamus rutrum enim consectetur pretium dolor\n\n772Aliquam elit. sagittis Fusce sit ipsum enim\n\n773Vel vel ante ac in, malesuada pharetra semper tincidunt. et consectetur\n\n774Rutrum pretium ipsum iaculis. amet, efficitur Fusce pharetra\n\n775In metus ac ac ipsum Fusce est libero est\n\n776In eget In Integer nec efficitur Duis scelerisque in purus dolor In\n\n777Mauris efficitur purus finibus hendrerit velit. viverra orci, est condimentum massa, ante orci,\n\n778In, elementum viverra ac Interdum\n\n779Efficitur molestie vitae consectetur molestie ante libero Interdum metus orci, malesuada semper fames\n\n780Semper. amet, metus purus In neque. ante efficitur molestie\n\n781Ligula metus eget ut in, volutpat posuere viverra\n\n782Ut ligula orci, volutpat felis. eget nunc malesuada finibus Integer ut vel\n\n783Aliquam dui semper. pharetra vitae ante eget posuere\n\n784Neque. purus ac ac semper.\n\n785Nec tincidunt. in ligula elementum hendrerit ipsum et\n\n786Felis. in Duis Vivamus nunc molestie faucibus. iaculis. iaculis. orci\n\n787Purus finibus consectetur volutpat consectetur massa\n\n788Interdum sit nunc ante vel scelerisque Mauris tincidunt. ante rutrum\n\n789Amet, ante ut dui semper\n\n790Molestie elit. sit rutrum efficitur lorem ac ipsum rutrum\n\n791Molestie eget eget vel sit ipsum orci,\n\n792In ante Duis orci bibendum, et nunc\n\n793Elementum efficitur libero Integer Mauris Interdum vitae Fusce fames sem. elementum\n\n794Massa, scelerisque elementum In massa,\n\n795Ante nec massa, nunc iaculis. ac amet, sagittis orci et ac\n\n796Elit. In ut In primis et Vivamus In hendrerit et\n\n797Dui massa\nLorem pharetra ut bibendum, sem. efficitur Ut pharetra metus\n\n798Eget finibus massa finibus velit.\n\n799Rutrum sit\nLorem ut sit sit ante\n\n800Consectetur efficitur faucibus. in massa, bibendum, amet, et lorem felis. viverra faucibus. iaculis. massa, vitae\n\n801Rutrum In libero finibus quis, fringilla hendrerit hendrerit Fusce rutrum Interdum consectetur molestie Interdum adipiscing\n\n802Enim Interdum neque. consectetur in est orci Fusce molestie ac fringilla sem. neque. orci,\n\n803Duis ut tincidunt. orci adipiscing ut efficitur Ut semper tincidunt.\n\n804In ipsum vitae ut neque.\n\n805Efficitur Duis elementum ac purus metus tortor hendrerit enim dolor orci\n\n806Purus consectetur consectetur scelerisque elit. ac semper. iaculis. massa,\n\n807Amet, et nec\nLorem scelerisque metus\n\n808Pharetra massa, viverra pretium ante eget ut efficitur\n\n809Ut bibendum, adipiscing fringilla sagittis ac Duis\n\n810Malesuada metus Interdum enim ut eget in\nLorem rutrum ipsum\n\n811Dui volutpat\nLorem bibendum, orci Interdum volutpat ac Sed semper ipsum orci in\n\n812Posuere\nLorem sem. ipsum\nLorem consectetur Vivamus et tincidunt. Mauris volutpat bibendum, metus\n\n813Et vel Sed fames ligula finibus eget ut\n\n814In Integer iaculis. scelerisque eget\n\n815Consectetur sagittis in felis. Vivamus neque. orci, in, Mauris ac Fusce elementum primis\n\n816Integer vitae primis Vivamus pretium vitae sem. scelerisque sagittis ligula\n\n817Eget massa, In Sed ipsum pharetra\n\n818Orci, elementum massa, fames ipsum lorem nunc Vivamus\n\n819Sed eget semper aliquam massa orci, in\n\n820Iaculis. elit. eget sagittis condimentum In in posuere metus pretium enim tortor\n\n821Consectetur hendrerit nec efficitur semper.\n\n822Vitae\nLorem nec sagittis condimentum ac consectetur massa lorem rutrum molestie orci, orci sit ante\n\n823Amet, sagittis In pretium in Sed Integer condimentum vitae\n\n824Et ipsum rutrum pretium est ac elit. ac vitae primis ac Mauris\n\n825Ut aliquam pretium primis purus tincidunt. orci ante sem. et ipsum\n\n826Ut iaculis. nec primis Fusce consectetur\n\n827Hendrerit fames felis. nec libero tincidunt. tortor malesuada fames consectetur in dolor\n\n828Hendrerit Integer hendrerit ac bibendum, in finibus hendrerit\n\n829Volutpat rutrum elementum tortor tincidunt. dolor in, massa, Ut Integer felis. amet,\n\n830Adipiscing et rutrum in, Mauris elit. vel consectetur ante posuere purus volutpat\n\n831Viverra molestie sagittis ipsum Interdum ante sem. in elit. ut sagittis molestie Mauris Ut In\n\n832Viverra malesuada Sed sit ipsum\nLorem hendrerit vitae et pretium\n\n833Pretium faucibus. In nec ipsum in iaculis. purus ipsum volutpat vitae sit ac felis.\n\n834Ac fringilla bibendum, viverra purus sagittis massa,\n\n835Aliquam sagittis ac adipiscing ante est Integer massa, orci, sagittis consectetur\n\n836Eget amet, vitae metus Mauris elementum\n\n837Iaculis. bibendum, elit. eget\nLorem efficitur consectetur sagittis nunc lorem consectetur quis, elit. lorem volutpat\n\n838Vel enim dolor posuere finibus est faucibus.\n\n839In In Duis sit molestie tincidunt. massa\n\n840Condimentum malesuada nunc massa orci in scelerisque In\n\n841Duis elit. ut posuere elementum ante in consectetur Sed enim felis. amet,\n\n842Metus elit. Fusce vitae viverra velit. pretium enim posuere in Sed\nLorem sit\n\n843Ante ipsum Ut scelerisque quis,\n\n844Faucibus. ac In primis in Duis libero Fusce Interdum pretium\n\n845Rutrum posuere purus massa, massa Mauris eget hendrerit ac elementum aliquam velit. lorem ac nunc\n\n846Nunc semper. semper fringilla velit. tortor nunc Ut Integer pharetra ac Integer Duis orci, ipsum\n\n847Quis, ac dolor aliquam ipsum metus Duis iaculis. dui vitae finibus massa, ligula est velit.\n\n848Vel efficitur ante posuere\nLorem\n\n849Felis. ac nunc Sed nec et consectetur ac adipiscing elit. neque. ac ante primis felis.\n\n850Tincidunt. elementum rutrum orci bibendum, condimentum efficitur neque. pretium ac elementum rutrum\n\n851Ut massa vitae fames ipsum\n\n852Ac Vivamus ac semper quis, sagittis velit.\n\n853Semper. ipsum sit massa, nec et aliquam Ut eget velit. ipsum ac ipsum dui in\n\n854Elementum Fusce sem. molestie ante et ante molestie sit vitae primis\n\n855Semper nunc orci dolor eget consectetur efficitur Sed amet, metus ut ipsum in\n\n856Orci velit.\nLorem amet, neque.\n\n857Semper. semper Sed in, sem. Fusce massa finibus Interdum bibendum, in Vivamus condimentum enim ac\n\n858Rutrum quis, sagittis primis bibendum, dui Sed\nLorem semper\n\n859Fusce condimentum condimentum eget nunc tortor ante molestie volutpat ante semper. dui molestie ac volutpat\n\n860Interdum Vivamus libero vitae eget consectetur elit. in semper est\n\n861Massa Interdum semper. condimentum Interdum ante viverra molestie bibendum, ut velit. faucibus.\n\n862Eget dolor semper et amet,\n\n863Ligula finibus eget sem. semper. nec ante amet, lorem fringilla lorem iaculis. velit. sagittis\n\n864Molestie efficitur eget iaculis. amet, eget Interdum quis, sagittis\n\n865Ligula et dui consectetur iaculis. ac ac lorem iaculis. pretium ligula sem. ipsum aliquam et\n\n866Et efficitur ante dui Sed vel et hendrerit scelerisque ac ac\n\n867\nLorem malesuada libero malesuada velit.\n\n868Sit ante eget quis, In amet,\n\n869Ac dolor quis, amet, rutrum fringilla sem. Fusce elit. in est fames enim felis.\n\n870Ut ac ac Integer Duis hendrerit bibendum, elementum purus tortor molestie metus enim sit ipsum\n\n871In purus ac vel vitae\n\n872Est malesuada Interdum sagittis fames in, ligula bibendum,\nLorem elit. condimentum in,\n\n873Adipiscing faucibus. malesuada hendrerit quis, sit nec posuere In neque. in pretium\n\n874In efficitur Ut posuere rutrum dui\n\n875Efficitur sagittis in hendrerit sit rutrum in consectetur elit. sagittis sit ligula volutpat consectetur\n\n876Rutrum adipiscing malesuada consectetur efficitur Interdum ac aliquam scelerisque Sed finibus\n\n877Purus lorem ante est felis. et Fusce finibus nec\n\n878Sit massa, Fusce rutrum Mauris Sed adipiscing Mauris in, elementum nunc est\n\n879Est in et molestie vitae et dui in, viverra\n\n880Efficitur velit. bibendum, molestie dolor neque. quis, efficitur purus sit elementum elit. efficitur pharetra\n\n881Rutrum felis. semper fames molestie\n\n882Rutrum Interdum nec semper eget dolor felis.\n\n883Ut efficitur orci, iaculis. finibus iaculis.\n\n884Sit hendrerit felis. ante iaculis. rutrum Mauris volutpat massa, sagittis in\n\n885Est adipiscing tincidunt. semper vitae ac posuere Interdum metus sem. ipsum\n\n886Metus semper fames massa, metus sem. fringilla ac\n\n887Semper. Interdum elementum elit. massa velit. condimentum\n\n888In in felis. ante lorem Integer Ut libero enim in sit vel\n\n889Felis. ac elit. sem. ante consectetur Sed elit. Ut In ut\n\n890Enim semper in adipiscing libero efficitur elit. tortor\n\n891Ipsum malesuada neque. malesuada massa, in metus Ut Interdum\n\n892Fames ut\nLorem Interdum ac lorem ante In molestie orci ante ante dolor finibus\n\n893Fusce ante malesuada Duis vitae\n\n894Condimentum\nLorem semper ac in dolor bibendum, pretium Fusce dolor malesuada ut hendrerit\n\n895Ante ac Vivamus vel malesuada ut vitae tincidunt. lorem enim metus\n\n896\nLorem est dui finibus est ligula condimentum amet, amet, ipsum Integer quis, ut Integer\n\n897In tincidunt. efficitur ante Vivamus enim felis.\n\n898Malesuada fames dolor Mauris elit. sagittis Sed\n\n899Rutrum Sed dolor finibus ac\n\n900Ante viverra ante enim nec rutrum sagittis ac volutpat elementum sit sem. pharetra in primis\n\n901Nunc ante ac fringilla consectetur et\n\n902Libero in orci lorem scelerisque Vivamus\n\n903Efficitur est Ut elit. massa\n\n904Eget purus ac est hendrerit pharetra condimentum\n\n905Ante Interdum in consectetur elit. enim\n\n906Tincidunt. sit orci, massa, elit.\n\n907Lorem Interdum metus ipsum est massa amet, velit. sem. ligula efficitur\n\n908Efficitur ligula et ante eget ac nec eget enim nunc condimentum aliquam Integer in\n\n909Sem. nunc ligula vitae Duis ac enim viverra\n\n910Condimentum In quis, enim metus ac ac\n\n911Et hendrerit in Integer velit. sit neque. amet, et metus rutrum efficitur sem. faucibus.\n\n912Viverra lorem elit. elementum in, vitae finibus primis ante consectetur tortor pretium purus\n\n913Primis libero in elementum rutrum dui condimentum\n\n914Rutrum eget\nLorem est elementum\n\n915Enim amet, elit. elementum viverra quis, fringilla\nLorem pharetra\n\n916Libero neque. ut et ante in posuere semper.\n\n917Et bibendum, rutrum lorem eget ante ipsum libero ipsum elementum consectetur orci ante primis\n\n918In posuere quis, lorem posuere\n\n919Vivamus molestie est Integer faucibus. Fusce Integer purus efficitur elit.\n\n920Ipsum ac ipsum fames libero Ut et quis,\n\n921Dui ipsum orci elementum ac Duis efficitur aliquam neque. viverra sem.\n\n922In velit. enim Fusce efficitur enim faucibus. volutpat tincidunt. ante\n\n923Consectetur fames semper. consectetur vel rutrum orci, orci\n\n924Finibus faucibus. volutpat sem. posuere rutrum volutpat ipsum quis, hendrerit orci, malesuada\n\n925Faucibus. Sed Interdum enim sagittis massa, volutpat volutpat Ut ligula\n\n926In semper sem. in ac in molestie ante\n\n927Posuere Fusce ante Fusce et consectetur Integer in\n\n928Eget vel libero molestie pharetra Sed Ut ipsum\n\n929Ac consectetur ut ut semper purus tincidunt. lorem in, Sed\n\n930Mauris nunc felis. ipsum orci libero tincidunt. efficitur rutrum ac dui ipsum nec elementum elit.\n\n931Ut ligula ac sagittis in Interdum faucibus. Integer felis. eget sit\n\n932In posuere in viverra in volutpat finibus nec bibendum,\n\n933Semper. eget rutrum massa ante purus semper. metus ante ac\n\n934Lorem adipiscing elit. sagittis ante posuere elementum adipiscing finibus nec quis, ac ante condimentum\n\n935Ante semper tincidunt. massa efficitur iaculis. purus sem. ut Fusce ac ut\n\n936Elit. efficitur ligula ipsum velit. massa massa ante condimentum fames\n\n937Sed ligula elementum quis, quis, hendrerit malesuada vel\n\n938Est enim Sed elementum Duis\n\n939Amet,\nLorem dui finibus ante consectetur bibendum, et pharetra pretium tincidunt. Interdum\n\n940Elit. vel ante scelerisque ac lorem ac\n\n941Amet, neque. eget lorem bibendum, tincidunt. Interdum lorem Sed iaculis.\n\n942In Interdum pharetra orci, iaculis. ligula molestie\n\n943\nLorem condimentum quis, eget eget nec Sed Duis amet, Sed adipiscing molestie malesuada hendrerit\n\n944Fusce libero vitae Mauris fringilla fames faucibus. iaculis. fames\n\n945Massa, finibus viverra aliquam ut ante Interdum\n\n946Dolor primis Duis ac finibus elementum molestie massa massa dui nec primis elementum\n\n947Orci elit. Interdum fames finibus scelerisque ante pretium est ac\nLorem viverra\n\n948Faucibus. in sagittis posuere ac sagittis rutrum\n\n949In neque. vel dui in\n\n950Rutrum elementum pretium adipiscing est aliquam\n\n951Fusce amet, volutpat aliquam Integer\n\n952Integer consectetur ante adipiscing enim iaculis. adipiscing\n\n953Libero est quis, Sed condimentum\n\n954Ut scelerisque velit. finibus iaculis.\n\n955Enim molestie vel vitae neque. scelerisque in libero consectetur\n\n956Pharetra ac ante ligula Fusce In\n\n957Duis neque. et elit. efficitur dui dui Mauris sit et et ante\n\n958Primis ut ac Mauris pharetra in ut ut finibus viverra\n\n959Interdum ac rutrum et ac sem. eget ac ligula ac purus semper. ipsum aliquam\n\n960Semper libero consectetur\nLorem dui ante\n\n961Interdum pharetra enim eget ipsum Mauris In ipsum Fusce fringilla in ac nec elementum\n\n962Ut condimentum vel pretium in molestie amet, tincidunt. efficitur elit. ante primis purus Vivamus\n\n963Efficitur nunc Ut bibendum, sem. in ac\n\n964Eget elit. Integer enim pretium tortor eget rutrum elit. purus iaculis. et amet,\n\n965\nLorem semper. nunc adipiscing sit volutpat tincidunt. Fusce nec efficitur primis et consectetur consectetur\n\n966Vel Vivamus eget pretium nec purus Ut Interdum\n\n967Ut faucibus. Mauris hendrerit\nLorem\n\n968Nunc In pretium eget efficitur pharetra orci, libero In ante elementum scelerisque purus efficitur Interdum\n\n969Pharetra in tortor fames dui iaculis. molestie in sagittis molestie iaculis. nunc in\n\n970Ligula elit. In felis. ac ante\n\n971Vel metus\nLorem efficitur Vivamus in orci In felis. Ut\n\n972Dolor Interdum velit. dui Fusce orci lorem\n\n973Volutpat semper. rutrum fringilla ac\n\n974In, vel nec massa finibus finibus adipiscing\n\n975Ac massa, ipsum In in sit Sed enim in\n\n976Vivamus est volutpat nec ligula\n\n977Sem. Mauris tortor ipsum iaculis. elit.\n\n978Finibus lorem rutrum massa in sagittis dolor semper.\n\n979Consectetur nec purus fringilla ac ac elit. dui ante\n\n980Nec Ut pretium ante orci ante\n\n981Pretium Fusce iaculis. bibendum, tincidunt. nunc pretium vel adipiscing\n\n982Adipiscing fringilla In efficitur ipsum lorem et pretium et quis,\n\n983Ac condimentum purus ante massa Sed bibendum, elementum faucibus. in, ac orci, sem. dui in\n\n984Et ligula elementum quis, ut Vivamus vel semper massa, massa\n\n985Condimentum eget et dolor orci, ante orci, Mauris Mauris in, purus in\n\n986Viverra tincidunt. semper. Mauris faucibus. Ut neque. massa, purus ut faucibus. ante adipiscing\n\n987Ac pretium Interdum bibendum, enim elementum\n\n988Vivamus enim tincidunt. adipiscing massa, ipsum enim\n\n989Molestie condimentum scelerisque efficitur purus pharetra finibus elit. libero\n\n990Vel finibus\nLorem bibendum, est nec efficitur efficitur Fusce ac in\n\n991Velit. consectetur enim Sed bibendum, enim eget semper. lorem condimentum ligula\n\n992Eget hendrerit Vivamus elit. Integer\n\n993Efficitur finibus Interdum orci condimentum\n\n994Semper semper metus Interdum hendrerit fames dui Mauris felis.\n\n995Enim quis, rutrum eget in eget efficitur hendrerit rutrum Integer nunc\n\n996Ac consectetur consectetur ac felis. purus ut Interdum ac ac ut faucibus. eget Ut ut\n\n997Rutrum malesuada rutrum ligula semper.\n\n998Ut metus eget hendrerit adipiscing quis, posuere ac\n\n999Viverra tortor Mauris rutrum elementum amet, rutrum quis,\n\n1000Adipiscing lorem pretium sem. Integer libero ac elit.\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
367
+ "searchText": "Dropdowns\nDropdowns do not change their value when clicking on a menu item. They are usually used for Menus. If you need a component that shows the selected item, use a Select component.\nDropdowns\nButtonDropdown\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 \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nSimpleButtonDropdown\nWrapper component for ButtonDropdown where prop \"noCaret\" is set automatically.\nSingleButtonDropdown\nWrapper component for ButtonDropdown, kept for backwards compatibility.\nSingleButtonDropdown\nSplitButtonDropdown\nWrapper component for ButtonDropdown where prop \"splitButton\" is set automatically.\nSplitButton\n\nSplitButton ButtonDropdown\nDropdownSubmenu\nNormal ButtonDropdown\nnoCaret ButtonDropdown\nSplitButton ButtonDropdown\n\nNormal ButtonDropdown\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| title | string \\| React.ReactNode | '' | Displayed button title. |\n| items | MenuItem[] | — | Items to display in the dropdown sub menu. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\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 \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\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 \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |\nLarge amount of dropdowns in a list or table\nIDContentAction\n\n1Ut faucibus. ac sit consectetur tortor nec in tortor Integer consectetur\n\n2In, dui\nLorem efficitur orci,\n\n3Sem. consectetur elit. orci et amet,\n\n4Nec dui et In ligula aliquam efficitur elementum velit.\n\n5Duis in tortor dolor scelerisque massa, amet, elit. fames bibendum, elit. efficitur Duis\n\n6Scelerisque sem. Integer ante in hendrerit massa,\n\n7Nec ut sagittis adipiscing lorem Mauris posuere adipiscing nec ac bibendum, massa, tincidunt.\n\n8Posuere efficitur consectetur ipsum posuere posuere sagittis massa Duis volutpat vitae adipiscing\n\n9Sit rutrum dolor felis. Duis Mauris ac amet, faucibus. eget Integer molestie ut ipsum\n\n10Adipiscing iaculis. et eget pharetra condimentum Ut lorem ipsum est\n\n11Amet, rutrum ac ac adipiscing In In massa, eget velit. molestie\n\n12In, posuere consectetur ipsum iaculis. libero In et\n\n13Adipiscing ac ac vitae amet, massa eget nec nec\n\n14Volutpat pharetra felis. vel libero fames\nLorem consectetur elementum efficitur ac tortor primis\n\n15Finibus Ut ligula Interdum Ut adipiscing orci, ac neque. elit.\n\n16Semper. eget posuere est dui est posuere Integer\n\n17Vivamus ut orci enim ipsum ipsum sagittis enim faucibus. quis,\n\n18Posuere ut ipsum in quis,\n\n19Sed amet, est dui in, dolor eget nunc ut consectetur sit\n\n20Bibendum, hendrerit orci Sed ante Mauris eget Mauris velit.\n\n21Elit. massa, Duis tincidunt. Ut tortor ante efficitur ac\n\n22Semper. Interdum ipsum consectetur fringilla\n\n23Ante nunc tortor pretium ac Mauris ante elementum elit. malesuada pharetra\n\n24In quis, sem. quis, amet, dui Fusce condimentum massa ante\n\n25Elit. tincidunt. ut neque. lorem in, in orci adipiscing tincidunt. vitae pretium efficitur finibus\n\n26Felis. aliquam ac Mauris rutrum tincidunt. ac vel ac\n\n27Semper rutrum purus iaculis. condimentum massa posuere metus\n\n28Enim dolor rutrum hendrerit malesuada adipiscing viverra metus ante posuere volutpat efficitur\n\n29Ante ipsum fames hendrerit et Ut vitae elementum purus metus consectetur ac In\n\n30Et massa, purus fringilla ipsum quis, faucibus. faucibus.\n\n31Orci, metus est bibendum, ipsum ac\n\n32Eget et scelerisque sagittis viverra vel semper vitae massa vel quis,\n\n33Amet, Fusce enim eget eget rutrum\nLorem ac Interdum felis. Ut\nLorem Sed ante\n\n34Orci, amet, ligula in, malesuada vel orci, consectetur In massa, in, quis, Integer\n\n35Semper ligula condimentum Fusce vitae fames ac aliquam elit. pretium vitae Integer velit. primis\n\n36Ac scelerisque faucibus. et fringilla massa tortor semper pharetra semper. faucibus. rutrum ac\n\n37Rutrum ante posuere consectetur ut ipsum\n\n38Ipsum volutpat massa, enim eget rutrum ipsum velit. quis, felis. Mauris\n\n39Ac eget vel dolor ipsum tortor in condimentum pharetra faucibus. et elit. sagittis\n\n40Orci, sagittis fringilla elit. posuere in, orci dui in Sed\n\n41Libero metus dui in pharetra\n\n42In Vivamus enim dolor semper.\n\n43Ac\nLorem semper vel iaculis. pretium eget molestie eget consectetur efficitur vel nunc dolor Duis\n\n44Consectetur et orci fringilla Ut posuere volutpat Duis nec ipsum tortor quis, ipsum elit.\n\n45Vivamus ante ante iaculis. primis est ante purus sagittis fames consectetur enim molestie eget\n\n46Malesuada primis Vivamus ante scelerisque orci, in Integer libero\n\n47Felis. ipsum efficitur neque. neque. Mauris\n\n48Est nunc in, aliquam finibus faucibus. ut\n\n49Sed aliquam in efficitur sit ac est consectetur sagittis faucibus. sit\n\n50Quis, semper. bibendum, iaculis. posuere ac viverra tincidunt. eget enim\n\n51Metus posuere In condimentum Mauris Vivamus vitae condimentum in adipiscing\n\n52Ante Fusce eget ac iaculis. quis, Mauris Mauris malesuada volutpat consectetur\n\n53Semper. elit. orci elit. rutrum eget dolor in elementum libero felis.\n\n54Consectetur ligula et Vivamus Sed\n\n55Nec iaculis. elementum consectetur consectetur sem. molestie pretium tincidunt. ante viverra consectetur adipiscing vel ligula\n\n56Vel dolor consectetur ut In pharetra tortor Duis consectetur ac dolor pharetra malesuada hendrerit\n\n57Metus\nLorem in faucibus. sagittis et\n\n58Orci ligula Integer\nLorem elementum condimentum lorem neque. Interdum massa eget\n\n59Consectetur elementum elit. malesuada Duis Mauris vel Mauris faucibus. ipsum\n\n60Posuere In hendrerit consectetur ante iaculis. Sed et\n\n61Consectetur Fusce iaculis.\nLorem Integer pharetra est in quis, ut in\n\n62Ut sagittis hendrerit tincidunt. semper. Mauris metus massa, fames sem.\n\n63Ante\nLorem Vivamus neque. orci, neque. volutpat eget massa, fames bibendum, sagittis Vivamus ac in,\n\n64Fusce massa,\nLorem orci, Duis est in In aliquam dui\n\n65Sed et elit. in ante ac Fusce bibendum,\n\n66Ligula pharetra massa, bibendum, vel massa fames ac in volutpat Vivamus adipiscing et\n\n67Ipsum faucibus. efficitur Sed Duis Integer condimentum in molestie consectetur vel Duis Vivamus\n\n68Felis. velit. Integer Vivamus nec est metus tortor semper primis ante ipsum velit. quis, nunc\n\n69Ut fringilla elit. felis. finibus Vivamus et\nLorem\n\n70Semper eget ac ac Sed ac nunc elit. vel est Sed Vivamus\n\n71Ac vel ipsum Interdum dolor orci, et nec Ut elit. In Fusce Mauris\n\n72Elementum sit felis. orci elit. nunc orci orci, metus\n\n73Interdum et consectetur rutrum primis in posuere consectetur posuere elit. efficitur sit\n\n74Ante tincidunt. In Ut finibus sit ac ut in, sem. hendrerit\n\n75Ut sagittis elit. posuere eget aliquam\n\n76Scelerisque faucibus. orci, in nunc est massa lorem Interdum purus dolor Duis vel\n\n77In et ipsum nunc elit. Ut\n\n78Semper quis, in pretium et eget Integer\n\n79Molestie Ut libero faucibus. orci molestie tortor elit.\n\n80Est Mauris eget elit. posuere elit. tincidunt.\n\n81Vitae fames vel aliquam faucibus.\n\n82Finibus in sagittis elit. fames adipiscing velit.\nLorem rutrum hendrerit malesuada ante\n\n83Velit. tortor felis. fringilla Sed bibendum, adipiscing ut viverra Sed adipiscing molestie ac\n\n84Lorem pharetra elit. in, iaculis. amet, finibus massa, nec purus\n\n85In nec condimentum ipsum molestie\n\n86Massa, ut et pharetra tortor pharetra ut massa finibus Duis elementum ipsum\n\n87Rutrum faucibus. Integer malesuada semper in vitae Ut massa, Vivamus elementum eget semper malesuada sem.\n\n88Semper. in Fusce iaculis. hendrerit efficitur sit ipsum in, in Mauris Vivamus velit. Duis\n\n89Nunc rutrum libero Duis nec Vivamus ut ut in libero nec semper\n\n90Sagittis fringilla ante Fusce fames ac\n\n91In Sed ante eget in molestie est Mauris et et elit. Vivamus elit.\n\n92Dui aliquam aliquam nunc orci, et quis,\n\n93Fringilla ac condimentum ligula felis. adipiscing velit. ligula Mauris elit. dui velit. ac\n\n94\nLorem velit. volutpat nec scelerisque\n\n95Ipsum hendrerit nec primis elit. In sem. quis, neque. libero ut Integer iaculis. Ut dui\n\n96Consectetur Vivamus ac bibendum, hendrerit tortor condimentum Interdum ante quis,\n\n97Iaculis. nec orci primis fringilla consectetur ipsum malesuada finibus Fusce sit aliquam efficitur efficitur in\n\n98Eget rutrum elit. velit. efficitur aliquam orci ligula ut tortor condimentum elementum viverra in, Integer\n\n99Orci pretium Vivamus faucibus. purus Vivamus Duis felis. efficitur scelerisque\n\n100Metus massa, adipiscing elit. sit Vivamus Interdum ipsum et sit sagittis Vivamus tincidunt.\n\n101Quis, Sed tincidunt. est finibus hendrerit bibendum,\n\n102Sagittis adipiscing tincidunt. et Integer pharetra sit volutpat lorem vitae Duis efficitur\n\n103Sit hendrerit ipsum libero molestie massa,\n\n104Ipsum sem. malesuada et in massa eget pharetra in primis Vivamus tincidunt. ipsum hendrerit in,\n\n105Fames tortor tincidunt. aliquam dolor in consectetur semper ante\n\n106Ut faucibus. molestie molestie libero\n\n107Ac semper. efficitur vitae consectetur hendrerit\n\n108Lorem ac ut In eget elementum Vivamus amet, in, consectetur Ut pretium aliquam\n\n109Iaculis. ac dolor semper. tortor volutpat eget eget elementum\n\n110Volutpat Duis ipsum Fusce ipsum semper.\n\n111In tortor Duis scelerisque molestie ut in primis sem. sem. faucibus. malesuada\n\n112In tincidunt. in, enim In orci enim metus\n\n113Sagittis viverra massa\nLorem pharetra in tortor condimentum condimentum dolor Vivamus semper efficitur faucibus. purus\n\n114Rutrum vel in ac orci Ut amet, ante et efficitur\n\n115Sit pretium ac elementum enim efficitur\n\n116Massa, orci, et ac ipsum enim fames felis. Integer pharetra nec\n\n117Quis, dui\nLorem lorem rutrum sem. orci molestie Integer libero sagittis quis,\n\n118Dolor In ante pharetra ac condimentum faucibus. semper\n\n119Primis aliquam amet, felis. bibendum, orci ligula viverra et posuere orci\n\n120Quis, condimentum consectetur lorem finibus amet, semper efficitur fringilla Vivamus ac lorem ante\n\n121Consectetur lorem vel dolor sit\n\n122Massa primis libero et Integer iaculis. elementum ipsum vitae eget Ut Interdum efficitur molestie\n\n123Semper Fusce neque. semper. eget consectetur vitae Duis vel ipsum nunc ipsum est\n\n124Sit fringilla vel ut consectetur neque. lorem vitae ante quis, fringilla\n\n125Adipiscing aliquam Mauris pretium elit. Mauris malesuada felis.\n\n126Amet, ac finibus ut quis, scelerisque neque. fringilla Interdum fames\n\n127In rutrum Vivamus enim iaculis. consectetur purus ligula est efficitur Sed et ac Interdum amet,\n\n128Ac dolor bibendum, tincidunt. elit. hendrerit malesuada iaculis. elit.\n\n129Ac sit ipsum purus finibus pharetra posuere scelerisque ac hendrerit\n\n130Vivamus scelerisque ut Mauris bibendum, Integer in vel quis, ante Mauris Vivamus\n\n131Vivamus aliquam et nec faucibus. ligula semper. eget posuere Vivamus efficitur in rutrum metus et\n\n132Pharetra ac quis, ipsum sit\n\n133Fringilla enim ut sem. Mauris\n\n134Lorem metus semper finibus tortor metus in, quis, vitae ante orci,\n\n135Mauris ante tortor ante In ac Fusce libero scelerisque ut in, orci\n\n136Fringilla fames bibendum, Ut condimentum In massa, ante viverra Duis sem. elit. ante eget metus\n\n137Est consectetur ipsum Duis Vivamus ac faucibus. aliquam\n\n138Elit. ac ante sit Integer nec volutpat ante\n\n139Molestie nec bibendum, metus aliquam\n\n140Interdum condimentum ante pharetra vel Fusce est scelerisque orci consectetur orci faucibus.\n\n141Viverra et efficitur Integer eget Interdum iaculis.\nLorem Fusce Duis vel ac Interdum\n\n142Massa, eget posuere Mauris vel nec\n\n143In amet, ante Vivamus malesuada consectetur metus viverra ac ac Ut orci,\n\n144In enim elementum est scelerisque tincidunt. Integer ipsum amet, tortor\n\n145Ac ipsum nunc dui Interdum consectetur eget felis. quis, pretium fames Integer efficitur\n\n146Semper. iaculis. consectetur massa, enim nunc in Integer Sed ipsum\n\n147Orci et posuere elit. quis, scelerisque enim elementum ac rutrum\n\n148Tincidunt. Fusce aliquam Ut eget fames posuere\n\n149Efficitur Mauris posuere Duis elit. elementum hendrerit ligula\n\n150Dolor Sed ante volutpat molestie faucibus. elit. nec metus sem. Integer libero ipsum\n\n151\nLorem ac tortor ipsum Interdum lorem orci Sed lorem scelerisque Interdum fames lorem\n\n152Ut felis. malesuada eget quis, Mauris hendrerit finibus adipiscing\n\n153\nLorem consectetur In semper. ac iaculis. ante metus condimentum neque.\n\n154Tortor ac ac ipsum vel metus ante malesuada tortor volutpat primis primis ut malesuada\n\n155Ipsum semper ac viverra vel ligula in massa\n\n156Orci, iaculis. Sed elit. nec in eget hendrerit\n\n157Volutpat in, molestie ut ante ante bibendum,\n\n158Fames vitae ante ipsum fames metus amet, neque. aliquam et Sed libero viverra finibus\n\n159Fringilla elit. vel neque. condimentum\n\n160Ut vel malesuada sagittis in\n\n161Ante eget fames nunc scelerisque velit. libero vitae rutrum ipsum faucibus. metus rutrum quis, elit.\n\n162Ante pharetra semper. ligula efficitur scelerisque metus consectetur metus\n\n163Eget semper. faucibus. efficitur efficitur in In bibendum, ut primis\n\n164Eget viverra consectetur et adipiscing semper. et elementum Fusce lorem condimentum ac\n\n165Finibus viverra neque. semper amet,\n\n166Primis ipsum ut rutrum adipiscing hendrerit in efficitur elit. hendrerit orci,\n\n167Fusce purus amet, adipiscing et massa, pretium iaculis. libero ipsum viverra volutpat lorem\n\n168Pretium quis, malesuada et dolor dui volutpat dui volutpat malesuada molestie ut ac elit. sagittis\n\n169Ante rutrum ante sit enim ac\n\n170Faucibus. ut faucibus. pharetra\nLorem ac nunc primis viverra\n\n171Massa in tincidunt. hendrerit amet, massa, est consectetur\n\n172Ante massa in consectetur ut Ut posuere Mauris Sed rutrum nec In\n\n173In sem. elit. ut semper.\n\n174Semper. amet, ac in ut viverra hendrerit pharetra lorem finibus semper\n\n175Posuere condimentum consectetur condimentum adipiscing eget malesuada\n\n176Ligula consectetur Mauris ac consectetur efficitur dolor Fusce\nLorem\n\n177Metus ante faucibus. sit volutpat\n\n178In ut orci ac consectetur in elit. malesuada molestie purus enim ac\n\n179Pretium purus ante felis. malesuada massa, massa libero ut dui\n\n180Pretium rutrum sem. massa, scelerisque scelerisque\n\n181Ut est Vivamus massa, consectetur efficitur massa eget quis, Mauris sit Duis\n\n182Fames viverra dolor Fusce libero posuere ac posuere felis. Sed\n\n183Scelerisque posuere ipsum ipsum faucibus.\n\n184Felis. Integer et lorem felis. consectetur efficitur Integer\nLorem felis. in volutpat\n\n185Dui Mauris Ut quis, sem. amet, efficitur massa,\n\n186Est consectetur dui ante purus vitae efficitur bibendum, primis nunc\n\n187Primis eget Interdum est purus consectetur in, ac adipiscing\n\n188Orci adipiscing Mauris Mauris elementum semper. efficitur massa viverra in, molestie in semper iaculis.\n\n189Consectetur fringilla orci sit orci metus Mauris orci\n\n190Dui eget sit viverra ante\n\n191Ante semper Duis efficitur tortor viverra\n\n192Sed nunc in\nLorem ac bibendum, quis, ac posuere ac\n\n193Semper semper. rutrum iaculis. nunc tortor Sed\n\n194Amet, eget et bibendum, semper. bibendum, ante felis. ligula et ac viverra\n\n195Consectetur orci, amet, amet, ac purus et vitae ut posuere\n\n196Scelerisque ac rutrum eget massa et ante in lorem vitae in, et\n\n197Adipiscing ac velit. elit. ante Fusce scelerisque\n\n198Scelerisque consectetur primis massa, ante pharetra adipiscing massa, dui pharetra\nLorem elit. sit\n\n199Interdum est velit. in volutpat finibus elit. orci\n\n200In tincidunt. primis primis elit. condimentum ac pharetra vel\n\n201Consectetur sagittis iaculis. scelerisque consectetur elit. sagittis vitae Sed Duis elementum libero condimentum Integer\n\n202Ut et viverra purus condimentum ut eget Interdum fames\n\n203Malesuada Sed condimentum ac consectetur in primis tortor\n\n204Tortor ante ac et quis, eget efficitur enim sem. purus semper consectetur pretium\n\n205Velit. vel viverra volutpat dolor sit scelerisque malesuada semper. velit.\n\n206\nLorem condimentum ligula molestie ut adipiscing fames orci, ut\n\n207Ante ante ac massa, tincidunt.\n\n208Felis. ut posuere pharetra et hendrerit\n\n209Sem. condimentum libero massa, ac\n\n210Eget ligula sagittis orci Mauris Ut neque. scelerisque libero Fusce sem. rutrum\n\n211Orci, massa, Mauris ante fames vitae Integer neque. adipiscing in eget\n\n212Ac purus metus in, In\n\n213Tincidunt. ac primis amet, Sed in\n\n214Mauris metus ante tortor in tortor rutrum faucibus. sem. semper elementum nec purus\n\n215Elit. ac eget sem. in in in hendrerit\n\n216Elementum elit. ut Mauris semper enim scelerisque quis, posuere\n\n217Sagittis bibendum, fringilla massa sagittis viverra enim elementum ut Vivamus consectetur Vivamus ipsum\n\n218Sit efficitur metus faucibus. adipiscing dui lorem semper. bibendum, purus malesuada elit. tortor elit. enim\n\n219Mauris sit metus Mauris nec dui ac Ut\n\n220Vivamus viverra in fames velit. orci,\n\n221Fusce ac dolor enim elementum bibendum, finibus in efficitur\n\n222Malesuada felis. tortor Vivamus elementum et ac elit.\n\n223Consectetur ipsum ac ut elit. ante finibus metus eget ligula orci ut amet,\n\n224Bibendum, est elit. Ut est posuere vitae elementum et In\n\n225Ac et ac hendrerit metus fringilla\n\n226Fames scelerisque eget dolor posuere Vivamus dolor sagittis\n\n227Fames eget orci, finibus Vivamus scelerisque pretium ac in Ut ac in,\n\n228Finibus vel fames scelerisque\nLorem in in est in faucibus. lorem ligula ac\n\n229Dui elit. Ut tortor semper est amet, est sit iaculis. pretium\n\n230Dolor orci, tortor in libero faucibus. orci tortor velit.\n\n231Semper felis. fringilla lorem Fusce posuere velit. ante ac aliquam libero condimentum\n\n232Eget libero efficitur est In pretium fringilla condimentum Fusce consectetur lorem in\n\n233Eget velit. dolor malesuada consectetur purus tortor sagittis nunc faucibus. ipsum massa\n\n234Et viverra eget bibendum, ac Interdum hendrerit tortor aliquam\n\n235Vivamus semper. libero elementum ac elit. enim Vivamus enim vel tincidunt. ante Integer faucibus. pharetra\n\n236Felis. dolor semper orci est in in tortor sem. scelerisque\n\n237Sagittis enim libero semper Interdum libero ac\n\n238Finibus vitae Mauris in eget\n\n239Scelerisque purus molestie enim efficitur massa,\n\n240In Ut efficitur in hendrerit malesuada\n\n241Ac ac lorem finibus malesuada orci, Sed tortor dui ac dolor tincidunt.\n\n242Fusce malesuada primis finibus ac ipsum dui bibendum,\n\n243Orci faucibus. hendrerit condimentum Integer primis ac\n\n244Hendrerit finibus dui tortor ac efficitur\n\n245Libero molestie scelerisque orci, consectetur velit. amet, in aliquam fames semper in, et\n\n246Libero purus lorem sem. molestie molestie\n\n247Semper neque. vitae orci elit. elementum ipsum primis quis, Mauris Interdum semper. in pretium ut\n\n248Adipiscing orci et lorem massa, aliquam orci,\n\n249Metus condimentum dui massa hendrerit Integer ut pharetra libero ligula eget viverra ipsum in nunc\n\n250Sed bibendum, semper. neque. ipsum fringilla Fusce ut dui\n\n251Interdum in, ipsum ac ut et vitae dui sem.\n\n252Ac viverra molestie ac efficitur Vivamus purus condimentum\n\n253Ante in, orci, Vivamus ligula nunc iaculis. nec\n\n254Condimentum purus ante dui pharetra hendrerit felis. libero\nLorem in fringilla\n\n255Tincidunt. vel tortor fames ipsum sagittis bibendum, eget Ut est\n\n256Metus efficitur Vivamus posuere primis ante pharetra Interdum libero vel fames ac vel\n\n257Elementum Interdum viverra in, nec ante bibendum, Ut neque. et et quis, amet,\n\n258Et felis. est In ut adipiscing fringilla elementum ac\n\n259In consectetur semper. Fusce Interdum sem. malesuada tortor et ante orci, Duis consectetur in,\n\n260Primis malesuada ante aliquam semper ante\n\n261Ac tincidunt. massa, libero in tortor pretium amet, primis orci, ac posuere massa, eget\n\n262Integer aliquam faucibus. pretium nec velit.\n\n263Massa in Vivamus dolor molestie Interdum Mauris in elit. ante ante in eget\n\n264Sagittis ipsum ac Vivamus ac lorem velit. consectetur pharetra dolor\n\n265Ut Integer vel eget quis, in,\n\n266Semper velit. eget vitae volutpat volutpat\n\n267Eget Interdum pretium volutpat ligula massa, Integer dui et et\n\n268Fusce ipsum Vivamus efficitur in volutpat primis hendrerit Fusce enim\n\n269Scelerisque enim fringilla malesuada Sed orci neque.\n\n270Lorem pretium felis. fames consectetur\n\n271Libero ante Interdum fringilla semper. metus\n\n272Finibus ante dolor ut amet,\nLorem ipsum malesuada nec ac ut massa In pharetra\n\n273Ante in tincidunt. fames lorem viverra orci, libero libero Vivamus finibus ac eget eget dolor\n\n274Hendrerit ante et elementum vitae rutrum ante semper\n\n275Metus volutpat faucibus. neque. est et\n\n276Fusce iaculis. massa, quis, nec efficitur sagittis\n\n277Fringilla Sed ac ut ante in neque. dolor in, In Fusce dolor primis dui Integer\n\n278Fringilla est metus fames velit. efficitur eget felis. enim elit.\n\n279Vel ante Ut ante massa sit ipsum\n\n280Velit. in velit. felis. vel semper. quis, consectetur eget lorem tortor massa\n\n281Scelerisque Interdum malesuada posuere efficitur molestie iaculis. ut pretium dui Mauris\n\n282Ac rutrum velit. vel Ut in, ipsum volutpat malesuada et in\n\n283Ut sit felis. felis. metus\n\n284Purus tincidunt. malesuada nunc rutrum posuere ante sem. ipsum adipiscing tincidunt. vitae dolor\n\n285Elementum volutpat Fusce efficitur ac ac metus in Duis ut semper purus molestie efficitur\n\n286Libero neque. consectetur neque. neque. in dui elit. efficitur sit ipsum massa,\n\n287Et amet, efficitur et posuere tortor velit. sit\n\n288In, In et ut Sed consectetur tincidunt. efficitur orci est elit. ut ut in\n\n289Sagittis fames massa, ante condimentum vel Duis hendrerit\n\n290Iaculis. posuere Vivamus pharetra fringilla est pharetra molestie\n\n291Ac orci, sit in volutpat pretium molestie quis, dolor tortor enim vitae et ac eget\n\n292Quis, fringilla ante finibus molestie elit. nunc aliquam libero ac\n\n293Orci, dui in\nLorem fringilla purus sem. faucibus. ligula efficitur purus\n\n294Massa semper pretium nec Mauris nec efficitur purus hendrerit elit. bibendum, hendrerit primis Ut\n\n295Primis purus felis. eget in Mauris\n\n296Ligula volutpat lorem felis. in est massa, efficitur pharetra rutrum elit. bibendum,\n\n297Dui semper consectetur nec ac eget bibendum, orci, massa scelerisque ante semper condimentum dui\n\n298Finibus viverra sagittis ac semper purus est In ut ipsum volutpat molestie\n\n299Sagittis ipsum libero ut dolor amet, ipsum Fusce adipiscing semper. ac in\n\n300Ipsum enim orci, aliquam molestie in sit Sed eget bibendum, Integer ut felis.\n\n301Ipsum ligula massa, adipiscing vel Vivamus semper. massa primis Interdum\nLorem volutpat faucibus. vel\n\n302Eget adipiscing scelerisque faucibus. tincidunt.\n\n303Ante in nec faucibus. aliquam in elementum vel\n\n304Sem. orci massa, orci Interdum rutrum\n\n305Velit. in, ut semper in pharetra sem. sit Ut lorem elementum bibendum, Integer dui hendrerit\n\n306Metus ac purus massa sem. pharetra neque. ante finibus finibus scelerisque consectetur condimentum ipsum et\n\n307Vivamus consectetur Fusce viverra orci, ante\n\n308Ipsum nunc elit. est condimentum Mauris felis. sem. nunc\n\n309Consectetur consectetur semper Sed Mauris pretium libero ante ut viverra sem. tincidunt. massa enim hendrerit\n\n310Sit est posuere posuere elit. amet, viverra elementum ac ac eget\n\n311Elit. ac ante orci finibus iaculis. primis primis consectetur Mauris\nLorem ante ipsum ac Sed\n\n312Libero Fusce purus sagittis ut primis lorem Ut\n\n313Orci Ut elit. nunc et metus condimentum aliquam ac ut purus viverra\n\n314Ut pretium semper sit quis, dolor enim elementum aliquam ligula ipsum\n\n315Viverra efficitur orci, nunc nunc quis, Fusce fames et\n\n316Ac neque. consectetur Interdum elit. purus sem. ipsum tortor libero ligula ligula\n\n317Interdum scelerisque ante scelerisque ipsum in In eget pharetra\n\n318Tortor orci, libero sagittis amet, ac primis est tortor in\n\n319Ac vel est molestie metus ac posuere\n\n320Viverra ac bibendum, adipiscing eget rutrum ligula\n\n321Molestie ut quis, viverra dolor\n\n322Volutpat elit. ac ipsum finibus massa, volutpat scelerisque\n\n323Est molestie lorem tortor semper pharetra faucibus. hendrerit amet, massa, Interdum vel\n\n324Adipiscing Integer bibendum, ut Mauris lorem sem. posuere adipiscing ac et dui\n\n325Finibus ligula in ipsum tincidunt. metus sem. volutpat\n\n326Sem. nec eget ipsum semper Integer sagittis rutrum malesuada Interdum iaculis. hendrerit enim orci,\n\n327Tortor Duis ac iaculis. est dolor elit. sem. quis, dolor massa,\n\n328Efficitur ac vitae sem. massa in bibendum, lorem sagittis hendrerit libero\n\n329Et orci, quis, sagittis Ut elementum Integer ligula massa\n\n330Nec iaculis. ac fames ac lorem in scelerisque tortor faucibus. vel In\n\n331Viverra et elementum hendrerit ipsum purus Mauris ante\n\n332Vivamus eget fringilla posuere posuere sagittis massa, ipsum orci et In libero elit.\n\n333Scelerisque ut faucibus.\nLorem quis, condimentum posuere dui viverra\n\n334Ipsum molestie hendrerit massa, orci, est ante hendrerit Fusce ante\n\n335Ante massa, In eget in volutpat\n\n336Aliquam pharetra et sagittis semper. primis hendrerit\n\n337Semper. volutpat iaculis. Sed fringilla semper in molestie ante amet, Mauris eget\n\n338Consectetur dui tincidunt. eget Duis efficitur fringilla vitae fringilla est efficitur volutpat quis, faucibus.\n\n339Felis.\nLorem elit. elementum libero ante purus Mauris\n\n340Faucibus. felis. eget Integer felis. hendrerit volutpat lorem\n\n341Viverra ligula viverra malesuada ut Integer\n\n342Ut in iaculis. ac elit. consectetur ante ante malesuada nec Mauris primis semper.\n\n343Lorem efficitur sagittis nec ut ipsum ipsum ac efficitur dolor tortor Sed\nLorem\n\n344In dolor orci, ac lorem Ut lorem ante semper semper posuere semper.\n\n345In purus efficitur hendrerit lorem consectetur dui\n\n346Efficitur amet, Fusce volutpat semper Integer Interdum ante et felis. aliquam\n\n347Pretium eget primis libero et massa, semper dui\n\n348Elit. semper. Sed Sed primis molestie sagittis elit. Interdum ipsum vel\n\n349Iaculis. Integer lorem in, amet, vel dui ut in\n\n350Purus velit. orci, felis. aliquam Fusce sit In Interdum aliquam nunc ac\n\n351In iaculis. posuere elit. primis metus enim ipsum ipsum scelerisque Interdum Fusce volutpat\n\n352Ante rutrum vel ante aliquam Sed vitae elit. quis, ipsum\n\n353Volutpat Interdum semper ante quis, ac vitae semper. fringilla in pretium Duis\n\n354Libero efficitur purus ut massa, malesuada ut condimentum elit. consectetur sagittis quis,\n\n355In, viverra ac eget vel vel orci,\n\n356Integer elit. efficitur Vivamus condimentum felis. vitae elit. Mauris posuere eget efficitur in\n\n357Nunc finibus bibendum, amet, massa metus aliquam eget finibus\n\n358Ante Mauris in Sed consectetur ipsum enim\nLorem adipiscing massa tortor purus\n\n359Hendrerit in Sed ipsum volutpat enim Interdum sagittis nunc orci purus est\n\n360Tincidunt. massa efficitur massa est amet, adipiscing ligula condimentum semper Ut orci ut\n\n361Aliquam viverra Fusce semper ac faucibus. orci, aliquam purus purus velit. ut ante\n\n362Massa, enim ac metus adipiscing Mauris aliquam orci, sit ac elit. Mauris Duis\n\n363Consectetur molestie sit massa, posuere\n\n364Ut posuere adipiscing vel felis. ut vel elit.\n\n365In ipsum bibendum, in primis nec ac\n\n366Ac nec elementum libero nunc Vivamus massa in, Sed dui semper. fringilla dui libero\n\n367Elit. posuere Ut metus vitae pretium ante ligula malesuada sem.\n\n368Volutpat pretium elit. Duis ante malesuada massa, amet, viverra consectetur\n\n369Viverra Mauris primis Sed nec ac fames nunc Ut\n\n370Sagittis ante Sed massa elit. efficitur molestie pharetra eget\n\n371In est primis vel faucibus.\nLorem in, rutrum est ligula massa quis, Mauris\n\n372Massa, enim ligula aliquam felis. primis libero Interdum ac molestie bibendum, consectetur faucibus. Fusce bibendum,\n\n373Sit felis. fames elementum et ut\n\n374Dui et ante semper efficitur orci Integer\n\n375Consectetur in ante Duis lorem semper. sagittis et ac Ut ac lorem vel Fusce\n\n376Efficitur consectetur ac semper ac Fusce purus in, faucibus.\n\n377Consectetur tortor ligula nunc ante\n\n378Tincidunt. enim faucibus. In ut elementum orci, primis eget Fusce et\n\n379Molestie finibus orci, primis amet, ut in ante eget Sed faucibus.\n\n380Eget efficitur Sed viverra efficitur Interdum sem. dui\n\n381Efficitur sagittis consectetur finibus fringilla ac sem.\n\n382Massa metus efficitur efficitur elit. sit consectetur Ut In et bibendum, dui\n\n383Massa, in in eget hendrerit eget tincidunt. Mauris neque. massa orci, consectetur volutpat\n\n384Semper Integer In tincidunt. molestie velit.\n\n385Efficitur amet, ipsum In sem. libero in efficitur orci eget ac\n\n386Orci ac elementum primis et molestie scelerisque in tortor\n\n387Orci malesuada primis dui vitae aliquam\n\n388Adipiscing posuere vitae viverra fringilla adipiscing\n\n389Enim finibus finibus massa ut\n\n390Quis,\nLorem Ut iaculis. felis. fames elit. tincidunt. dui dolor faucibus. elementum sem. ipsum\n\n391Scelerisque est ipsum scelerisque elit. ipsum sem. iaculis. pretium elit.\n\n392Ac pharetra lorem ac efficitur ipsum Mauris elementum\n\n393Vitae fames fringilla elit.\nLorem fringilla\n\n394Efficitur ante faucibus. ligula bibendum, ligula malesuada amet, Interdum amet, condimentum enim aliquam orci\n\n395Ut pretium semper. ac molestie vitae eget est vitae ac semper. hendrerit libero\n\n396Volutpat ipsum ac In viverra hendrerit volutpat vitae sit fames vel vitae Ut pretium tincidunt.\n\n397Semper. aliquam ante amet, ante Fusce Interdum elementum ut\nLorem Fusce ac\n\n398Eget Fusce neque. lorem bibendum,\n\n399Amet, hendrerit purus\nLorem est est Vivamus malesuada in dolor Vivamus aliquam enim vitae\n\n400Purus orci In nunc Interdum Sed ipsum Ut enim condimentum malesuada orci condimentum ut Ut\n\n401Quis, felis. posuere ligula velit. adipiscing lorem finibus\n\n402Quis, velit. ac tortor fringilla ante rutrum in\n\n403Vel Sed Vivamus Interdum quis, ac Sed et tincidunt. lorem ipsum purus\n\n404Duis metus et nec ipsum\n\n405Felis. ipsum In tortor ut metus fames\n\n406Ac elementum libero Vivamus sem. malesuada semper elementum in dolor amet, volutpat vel\n\n407Ut felis. Fusce enim ut libero ac finibus\n\n408Primis finibus Fusce viverra orci ante purus enim\n\n409Dui enim adipiscing scelerisque lorem volutpat tortor malesuada ac libero ac\n\n410Massa elit. dui enim libero aliquam adipiscing aliquam in, sit fringilla lorem ac eget et\n\n411Ac malesuada efficitur tincidunt. amet, ut in, enim nunc\n\n412Efficitur malesuada in, semper. pretium ut Fusce Interdum felis. hendrerit neque. elementum\n\n413Purus ut tincidunt. metus Fusce dolor tortor viverra Fusce ligula molestie In faucibus. primis\n\n414Iaculis. elementum ac enim Duis ut Interdum scelerisque primis scelerisque\n\n415Fames scelerisque hendrerit ante faucibus.\n\n416Massa, malesuada pretium neque. orci, Vivamus fames ac viverra rutrum amet,\n\n417Sit amet, nec in vitae nec Duis ipsum iaculis. faucibus. Mauris Duis\n\n418Ipsum pharetra nunc ante consectetur elementum est ac amet,\n\n419In, velit. fames faucibus. eget enim\n\n420Metus condimentum in, elit. Sed velit. rutrum Integer volutpat Fusce ut felis. in, massa, Ut\n\n421Nunc ligula viverra Fusce Duis neque. ac Vivamus tortor elementum\n\n422Duis neque. hendrerit dolor Ut semper. ipsum elementum\n\n423Nunc posuere semper sem. hendrerit fames et neque. libero metus lorem\nLorem velit. Ut in\n\n424Condimentum ac tortor scelerisque Mauris\n\n425Eget fringilla hendrerit Duis sagittis ante pretium semper. elit. enim ut elit. semper. purus metus\n\n426Eget massa, viverra iaculis. orci, in, scelerisque orci efficitur elementum in,\n\n427Ac metus consectetur orci orci, semper. faucibus. elementum Mauris nec sem. metus\n\n428Efficitur eget scelerisque malesuada condimentum\n\n429In primis pharetra viverra bibendum, posuere bibendum, ante fames volutpat ac fames elit.\n\n430Est velit. dolor Ut viverra orci Interdum sit Interdum\n\n431Purus efficitur dui ante malesuada fames quis, quis, semper ac neque. elit. Vivamus\n\n432Lorem tortor hendrerit in eget Integer Duis rutrum ante eget sagittis condimentum et in efficitur\n\n433Vel nunc est neque. malesuada neque.\n\n434Efficitur nunc eget ac efficitur in ipsum semper ante elit. nec in\n\n435In, ligula volutpat bibendum, fringilla\n\n436Enim malesuada ac in, In in Ut rutrum eget enim ac orci ante hendrerit\n\n437Duis primis bibendum, Mauris nec sagittis sagittis enim metus felis.\n\n438Ante adipiscing velit. purus quis, Fusce scelerisque ipsum hendrerit amet, viverra ligula hendrerit massa\n\n439Ligula ac posuere et vitae elit. eget pharetra iaculis. dolor eget quis, quis, sit elementum\n\n440Dolor nec bibendum, fringilla rutrum consectetur dui\nLorem semper quis, condimentum Fusce adipiscing bibendum, velit.\n\n441Ac In et dolor elit. ut faucibus. volutpat Integer faucibus. felis. ac amet,\n\n442Volutpat Fusce efficitur ac consectetur posuere semper.\n\n443Dolor elementum Ut bibendum, et Sed posuere ut sit ac lorem\n\n444Et amet, faucibus. Fusce felis. ipsum ligula\nLorem malesuada fringilla nunc ut ante ligula\n\n445Pharetra lorem ut ligula hendrerit massa, consectetur pretium sit fames est purus in et\n\n446Elementum pretium enim in vitae\n\n447Finibus purus eget nec eget adipiscing et ac Ut massa,\nLorem est fringilla\n\n448Consectetur sit amet, nunc Vivamus nunc ipsum efficitur malesuada Duis\n\n449Ut tincidunt. semper. adipiscing viverra metus\n\n450Rutrum felis. iaculis. ante malesuada dolor primis amet, ante enim nunc metus\n\n451Ut in elit. elit. orci, ante et metus faucibus. amet, elementum faucibus. vel nec ante\n\n452Velit. in nunc rutrum sem. In vitae molestie semper. Interdum fames orci, semper. Integer\n\n453Mauris purus molestie molestie molestie\n\n454Sem. in fringilla iaculis. bibendum, posuere condimentum rutrum pharetra sagittis\n\n455Viverra volutpat semper ac velit. molestie velit. ac in\nLorem adipiscing metus sit\n\n456Enim in, semper viverra efficitur lorem massa Interdum ut semper elementum Vivamus\n\n457Ut nec vitae molestie ante enim est est\n\n458Semper. consectetur malesuada posuere ante\n\n459Metus adipiscing sit pharetra et sagittis elit. elementum bibendum, Mauris felis.\n\n460Adipiscing in, fames viverra amet, malesuada Integer in metus fringilla ligula\nLorem\n\n461Interdum ipsum vel lorem eget in nunc rutrum vitae orci posuere tincidunt. malesuada bibendum, malesuada\n\n462Faucibus. efficitur massa In ante in ut semper. consectetur elit.\n\n463Ac felis. ac efficitur adipiscing sit Fusce rutrum sit ut ante\n\n464In orci ipsum finibus metus eget condimentum eget orci felis. iaculis. ante ac dui\n\n465Ipsum ut molestie massa, orci Interdum Fusce fames ante\n\n466Ante ac in scelerisque In pretium In elementum\nLorem sagittis ut Vivamus\n\n467Volutpat Vivamus finibus in eget\n\n468Orci, hendrerit felis. ut massa fringilla ac faucibus. condimentum ipsum massa enim\n\n469Ac dui ac ipsum dui ut massa fames\n\n470Et aliquam purus ante in nec semper. fames Fusce molestie in ac semper elit. ipsum\n\n471Ut enim bibendum, libero\nLorem ante ipsum neque. nunc libero quis,\n\n472Velit. ante velit. Duis nec massa,\n\n473Integer lorem ligula ut primis Fusce ac et ac sem. sagittis condimentum\n\n474Quis, ante sit nec ut molestie efficitur ante ac\n\n475Aliquam Interdum ut\nLorem efficitur tincidunt. ipsum Sed Ut\n\n476Ante fringilla elit. Vivamus Vivamus efficitur fames elit. iaculis. ante lorem\n\n477Faucibus. eget in, ac ac ipsum in elit.\n\n478Elementum ipsum ut tortor neque.\n\n479Dolor Ut ipsum in Sed viverra in\n\n480Ut neque. massa ipsum efficitur dui elit. sagittis dui adipiscing ut\n\n481Amet, ut dui eget felis. vel et elit. volutpat malesuada\n\n482Efficitur Interdum adipiscing est sit Mauris Ut neque.\nLorem Duis velit. In rutrum elementum\n\n483Mauris molestie libero Duis tincidunt. adipiscing ligula ut fames\n\n484Amet, in, in purus sem. dolor volutpat ante Sed amet, ante\n\n485Dolor primis aliquam vitae consectetur Sed\n\n486Ut iaculis. ac ante ac finibus et\n\n487Ac purus in Mauris in, finibus vitae\n\n488In ac in est\nLorem neque. elit. ipsum et nec rutrum fringilla ut nunc amet,\n\n489Libero pretium ante nec ipsum in malesuada elit. finibus vel pretium sit amet,\n\n490Elementum massa, sem. ac volutpat sit\n\n491Interdum In amet, ligula Interdum semper. quis, et elit. in, in purus\n\n492Fringilla lorem aliquam Fusce sagittis ante ac iaculis. sem.\n\n493Et semper elit. sagittis consectetur Interdum\n\n494Malesuada quis, fringilla et iaculis. ipsum pretium\n\n495Ante est condimentum vel consectetur semper.\n\n496Mauris fringilla felis. pretium elit. eget purus orci, bibendum, fringilla Ut\n\n497Primis ut condimentum posuere fringilla metus in sagittis condimentum eget vel\nLorem\n\n498Mauris viverra quis, Duis ipsum libero purus enim ut semper condimentum ipsum fames\n\n499Rutrum dolor in Sed in ligula\n\n500Quis, vitae eget\nLorem efficitur fames et efficitur libero nunc faucibus. elit.\n\n501Felis. In posuere efficitur primis elit. ac iaculis. tincidunt. consectetur ipsum consectetur Ut Duis enim\n\n502Ligula faucibus. enim purus ipsum dui eget Sed In Integer efficitur Interdum\n\n503Efficitur ut posuere efficitur ac\n\n504Ac eget ac elementum nunc hendrerit consectetur\n\n505Quis, est ante et Fusce malesuada quis, nunc tincidunt.\n\n506Orci quis, Integer Vivamus primis Ut ipsum lorem condimentum posuere vel\n\n507Et Ut libero rutrum efficitur purus Ut eget quis, dui ac pharetra\n\n508Eget sagittis Vivamus ipsum ac ante Fusce tortor in felis. ac massa ac neque.\n\n509Ante neque. vel sem. est primis Sed in purus ac enim Mauris orci In neque.\n\n510Velit. lorem pretium velit. ligula vel fames in et\n\n511In nec ante libero et massa\n\n512Ut bibendum, purus metus Vivamus consectetur finibus faucibus. Integer sem. ut pretium libero\n\n513Quis, massa, tincidunt. ligula dui bibendum, ante Integer Integer adipiscing Interdum primis\n\n514Efficitur pretium Fusce volutpat posuere velit. efficitur in\n\n515Eget ipsum ac purus in Mauris\n\n516Malesuada lorem vitae rutrum velit. volutpat In ac orci,\n\n517Pharetra eget nunc Mauris Fusce Integer\n\n518Sed finibus vel Sed primis massa, In vitae in\n\n519Volutpat ut elit. aliquam condimentum fringilla\n\n520Orci, quis, ante sem. vitae dolor In eget volutpat ante ante ante\n\n521Efficitur hendrerit fames ante efficitur amet, faucibus. volutpat eget\n\n522Felis. ipsum felis. malesuada orci, dui neque. faucibus. orci tincidunt. ante ligula malesuada hendrerit rutrum\n\n523Fusce in ligula ante semper. ipsum Interdum Interdum\n\n524Orci in ante ipsum consectetur bibendum, dolor consectetur Sed Vivamus orci, ipsum nec\n\n525Malesuada felis. Vivamus Duis bibendum, molestie quis, semper. orci,\n\n526Efficitur sagittis vel tincidunt. vel orci in ac quis,\n\n527Bibendum, orci, ante viverra Sed ante primis\n\n528In consectetur ac ante condimentum semper Ut in consectetur Interdum Fusce\n\n529Primis Sed elementum velit. eget et consectetur\n\n530In neque. elit. molestie Mauris primis nunc Duis faucibus. tortor Ut\n\n531Vel ut sagittis nec dui in hendrerit vitae Interdum tincidunt. semper. sem. elit. amet, ante\n\n532Ac neque. posuere rutrum quis, elit. consectetur sit consectetur ante enim consectetur fames elementum\n\n533Ipsum pharetra volutpat felis. efficitur Fusce sagittis fames libero finibus\n\n534Mauris hendrerit semper posuere vel\n\n535Interdum viverra volutpat in, sagittis posuere finibus efficitur\n\n536Interdum ac hendrerit elit. lorem viverra nunc et vitae\n\n537Ac molestie viverra Ut In sagittis Vivamus amet, quis, hendrerit adipiscing sit condimentum nec nec\n\n538Metus ac ac massa dolor ante hendrerit\n\n539Bibendum, vitae molestie ligula scelerisque in\n\n540Ante Mauris finibus sit semper. hendrerit sem. ante amet, sem.\n\n541Ipsum bibendum, hendrerit Integer efficitur et Sed ante fames fames ipsum fringilla ac primis\n\n542Pretium ante fames elit. ac elit.\n\n543Consectetur dolor quis, in in vel\n\n544Interdum Ut orci adipiscing ut ipsum\n\n545Aliquam elit. malesuada Mauris ipsum hendrerit viverra Ut est massa Fusce massa,\n\n546Eget efficitur neque. volutpat volutpat libero\n\n547Orci nec fames ligula eget metus ipsum massa,\nLorem viverra felis. massa ipsum purus\n\n548Felis. quis, viverra Ut tortor molestie orci, et consectetur in felis. ante felis. felis.\n\n549Adipiscing in, vitae ac posuere ac in Ut sit fames\n\n550Posuere elementum efficitur semper In dui ipsum In\n\n551In, est dui Interdum bibendum, ut enim nec molestie pharetra est Interdum semper\n\n552Efficitur viverra amet, molestie iaculis. finibus finibus Integer lorem consectetur ac ipsum Duis elit.\n\n553Semper.\nLorem vitae Interdum nec semper. pharetra Ut sagittis volutpat Integer massa ac\n\n554Elit. elit. aliquam hendrerit ac ut fames ac dolor ut dui\n\n555Orci elementum Interdum Vivamus pharetra quis, dolor consectetur efficitur sit lorem ac massa,\n\n556Ac Fusce Fusce ut tincidunt. malesuada pharetra\n\n557Tortor libero massa, ipsum in rutrum consectetur ipsum tortor\n\n558Hendrerit viverra sagittis ligula viverra finibus\n\n559Iaculis. ipsum adipiscing semper. et neque. Mauris\n\n560Ante velit. et fames Interdum elementum eget sagittis elit. malesuada efficitur Vivamus in neque. et\n\n561Ac ante tincidunt. ac elit. vitae neque. bibendum, semper lorem in felis. vitae Vivamus tincidunt.\n\n562Ut ipsum Vivamus pharetra Sed semper. nunc vel Vivamus Ut nec orci condimentum faucibus. pretium\n\n563Nec quis, libero enim malesuada Vivamus ante in eget viverra viverra Fusce ante\n\n564Iaculis. sem. velit. dui in libero massa ac eget\n\n565Posuere volutpat et aliquam primis iaculis.\n\n566Faucibus. in Vivamus volutpat sagittis ut viverra molestie\n\n567Bibendum, tortor elementum est neque. ipsum et amet, ipsum amet, pharetra\n\n568Aliquam neque. dui rutrum massa nunc ante sagittis\n\n569Et eget ac in, ut velit.\n\n570Velit. metus ac hendrerit elit. ut est orci sem. fringilla massa ipsum Integer viverra\n\n571Elit.\nLorem condimentum nec primis viverra sagittis ante elit. In elit. ante\n\n572Volutpat in pretium nunc neque. elit. elit. finibus faucibus. tortor libero quis, lorem\n\n573Vitae hendrerit molestie neque. In posuere ipsum amet,\n\n574Elementum primis volutpat In lorem molestie semper viverra condimentum efficitur felis. ante primis\n\n575Nunc posuere Vivamus purus consectetur In\n\n576Ante consectetur semper massa ipsum\n\n577Semper velit. volutpat posuere ac in, pharetra fames lorem posuere\n\n578Enim primis ipsum fringilla in, Vivamus nec libero vel libero rutrum faucibus.\n\n579\nLorem finibus tincidunt. neque. scelerisque hendrerit pharetra ac ante Ut ipsum consectetur dui in adipiscing\n\n580Efficitur ac semper. est ac vel Sed Ut\n\n581Neque. malesuada massa, orci, fames hendrerit nec semper ante viverra consectetur velit. in libero neque.\n\n582Ligula felis. eget velit. Duis efficitur in eget et purus et Mauris Vivamus\n\n583Efficitur in consectetur libero eget quis,\n\n584Volutpat eget vitae scelerisque orci, ipsum libero ipsum dolor adipiscing nec efficitur malesuada elit.\n\n585Interdum quis, adipiscing amet, neque. lorem Duis vitae efficitur ante ante quis,\n\n586Ligula lorem sit elit. eget vitae eget sem. vel adipiscing ac\n\n587Duis in Integer neque.\nLorem posuere Fusce et\n\n588Primis orci consectetur hendrerit ipsum elit. ac semper. libero fringilla\n\n589Elementum semper. felis. massa ac Sed Sed quis, Interdum\n\n590Malesuada semper sagittis ante libero in hendrerit eget nunc malesuada\n\n591Bibendum, ut bibendum,\nLorem ac consectetur tincidunt.\n\n592Interdum ut vel metus elit. ipsum ante libero dolor orci, quis, dolor Fusce neque. in\n\n593Hendrerit elementum ligula iaculis. purus elit. orci, aliquam ac massa, Interdum volutpat pretium elit. Vivamus\n\n594Ante massa in est tincidunt. in, aliquam amet, tincidunt. efficitur viverra condimentum amet,\n\n595Eget hendrerit nunc dolor et massa, tincidunt. malesuada ac lorem enim condimentum ante sit\n\n596Aliquam massa semper. nunc velit. dolor eget quis, ligula massa vitae\nLorem in,\n\n597Semper massa malesuada ante ac efficitur Vivamus consectetur\nLorem malesuada vel\n\n598Massa, quis, enim ante amet, hendrerit scelerisque ac et rutrum lorem\n\n599Orci, finibus libero consectetur ante Vivamus lorem rutrum purus pharetra consectetur et Mauris rutrum ligula\n\n600Nec Interdum vel In Sed dolor tortor malesuada sit et efficitur elit. primis\n\n601Libero sagittis lorem Sed primis enim elit. vitae efficitur velit. Duis pretium\n\n602Faucibus. viverra rutrum tincidunt. felis. consectetur malesuada in ut\n\n603Interdum ipsum efficitur fringilla molestie consectetur pretium pharetra posuere et\n\n604Consectetur vel elit. efficitur semper ante libero felis. finibus consectetur ipsum\n\n605Molestie et lorem massa molestie enim semper ut enim\n\n606Rutrum hendrerit enim ipsum massa, Interdum felis. felis. lorem ac fames\n\n607Eget Sed libero condimentum Duis pharetra\n\n608Ipsum iaculis. ut ligula in libero in purus Sed velit. massa, aliquam Interdum in orci,\n\n609Finibus dolor lorem orci, aliquam dolor Interdum nunc\n\n610Nunc scelerisque semper. semper. ligula\n\n611Quis, finibus\nLorem in, malesuada in lorem libero fames semper. In lorem tortor ac\n\n612Bibendum, elit. condimentum molestie semper. metus Interdum metus in malesuada malesuada Integer\n\n613Et consectetur ac metus tortor malesuada ac\n\n614Pharetra Integer massa, purus in ac posuere et\n\n615Vivamus et dolor faucibus. elementum faucibus. nunc finibus purus velit. Ut posuere iaculis. sit enim\n\n616Et scelerisque semper. Fusce in neque. dolor metus\nLorem enim volutpat\nLorem massa,\n\n617Duis elit. malesuada ac ut Mauris ipsum fringilla ipsum\n\n618Orci felis. malesuada semper. ac In Fusce sem. semper. ac ante nec\n\n619Ut scelerisque ante aliquam dolor\n\n620Massa dui eget dolor\nLorem neque.\n\n621Fringilla dui ipsum dolor molestie ipsum Mauris elit. Vivamus\n\n622Efficitur orci, ut Mauris volutpat orci, massa ligula ante ut tortor bibendum, iaculis. fames\n\n623Condimentum Interdum Sed in consectetur ipsum enim primis aliquam et malesuada felis.\n\n624Mauris adipiscing Duis vitae tincidunt. consectetur ac vitae condimentum Fusce dui fringilla sagittis rutrum\n\n625Semper sagittis in purus velit. in semper\n\n626Nunc fames Vivamus nec eget bibendum, finibus felis. purus\n\n627Ante Ut libero fringilla est hendrerit consectetur Interdum\n\n628Integer sagittis primis ut in sagittis aliquam Fusce\n\n629Sem. ac quis, in malesuada aliquam ac ipsum et sagittis libero\nLorem eget nec\n\n630In adipiscing condimentum sagittis aliquam Vivamus Integer elementum semper\n\n631Semper. eget Interdum finibus Sed adipiscing in, primis massa aliquam malesuada elit.\n\n632Ac nec Vivamus finibus pretium consectetur neque. nec ut sagittis elementum lorem elit.\n\n633Malesuada pretium Integer pretium\nLorem eget ac neque. Sed fringilla\n\n634Ante\nLorem Ut molestie amet, ante scelerisque dolor sagittis massa in, et Vivamus\n\n635Tortor vel viverra Mauris Fusce velit. ut\nLorem orci et neque. bibendum, sagittis\n\n636Orci, Mauris adipiscing nec neque.\nLorem neque. efficitur\n\n637Ut Integer fames ut molestie libero\n\n638Nunc dui Duis eget felis. libero\n\n639Elementum consectetur orci aliquam finibus Vivamus et sem. hendrerit velit. quis, ac\n\n640Ligula ante ipsum fringilla purus sit sem. ligula nec efficitur ante\n\n641Nunc hendrerit nunc fringilla sit malesuada malesuada et ligula ac semper. viverra purus\n\n642Integer neque. amet, ac enim tincidunt. neque. sagittis\n\n643Fames iaculis. rutrum consectetur et tincidunt. Ut in in, est enim dolor\n\n644Consectetur elementum semper. ac fames semper enim est\n\n645Vivamus volutpat efficitur in ipsum faucibus. ligula est primis pretium in Sed\n\n646Neque. consectetur Sed eget vel vel ac viverra\n\n647Sagittis efficitur Fusce fringilla dolor primis purus ante nec consectetur Sed sagittis neque. eget\n\n648Vivamus Duis semper scelerisque et enim adipiscing faucibus. metus\n\n649Amet, in massa, molestie vel amet, consectetur ac Integer massa vel elementum lorem volutpat\n\n650Molestie neque. nec enim rutrum tortor faucibus. vitae ac ipsum amet, volutpat\n\n651Et felis. In Ut rutrum dui rutrum\n\n652Faucibus. elit. Duis elit. ante massa finibus ligula in, fringilla in in aliquam ut elit.\n\n653Sem. posuere fames hendrerit bibendum, sagittis in\n\n654Viverra ante iaculis. et ac et eget semper semper.\n\n655Et viverra primis et vel lorem ac hendrerit\n\n656Volutpat eget molestie eget Ut elit. dui\n\n657Ac metus sem. viverra ante sagittis Fusce ac\n\n658Ligula eget felis. nunc iaculis. adipiscing velit. viverra libero ligula velit. semper. ac\n\n659Fusce dui nunc elit. in, tortor ante ipsum Mauris efficitur ligula dui\n\n660Adipiscing fringilla posuere massa velit. lorem ac iaculis.\n\n661Metus pretium ipsum ipsum ipsum et massa bibendum, condimentum eget eget Fusce pretium\n\n662Primis sagittis fames in felis. et condimentum ante orci adipiscing faucibus.\n\n663Et aliquam aliquam elit.\nLorem vitae fames semper elit.\n\n664Tincidunt. ac sagittis iaculis. Integer\n\n665Ante adipiscing sem. velit. sit Sed\n\n666Ipsum ac Duis quis, neque. Duis efficitur eget lorem primis\n\n667Tortor dolor condimentum ante amet,\n\n668Sem. in Fusce ligula consectetur nunc est ut sit orci, fames rutrum dui\n\n669Fringilla ipsum in bibendum, est purus Ut adipiscing eget est\n\n670Pharetra orci, et eget in et lorem rutrum dui viverra in, Vivamus dui Vivamus\n\n671Volutpat dui Sed malesuada dui\n\n672Volutpat Ut malesuada nunc elit. Integer consectetur bibendum, est vel nunc pretium\n\n673Finibus volutpat ante pretium enim amet, tincidunt. eget Integer et nec vel eget neque. Interdum\n\n674Pharetra purus purus Ut viverra dolor condimentum fames Integer libero lorem dui amet, dui ipsum\n\n675Vivamus massa, quis, faucibus. ac\n\n676Semper lorem consectetur et eget consectetur hendrerit sit ac ut orci ac\n\n677Ante ac ligula Integer Vivamus neque. iaculis. amet, ante\n\n678Ante malesuada ac Mauris orci elit. in enim\n\n679Nec tortor In adipiscing Integer ipsum\n\n680Posuere Ut aliquam in lorem\n\n681Consectetur metus vel vel elit. Vivamus iaculis. efficitur orci semper. In efficitur purus vel massa\n\n682Dui semper rutrum Vivamus adipiscing volutpat sagittis semper adipiscing metus nunc dolor iaculis. eget\n\n683Sit Ut vel Vivamus efficitur fames volutpat\nLorem\n\n684Fames libero quis, eget efficitur nunc ipsum eget pharetra Vivamus viverra\n\n685Massa in, elit. quis, vel efficitur Mauris ac eget consectetur vitae ipsum\n\n686In fames lorem in bibendum, ante et finibus felis.\n\n687Dui libero primis aliquam ac eget posuere enim sit consectetur ac in, ac semper\n\n688Sit pharetra aliquam Fusce massa in felis. et\n\n689Ante massa metus pretium ligula dolor bibendum, ut vitae nec\n\n690Et sit et in ipsum velit. orci In consectetur pharetra ac ac Mauris Interdum amet,\n\n691Ac sagittis\nLorem efficitur pharetra ac fames\n\n692Adipiscing lorem et dolor ante rutrum massa\n\n693Tincidunt. ac Ut\nLorem massa scelerisque ligula semper.\n\n694Duis adipiscing ac hendrerit primis semper. sagittis orci consectetur libero Ut purus finibus\n\n695Neque. sem. primis libero in vitae velit. Ut\n\n696Tincidunt. Sed viverra Sed rutrum scelerisque metus scelerisque In hendrerit sem. libero ipsum pharetra\n\n697Finibus elit. in dolor Vivamus sem. Interdum ipsum Sed enim Ut Fusce massa, dolor\n\n698Neque. massa, metus Duis et massa\n\n699Primis Interdum nunc ac\nLorem semper velit. ipsum massa pharetra Mauris efficitur sem. enim\n\n700Malesuada Vivamus in, ac libero finibus elit. hendrerit aliquam eget viverra\n\n701In fringilla consectetur ante fringilla ante\n\n702Hendrerit fames Fusce semper. ligula hendrerit velit. vel Duis\n\n703Tincidunt. consectetur sagittis semper consectetur enim primis purus sagittis\n\n704Sem. condimentum finibus libero et elementum velit. finibus volutpat In volutpat ante\n\n705Velit. ac enim orci, orci viverra elit. tincidunt. Sed efficitur scelerisque\n\n706Mauris efficitur fringilla semper\nLorem et\n\n707Eget ac scelerisque libero Sed metus ac Ut\nLorem\n\n708Elementum elit. Interdum bibendum, molestie\n\n709Scelerisque faucibus. ante eget lorem scelerisque ante bibendum, ut aliquam\nLorem\n\n710Pretium condimentum massa primis in ut molestie ac orci sit\n\n711Ante dui orci condimentum Sed est et vel\n\n712Elit. hendrerit Vivamus ante lorem ante enim hendrerit efficitur faucibus. metus\n\n713Enim bibendum, vel felis. In fringilla lorem vitae consectetur lorem\n\n714Sit vitae ante fringilla in et\n\n715Tortor elit. sagittis elementum ac In lorem viverra\n\n716Purus ac Sed Integer in Interdum tortor posuere aliquam pharetra orci lorem\n\n717Ac volutpat semper ante posuere finibus viverra faucibus. velit. fringilla orci, purus lorem\n\n718In, elementum consectetur tortor ipsum\n\n719Semper. semper. libero nunc efficitur aliquam nec enim sit viverra Duis\n\n720Vivamus ac ac massa, est ac molestie pharetra semper.\n\n721Rutrum lorem orci, Duis sagittis sit ipsum dui neque. Duis ac\n\n722Est condimentum scelerisque aliquam primis sagittis eget In Mauris sem. in\n\n723Sit finibus ante fames Vivamus ligula pharetra velit.\n\n724Consectetur condimentum rutrum aliquam pharetra\n\n725Dui quis, Sed In sit velit. fringilla in ante in\n\n726Elit. sem. dui elit. pharetra amet, ac dolor Integer ac\n\n727Fames finibus ac primis pretium vel bibendum,\n\n728Elementum ipsum efficitur finibus eget semper. semper. Vivamus rutrum\n\n729Efficitur ac orci adipiscing est massa, est elit. libero Interdum\n\n730Tortor bibendum, In rutrum ligula Duis viverra orci aliquam faucibus. tincidunt. velit.\n\n731Viverra amet, metus elit. aliquam tortor hendrerit vel velit. faucibus. faucibus. ut tortor vel semper\n\n732Pharetra Mauris enim vel ante finibus\nLorem lorem in ac\n\n733Dolor volutpat condimentum semper orci, felis.\n\n734Ac faucibus. hendrerit nec ac vel et In Vivamus fames ut viverra est\n\n735Efficitur aliquam purus et ac viverra finibus ipsum sagittis amet, nunc metus Duis libero consectetur\n\n736Adipiscing purus adipiscing neque. Ut ut viverra dui\n\n737\nLorem ante pretium finibus efficitur Ut enim ut\n\n738Nunc in finibus ac ac et ut est finibus consectetur condimentum Fusce\n\n739Ac fames velit. semper. iaculis. in neque. ante vel\n\n740Consectetur orci rutrum finibus rutrum in ac nec lorem velit. est pharetra vitae\n\n741Fringilla posuere malesuada elementum vitae faucibus. elit. lorem eget felis. vel in tortor elementum Fusce\n\n742Tincidunt. dui velit. vitae molestie ante molestie\nLorem in\n\n743Ut orci, est sem. condimentum et condimentum ipsum scelerisque est vel\n\n744Volutpat ipsum ac orci In ante Fusce consectetur sagittis ac lorem Sed malesuada\n\n745Fusce ipsum tincidunt. velit. semper sit sem. molestie elit.\n\n746Dolor semper consectetur ante nunc neque. lorem ac\n\n747Est ante Integer primis est et eget semper elementum aliquam bibendum, et ante faucibus.\n\n748Dui consectetur\nLorem Sed ac pharetra velit. ut ligula elementum efficitur massa, vitae ligula eget\n\n749Consectetur ante efficitur consectetur consectetur\n\n750Ante semper. fringilla pharetra tincidunt. hendrerit primis rutrum dolor ipsum\n\n751Ut iaculis. Integer pretium consectetur vel sagittis\n\n752Ac et adipiscing sagittis ipsum sagittis libero pharetra vitae malesuada\n\n753Ac ac massa, sem. Vivamus fringilla In libero\n\n754Enim adipiscing condimentum massa quis, faucibus. hendrerit ut dolor efficitur vel lorem\n\n755Ac sagittis enim eget Fusce efficitur\n\n756Molestie bibendum, fringilla faucibus. nunc et ipsum Interdum\n\n757Ut massa aliquam dolor Mauris\nLorem fames dolor aliquam nec\n\n758Ipsum ante Fusce Interdum ante finibus libero Interdum ante\n\n759Vitae faucibus. nunc et primis quis, consectetur scelerisque finibus ligula consectetur elit. condimentum ac\n\n760Primis in rutrum purus in dui rutrum lorem ante neque. iaculis.\n\n761Elit. libero vitae pharetra est vel enim felis. massa, iaculis. orci ante\n\n762Ligula consectetur ut finibus\nLorem\n\n763Vel enim consectetur et ac ipsum semper. nec\n\n764Elementum semper. posuere iaculis. in\nLorem ipsum\n\n765Quis, molestie eget pharetra dolor consectetur ante Interdum fringilla enim in condimentum semper orci, consectetur\n\n766Interdum amet, faucibus. eget metus efficitur ac molestie volutpat tincidunt. nunc Sed semper molestie\n\n767Consectetur posuere In finibus consectetur\n\n768Sagittis ipsum Duis enim eget ac adipiscing Interdum felis. dui massa, pretium\n\n769Elit. eget ligula purus vitae Sed velit. hendrerit ac felis. ac\n\n770Rutrum consectetur eget orci, Ut ligula sit semper. nec Vivamus dui\n\n771Malesuada consectetur hendrerit sit efficitur in ante enim amet, ac malesuada et ac rutrum\n\n772Nec nec in Duis elementum orci, ligula in fames\n\n773Tortor tortor viverra primis velit. consectetur elementum posuere orci, eget orci, Integer quis,\nLorem\n\n774Rutrum metus et Integer in, metus Interdum ante lorem eget\n\n775Semper. pharetra primis In ante efficitur hendrerit Duis adipiscing\n\n776Integer volutpat ligula metus et et volutpat nec velit. aliquam est In Fusce\n\n777Duis tortor felis. posuere sem. vitae lorem malesuada semper enim metus ipsum in nunc in,\n\n778Dui condimentum massa, viverra enim efficitur hendrerit ut condimentum aliquam massa,\n\n779Fringilla Mauris elit. libero efficitur volutpat semper in elit. Fusce orci neque. elit.\n\n780Sem. purus Ut neque. fames eget\n\n781Malesuada elit. enim elit. orci Duis semper. dolor vitae est posuere sit Integer ut In\n\n782Malesuada sit in efficitur tortor fringilla ut Mauris ante fames metus dui sagittis\n\n783Dui amet, et ipsum in ac Mauris ipsum efficitur Duis in finibus tortor\n\n784Nec efficitur neque. in in efficitur semper fames massa,\n\n785Ante ipsum elementum sem. eget in in, felis. elementum et in ligula in et\n\n786Tincidunt. in semper molestie viverra ipsum ac malesuada purus tincidunt.\n\n787Amet, ante amet, efficitur ante faucibus. efficitur enim quis, ipsum Interdum sagittis dolor elit. primis\n\n788Consectetur faucibus.\nLorem Ut bibendum, rutrum Sed tortor\nLorem ut volutpat lorem aliquam amet,\nLorem\n\n789Rutrum pretium ipsum primis et quis, nunc eget nec condimentum ac viverra aliquam\n\n790Ut in pretium ligula scelerisque fames orci semper molestie\n\n791Ut enim consectetur in sagittis eget ipsum efficitur tortor elit. libero\n\n792In quis, Interdum fames neque. rutrum Interdum ligula libero enim lorem fringilla In elit. ac\n\n793Ac consectetur fames bibendum, rutrum tincidunt.\n\n794Pharetra in adipiscing tortor libero molestie fames tincidunt. Duis posuere in\n\n795Vel Integer Duis ipsum In vitae enim semper bibendum, ac ipsum purus\n\n796Massa Fusce lorem ut ante est consectetur Fusce\n\n797Hendrerit in Duis bibendum, libero ipsum nec consectetur amet, bibendum, dui ipsum\n\n798Condimentum ante tincidunt. nec semper felis. elementum ipsum\n\n799Velit. Mauris dolor viverra sit in est Interdum enim tortor ac\n\n800Et bibendum, fringilla ipsum in dolor\n\n801Consectetur Mauris tortor ac iaculis. quis, condimentum\n\n802Purus semper. Interdum neque. ante massa fames in, iaculis. tincidunt. In quis,\n\n803Massa, In nec amet, posuere lorem iaculis. efficitur et Integer\nLorem ac ante Sed\n\n804Quis, nunc eget eget purus\n\n805Duis nunc purus et Duis ac in, quis, semper hendrerit\n\n806Ante pretium sem. nec in, ipsum orci, Sed condimentum et Vivamus fringilla neque. metus ac\n\n807In, sit enim eget rutrum viverra Mauris eget massa massa consectetur orci tortor felis. iaculis.\n\n808Volutpat condimentum pharetra malesuada aliquam scelerisque\n\n809Integer hendrerit volutpat aliquam efficitur ac massa, eget ipsum dolor bibendum, aliquam ut\n\n810Fusce In Vivamus elementum Vivamus vel enim scelerisque faucibus. in consectetur et\n\n811Ut sem. quis, condimentum orci tincidunt.\n\n812Ut fringilla ante viverra vel Integer ut aliquam semper ligula\n\n813Pharetra libero Interdum Interdum felis. Ut sem. dui condimentum libero ut consectetur metus\n\n814Ipsum orci, eget primis lorem ac\n\n815Tincidunt. Integer orci est viverra fringilla posuere ipsum\n\n816Duis faucibus. sagittis tincidunt. felis. ut\n\n817Tortor efficitur semper ipsum tortor efficitur ac posuere faucibus. vel nec viverra libero pretium consectetur\n\n818Elit. In elit. Mauris purus\n\n819Scelerisque hendrerit et in Sed elit. Mauris\n\n820Vel in dolor bibendum, ut consectetur elementum viverra ipsum finibus bibendum,\n\n821Volutpat scelerisque aliquam elit. ac et\n\n822Pharetra massa, ac vitae ac Fusce consectetur quis, in, elementum libero est\n\n823Efficitur malesuada condimentum vitae efficitur molestie Fusce\n\n824Massa fames dolor Sed In in, ac condimentum Fusce ante\n\n825Bibendum, ligula Sed efficitur hendrerit sit\n\n826Velit. pharetra ligula tortor neque. semper. eget\n\n827Duis eget massa, Integer consectetur ante In Interdum eget ac viverra elementum\n\n828Interdum faucibus. ligula Fusce molestie\n\n829Adipiscing metus ac sem. volutpat adipiscing volutpat nec\n\n830Elementum in sit pretium ut efficitur orci ut in Fusce et massa,\n\n831Velit. semper primis Duis neque. Sed scelerisque ac lorem lorem faucibus. volutpat dui nunc\n\n832Faucibus. in ac amet, ante vitae\n\n833Tincidunt. in purus Mauris pharetra libero iaculis. in, tincidunt. metus consectetur\n\n834Ac malesuada ut eget in, in Vivamus consectetur\n\n835Adipiscing Mauris semper et eget efficitur est in amet, orci, eget rutrum\n\n836Ipsum et malesuada metus consectetur neque.\n\n837Pharetra Duis Integer posuere Duis\n\n838Et amet, Ut adipiscing in, faucibus.\n\n839Neque. rutrum in, bibendum, in finibus elementum hendrerit orci metus est\n\n840Fusce fringilla et ut ut\n\n841Nunc volutpat elementum ligula ac nec faucibus. velit. libero Sed ac tortor viverra\n\n842Duis adipiscing efficitur nunc ac Interdum ac scelerisque sit ac rutrum eget ante posuere elit.\n\n843Tincidunt. orci ac amet, massa, Fusce fames sagittis in, bibendum, libero neque. orci rutrum Ut\n\n844Pharetra posuere nec volutpat ac quis, rutrum elit. elementum in\n\n845Integer nunc Fusce Fusce consectetur sagittis sem. ante libero\n\n846Quis, vel scelerisque massa, lorem ac finibus libero ipsum ante adipiscing Integer felis. sagittis\n\n847Sed molestie amet, semper. elit. ante volutpat hendrerit\n\n848Quis, amet, hendrerit semper. semper. orci, ut faucibus. Ut ac ante purus\n\n849Libero nec et molestie in nec malesuada pharetra orci, ipsum sem.\n\n850Libero efficitur orci eget in semper ipsum\n\n851Adipiscing ante amet, eget ipsum metus sagittis massa,\n\n852Pretium iaculis. semper. elit. vitae dolor enim posuere Duis aliquam faucibus. finibus ipsum\n\n853Semper elit. semper. lorem tortor aliquam enim consectetur Sed scelerisque libero posuere In nec\n\n854In finibus ut ac ante purus orci orci, orci posuere massa, orci\n\n855Posuere iaculis. neque. In viverra purus fames\n\n856Condimentum dolor in et nec In Duis ac efficitur ac massa, est\n\n857Eget ipsum amet, ante consectetur ac\n\n858Ut libero consectetur elit. semper dui ligula ipsum\n\n859Massa, posuere in, semper. amet, felis. efficitur velit. ut libero Interdum elit.\n\n860Quis, est malesuada elit. posuere in finibus malesuada in orci Duis Fusce hendrerit\n\n861\nLorem Sed metus rutrum neque. ut amet, Interdum semper molestie fringilla ante amet,\n\n862Molestie consectetur semper vel in et libero felis. aliquam\n\n863In elementum ante Mauris malesuada pharetra\n\n864Mauris elit. ac fringilla eget ac quis, ut et Sed ac dui consectetur massa, in,\n\n865Dui ligula vitae iaculis. consectetur libero semper Duis fringilla enim\n\n866Elementum Sed quis, Duis Ut et semper efficitur\n\n867Enim purus ac sagittis hendrerit orci efficitur ut nec iaculis. vitae efficitur faucibus. consectetur\n\n868Molestie efficitur eget primis orci\n\n869Mauris Interdum sit ipsum posuere lorem sem. quis, ante lorem In metus condimentum efficitur libero\n\n870Sagittis et velit. finibus pharetra\n\n871Molestie massa posuere ante orci, elementum hendrerit consectetur ac in pharetra efficitur Sed efficitur Integer\n\n872Fringilla orci, in elementum purus nec sit eget\n\n873Vitae in tincidunt. ac pretium In vel neque.\n\n874\nLorem ipsum primis finibus\nLorem tortor libero massa ut tortor et consectetur sem. consectetur fringilla\n\n875Vel volutpat fringilla elit. Ut consectetur est faucibus. tincidunt.\n\n876Aliquam nunc Interdum Sed viverra Fusce massa\n\n877Ac ante semper libero ipsum viverra enim\n\n878Vivamus ac Mauris orci Sed in aliquam iaculis. Duis Integer elementum\n\n879Lorem dui ac Mauris sagittis Duis Vivamus pretium elementum fames est Sed ac massa, Interdum\n\n880Dolor bibendum, scelerisque ligula in\n\n881Molestie tincidunt. condimentum tincidunt. amet, nec eget nunc vitae\n\n882Sem. enim est orci, et orci, et dolor\n\n883Bibendum, tincidunt. bibendum, enim amet, semper efficitur primis consectetur ipsum ut elementum in volutpat\n\n884Amet, massa, ante efficitur ante ac molestie est\n\n885Dui rutrum consectetur et Ut\n\n886Semper massa, velit. et vitae et Mauris enim\n\n887Vivamus eget ac in efficitur velit. consectetur purus tortor ipsum bibendum,\n\n888Volutpat Mauris eget Vivamus nec efficitur neque. Duis amet, ante quis, ut libero semper. ut\n\n889Fusce est massa, adipiscing consectetur dolor\n\n890In rutrum pharetra In scelerisque nunc metus iaculis.\n\n891Neque. est vel et in orci, in, molestie efficitur ipsum\n\n892Vitae massa, et elementum lorem vitae est aliquam volutpat massa, ante viverra\n\n893Ipsum ligula est massa ligula metus\nLorem iaculis.\n\n894Ante et rutrum Vivamus In ac\n\n895Sit vitae Mauris et consectetur\n\n896Massa, in ipsum massa, nunc elit. ut tincidunt.\n\n897Ut consectetur in libero Sed eget semper. scelerisque ante Integer eget\n\n898Posuere iaculis. Mauris dolor dui Sed in, finibus ante nunc\n\n899Ante In aliquam eget felis. sagittis tincidunt. Mauris quis, elit. consectetur in\n\n900In Integer nec ac vel Mauris Fusce ac amet, orci, amet, Duis fringilla\n\n901Efficitur aliquam primis massa ac in consectetur\nLorem bibendum,\n\n902Ligula ac libero vitae In vel pretium sit fames et fringilla viverra In\n\n903In sit eget hendrerit dolor Interdum neque. pretium massa elementum orci,\n\n904Mauris nunc\nLorem Sed ipsum Duis felis. efficitur libero ante Ut fringilla orci,\n\n905Posuere efficitur lorem nunc ante libero neque. ipsum faucibus.\n\n906Est amet, ante faucibus. ut Vivamus hendrerit iaculis. elementum volutpat malesuada In metus consectetur\n\n907Semper. primis libero Ut est dolor Ut Vivamus Mauris ut consectetur consectetur hendrerit tortor semper.\n\n908Dui efficitur aliquam amet, massa ut Ut semper ligula ut neque. Ut\n\n909Volutpat velit. massa, quis, Vivamus metus ipsum efficitur orci in in sit bibendum,\n\n910Efficitur aliquam iaculis. in, nec primis elementum Duis efficitur ac et condimentum Vivamus\n\n911Et semper. et Mauris Mauris metus elit. neque.\n\n912Molestie ut hendrerit sem. ac\n\n913Elementum ac volutpat quis, hendrerit tortor velit. eget\n\n914Tortor ac in aliquam Mauris ut\n\n915Sed orci fames scelerisque dui Mauris hendrerit consectetur elit. eget\n\n916Et elit. quis, sem. ac faucibus. viverra eget\n\n917Elit. metus bibendum, Mauris ac sagittis vitae Duis sagittis ipsum\n\n918Fusce ac Duis sit dui adipiscing ligula\n\n919Eget enim eget pharetra quis, eget massa iaculis. fringilla massa, sagittis sit\n\n920Dui semper. ac efficitur semper lorem consectetur\n\n921Aliquam faucibus. Vivamus quis, dolor efficitur metus elementum metus ut metus ac et elementum\n\n922Libero est efficitur consectetur adipiscing sagittis Fusce finibus nec in massa elit. malesuada rutrum rutrum\n\n923Vel enim finibus molestie massa iaculis. amet, nunc in,\n\n924Ac ut ut sit Sed\n\n925Sed nec in massa, enim\n\n926Ac elementum tincidunt. eget libero eget in elit. ante Sed nec lorem eget adipiscing orci\n\n927Sit fringilla hendrerit efficitur Sed purus nunc nec aliquam elit.\n\n928Aliquam fames iaculis. In massa, finibus\n\n929Aliquam iaculis. Interdum pretium enim iaculis. nunc Mauris\n\n930Elit. eget\nLorem Ut massa, orci neque. sit In metus primis in\n\n931Rutrum lorem elementum pretium ligula\n\n932Ligula ipsum vel semper. rutrum ac elit. dui libero efficitur ligula nunc pharetra condimentum\n\n933Enim adipiscing Interdum tincidunt. faucibus. et tortor Interdum ante\n\n934Ante Interdum tincidunt. iaculis. efficitur et Integer velit. sagittis ut felis. consectetur aliquam\n\n935Amet, Fusce et sagittis ac posuere pretium in\n\n936Purus eget orci, Integer amet, et\n\n937Dolor orci, ac sagittis malesuada consectetur ligula vel faucibus. consectetur velit. ac\n\n938Ante ante\nLorem ut consectetur\n\n939Integer sagittis scelerisque in ut consectetur ac fames bibendum, enim Sed ligula sit iaculis.\n\n940In in, vitae purus in elit. sit iaculis. ipsum molestie ut viverra fringilla\n\n941Consectetur sem. consectetur dui Vivamus aliquam elementum purus molestie viverra\nLorem dui\n\n942Ipsum ipsum vel ipsum massa, efficitur fames Vivamus ipsum viverra ac\n\n943Sed purus aliquam fringilla ipsum\n\n944Nunc in tortor enim sagittis metus elit. Sed vel rutrum\n\n945Ac elementum ac Mauris ante velit. orci semper. semper ante\n\n946Ac volutpat in viverra orci ipsum\n\n947Sagittis efficitur nunc semper purus eget fringilla ac efficitur sagittis ac Mauris consectetur neque.\n\n948Viverra fringilla ante elit. dolor ac ut ante enim et pharetra semper elit. ut\n\n949Vivamus velit. in,\nLorem enim eget ac orci quis, ipsum et rutrum quis,\n\n950Ipsum fringilla rutrum scelerisque felis. semper ante elementum vel\n\n951Efficitur vel est eget quis, Fusce\n\n952\nLorem iaculis. ac scelerisque viverra adipiscing Sed lorem quis, ante ante semper. Integer quis, viverra\n\n953Adipiscing vel ante neque.\nLorem ut Mauris dui in,\n\n954Consectetur elementum dolor purus elit. neque. condimentum consectetur pharetra\n\n955Ut nunc felis. ligula nec aliquam enim semper aliquam Vivamus viverra elit. in, Vivamus amet,\n\n956Rutrum consectetur ante primis volutpat\n\n957Felis. in in, finibus orci in, lorem ut ante aliquam condimentum Vivamus pretium ipsum\n\n958Felis. faucibus. orci, Sed quis, ut quis, semper. ligula ac\n\n959Et ut metus finibus libero sem. et posuere consectetur in\n\n960Ac pretium in ante massa, ac ac primis ligula ante ipsum et consectetur ac Interdum\n\n961In elit. Fusce quis, Integer ipsum iaculis.\nLorem in Sed sem. vitae\n\n962Ipsum metus ac in, sit et elit. velit. ut Sed in\n\n963Tortor volutpat et orci in, in, condimentum et fames\n\n964In ante scelerisque adipiscing iaculis. dui ipsum Duis ut\n\n965Dui posuere posuere vel finibus dolor\n\n966Posuere velit. consectetur orci, Sed ante rutrum tortor nunc molestie ac ac orci\n\n967Viverra Interdum ac massa, molestie in molestie semper viverra In sit semper. ipsum ante vel\n\n968Libero iaculis. ut semper Interdum ac ac rutrum\nLorem\n\n969Nunc bibendum, est orci ante adipiscing ante neque. orci, Interdum\n\n970Interdum Mauris in metus viverra\n\n971Malesuada iaculis. consectetur elit. massa, in orci\n\n972Libero orci, Vivamus ac in, ante pretium molestie pharetra ligula Vivamus Sed efficitur\n\n973Semper adipiscing ut faucibus. ipsum\n\n974In ante neque. semper metus\n\n975Ut in, metus nunc semper. consectetur nec Vivamus orci, elementum in,\n\n976Vel ac efficitur sagittis sagittis ac Fusce Fusce Ut sem. tortor\n\n977Bibendum, Ut nec vitae posuere massa, in, lorem ac Integer velit. fames rutrum primis In\n\n978Vivamus Integer Interdum bibendum, condimentum in fames enim in, efficitur tortor condimentum quis,\n\n979Interdum aliquam ut pretium dolor pretium\n\n980Dui consectetur Mauris ac sem. libero viverra iaculis. libero sem. pharetra scelerisque amet,\n\n981\nLorem dui metus libero Integer Duis adipiscing elit. fringilla malesuada amet, tortor Fusce\n\n982Scelerisque sit elit. sagittis ut Integer amet, primis est\n\n983Sagittis aliquam sem. tincidunt. ac ante\n\n984Vel est pretium elementum orci Mauris molestie nec\n\n985Eget In scelerisque bibendum, ut in, tincidunt. Duis fringilla ac\n\n986Volutpat elementum ante bibendum, volutpat Mauris lorem elit. et primis finibus scelerisque massa Sed\n\n987Et posuere ante orci sit ac sagittis fames\n\n988Orci efficitur iaculis. adipiscing efficitur Interdum ac Duis eget sagittis Duis lorem consectetur\n\n989Condimentum enim dolor neque. efficitur\n\n990Est rutrum semper fringilla et in dui Vivamus et velit.\n\n991Elementum massa, malesuada sem. et faucibus. massa,\n\n992Nec purus ipsum consectetur et in,\n\n993Semper vitae tincidunt. hendrerit Vivamus Duis consectetur ac et\n\n994Metus aliquam quis,\nLorem et ac in ac enim ipsum eget neque.\n\n995Vel ante in orci volutpat et rutrum\n\n996Orci, ligula rutrum fringilla ut ipsum vel est hendrerit Duis bibendum, bibendum, viverra fringilla\n\n997Fames lorem Mauris adipiscing iaculis. In tincidunt. felis. consectetur Ut ac Vivamus semper Sed in\n\n998Fames vitae efficitur in, aliquam rutrum quis, eget pretium\n\n999In nec massa eget semper. semper. pharetra Sed massa, elit. ante orci, Ut\n\n1000Semper. elit.\nLorem scelerisque eget primis neque. ut in iaculis. vel fames Duis bibendum,\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| id | string | — | Unique button id. If not present a random id is generated. |\n| title | string \\| React.ReactNode | — | The button title. This may be also a node, like a <spanor a <FormattedMessage. |\n| open | boolean | undefined | Defined weather or not the menu is rendered. Use this to control the component from the outside. |\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 | — | Defines whether the dropdown opens right aligned to the dropdown or not. |\n| bsSize | 'xs' \\| 'sm' \\| 'md' \\| 'lg' | 'md' | Defines how large the button will be rendered. Possible values are: xs, sm, md, lg |\n| bsStyle | 'default' \\| 'unstyled' \\| 'primary' \\| 'secondary' \\| 'info' \\| 'warning' \\| 'danger' \\| 'success' \\| 'muted' \\| 'muted-filled' | 'default' | Defines the button color. Possible values are: default, primary, secondary, info, warning, danger, success, muted |\n| variant | 'link' \\| 'link-inline' \\| 'outline' \\| 'action' | — | Defines the variation of the button design. Possible values are: link, link-inline, outline, action |\n| toggleButtonType | 'button' \\| 'tag' \\| 'label' | 'button' | Specify the toggle element type. It supports the following types: \"button\" \\| \"tag\" \\| \"label\" |\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| splitButton | boolean | false | Defines whether the dropdown-toggle (with caret) should be in a separate button. |\n| usePortal | boolean | false | Renders the dropdown into a dedicated react portal |\n| items | MenuItem[] | — | Items to display in the dropdown menu. If you use a custom dropdown you can skip this prop. |\n| └index | number | — | Internal prop - The item index. |\n| └value | string \\| React.ReactNode | — | The menu item element which will be shown in the dropdown menu. |\n| └active | boolean | — | Sets the item as active/selected. |\n| └disabled | boolean | false | Setting \"disabled\" to true will disable the respective item. |\n| └divider | boolean | false | Will add a divider line between the items inside the dropdown. |\n| └header | boolean | false | Will treat the given value as a menu header. |\n| └onSelect | (value: number \\| undefined, event: React.MouseEvent<HTMLLIElement) =void | — | Callback function triggered when an item is selected. |\n| └closeMenu | VoidFunction | — | Internal prop - Callback function triggered when the item is selected. |\n| └onMouseEnter | (event: React.MouseEvent<HTMLLIElement) =void | — | Internal prop - Callback function triggered when the item is hovered and not disabled. |\n| disabled | boolean | false | Disables the dropdown button. |\n| onLabelButtonClick | () =void | — | Callback for splitButton label button click. |\n| onOpen | (event: DropdownToggleEvent<T) =void | — | Callback for when the toggle button was clicked to open it. |\n| onClose | () =void | — | Callback for when the toggle button was clicked to close it. |\n| customDropdown | React.ReactNode | — | Allows to pass in custom dropdown menu content. |\n| popperConfig | object | — | Define custom popper.js configuration for dropdown placement and modifiers. |\n| toggleClassName | string | — | Additional classes to be set on the dropdown-toggle button. |\n| dropdownClassName | string | — | Additional classes to be set on the dropdown. |\n| className | string | — | Additional classes to be set to the wrapper element. |",
368
368
  "category": "Components",
369
369
  "section": "Selection",
370
370
  "boost": "Dropdowns components/dropdowns #components/dropdowns Components Selection"
@@ -864,7 +864,7 @@
864
864
  "title": "SaveableInput",
865
865
  "lead": null,
866
866
  "summary": "SaveableInput",
867
- "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### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n02:41\n\nSaved value:\n\nControlled - With error\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n2:41 PM\n### SaveableDateInput\n\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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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 | () =void | — | 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 | () =void | — | 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 | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker 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. |",
867
+ "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### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nWith error feedback and disabled save button\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nControlled SaveableInput\n\nRandomize valuesClear values\n\n{\nvalue: '',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nControlled SaveableInput with key validation\nPcs\n\n{\nvalue: '0',\npreviousValue: ''\n}\n### SaveableInput\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| placeholder | string | — | The input placeholder. |\n| fixedPreviousValue | string | — | The previous or old value shown above the input value. This value will not be changed for new input values. |\n| previousValue | string | — | The previous or old value shown above the input value. This value changes when a new input value is accepted. |\n| value | 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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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: string, previousValue: string) =void | — | 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 | () =void | — | 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 | () =void | — | 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| buttonStyle | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| unit | string \\| React.ReactNode | — | Adds a given unit to the input. |\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| 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. |\nSaveableDateInput\nSaveableDateInput (uncontrolled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nControlled - Stay open on invalid (default)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n04:48\n\nSaved value:\n\nControlled - With error\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n12:00\n\nRequired field\n\nSaved value:\n\nControlled - Reset and close on invalid\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\nSaved value:\n\nSaveableDateInput (only month)\n\n‹2026›\n\nJanFebMarApr\nMayJunJulAug\nSepOctNovDec\n\nSaveableDateInput (disabled)\n\n‹February 2026›\nSuMoTuWeThFrSa\n\n25262728293031\n1234567\n891011121314\n15161718192021\n22232425262728\n1234567\n\n4:48 PM\n### SaveableDateInput\n\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 \\| React.ReactNode | — | This is the error message that is shown below the input. It uses the built-in error handling, and 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 | () =void | — | 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 | () =void | — | 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 | 'primary' \\| 'default' | 'primary' | Defines the button style: default or primary. |\n| inputProps | HTMLAttributes<HTMLInputElement| — | Additional HTML attributes to be set on the input element. |\n| datePickerProps | DatePickerProps | {} | Additional props passed to the underlying DatePicker 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. |",
868
868
  "category": "Components",
869
869
  "section": "Interaction",
870
870
  "boost": "SaveableInput components/saveableInput #components/saveableInput Components Interaction"
@@ -1114,7 +1114,7 @@
1114
1114
  "title": "VirtualList",
1115
1115
  "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.",
1116
1116
  "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.",
1117
- "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\nLibero iaculis. Duis ipsum libero Ut rutrum orci, sagittis volutpat posuere hendrerit pharetra Ut enim\n\nItem 2\nPrimis dolor vel enim condimentum et nunc Ut et massa eget libero\n\nItem 3\n\nLorem hendrerit orci, efficitur vitae eget in malesuada malesuada elit. malesuada vel vitae\n\nItem 4\nMauris sagittis in Vivamus ante\n\nItem 5\nLigula aliquam aliquam Integer pretium sit efficitur viverra eget in in\n\nItem 6\nElementum lorem amet, efficitur Mauris libero ipsum ante amet, elit. iaculis.\n\nItem 7\nDuis sit Sed libero vitae semper.\n\nItem 8\nInterdum eget finibus viverra efficitur felis.\n\nItem 9\nIn sagittis tincidunt. lorem fringilla\n\nItem 10\nAc eget elit. elementum in, ante ac in faucibus. massa\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\nIn pharetra sagittis neque. orci, consectetur massa, Mauris et ac iaculis.\n\nVehicle 2\nIaculis. ac quis, ac hendrerit finibus vitae orci est amet, massa,\n\nVehicle 3\nMassa, Integer ut elit. ante Integer ut vitae amet, ante condimentum amet, aliquam in lorem\n\nVehicle 4\nDuis tortor sagittis fringilla molestie in ac scelerisque sem.\n\nVehicle 5\nIaculis. In ac semper nec lorem est consectetur Mauris hendrerit\n\nVehicle 6\nDui eget Interdum Duis quis, tincidunt. massa, metus\n\nVehicle 7\nFusce Vivamus in ante semper. viverra\n\nVehicle 8\nVivamus bibendum, ac semper. in\n\nVehicle 9\nAnte molestie condimentum in neque.\n\nVehicle 10\nUt bibendum, ut elit. volutpat ante\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 |",
1117
+ "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\nUt semper. sem. in condimentum orci, ligula massa ac adipiscing\n\nItem 2\nAc aliquam Integer sit Fusce\n\nItem 3\nMetus faucibus. primis lorem finibus efficitur\n\nItem 4\nSemper purus efficitur Duis eget elementum viverra et posuere ac\n\nItem 5\nFames elit. Interdum hendrerit felis.\n\nItem 6\nTincidunt. neque. Ut in in tortor\nLorem volutpat condimentum elit. quis,\n\nItem 7\nEget ut Vivamus efficitur scelerisque dui semper consectetur et metus quis, In metus\n\nItem 8\nIn fringilla ut vel orci, hendrerit elit. tincidunt.\n\nItem 9\nAnte consectetur aliquam velit. ut pretium semper hendrerit sit efficitur ac et primis ac\n\nItem 10\nIpsum In in, fames sagittis velit.\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\nTortor elit. consectetur neque. efficitur scelerisque elementum sit tortor pretium massa, fames\n\nVehicle 2\nDolor massa, rutrum Sed ut finibus eget ante nec vel aliquam\n\nVehicle 3\nSed pharetra rutrum elit. dui libero semper amet, felis. metus Mauris\n\nVehicle 4\nDui In semper. quis, ac amet,\n\nVehicle 5\nUt semper viverra et adipiscing tortor tincidunt. semper enim in efficitur Duis ipsum\n\nVehicle 6\nVel adipiscing dui et ac elit. massa, pretium tincidunt. enim dolor\n\nVehicle 7\nVel In ac orci, tincidunt. efficitur finibus\n\nVehicle 8\nElit. in neque. in pretium vel sem. pretium finibus\n\nVehicle 9\nAnte aliquam amet, velit. condimentum ac faucibus. aliquam\n\nVehicle 10\n\nLorem elit. adipiscing Fusce ipsum lorem rutrum ut et nunc Integer dolor\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 |",
1118
1118
  "category": "Components",
1119
1119
  "section": "Content",
1120
1120
  "boost": "VirtualList components/virtualList #components/virtualList Components Content"
@@ -1133,8 +1133,8 @@
1133
1133
  "id": "start/changelog",
1134
1134
  "title": "Changelog",
1135
1135
  "lead": null,
1136
- "summary": "Documentation entry for start/changelog",
1137
- "searchText": "Changelog",
1136
+ "summary": "- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.",
1137
+ "searchText": "Changelog\nVersion 2.2.0 (2026-02-23)\n- Fixed Map utils Fixed getRoutePolylines to return the correct HERE map Polyline list. Also corrected the return types for getGroups, getMarkers, and getRoutePolylines to use the proper map object types.\n\n- Fixed RadialBarCharts Fixed RadialBarCharts responsive container to remove the fixed initial dimension, allowing charts to take the available width of the parent container.\n\n- Fixed Select Prevent double box-shadow on Select and Multiselect inside input groups with icon addons.\n\n- Fixed labels Fixed label heights for condensed filled labels to align with default condensed labels.\n\n- Fixed Map settings Fixed the map settings options animation so dropdowns/panels now fade in and slide up when opened.\n\n- Update MapTypeSettings Added visibleMapTypes for map-type visibility control via a single prop. The enableNightMap prop is now deprecated. Please control night visibility via visibleMapTypes instead.\n\n- Update TimePicker Add a new disabled prop to disable the TimePicker input and its control buttons. If you previously set disabled via inputProps, you can now use the dedicated component prop instead. The TimePicker now also calls onChange when the input is cleared. Added a new dropdown prop for selecting times from a dropdown, and a minuteOffset prop to define the dropdown interval and button step size.\n\n- Update Button Added support for rendering Button as an anchor element via the new as prop. Use as='a' together with a required href to render a link button while keeping native button type values for button elements.\n\n- Update Notification Improved notification message readability by balancing line wraps in notification text content.\n\n- Update Switch Added a new autoMinWidth prop. When minWidth is not set and autoMinWidth is true, the switch width uses the longer one of enabledText and disabledText.\n\n- New CircularProgress Added new CircularProgress component.\n\n- New Tracker Added a new Tracker component for compact status visualization with tooltip support, automatic block compression, and optional collapsing when the minimum block width is reached.\n\n- New RadioCardGroup Added a new RadioCardGroup component for custom card-style radio selection, including inline, stacked, and stacked-horizontal variants with both options-based and compound-item APIs.\n\n- New Pills condensed Added a nav-pills-filled-condensed version of filled nav-pills for use next to form elements like buttons and selects. This keeps heights aligned and provides a clearer way to indicate different views. Prefer these over the toggle button group for view switching.\n\n- New Shadows Added configurable hover-shadow-* utility classes with built-in transition support and a new shadow-focused utility class for a focused shadow preset.\n\n- New useSearchHighlight / SearchHighlightText Added the useSearchHighlight hook and SearchHighlightText component for native CSS highlight-based search results.\n\n- New useCookies Added a new useCookies hook for setting, deleting, and checking browser cookies.\n\n- New useRioCookieConsent Added a dedicated useRioCookieConsent hook for parsing the RIO cookie_settings consent cookie and returning typed RioCookieConsentInfo.\n\n- New useUrlState, routeUtils Added the new useUrlState hook and updated routeUtils for simpler state-in-URL parsing/serialization with native URLSearchParams and typed URL config support.\n\n- New classNames, mergeClassNameOverrides Added new utility helpers for CSS class handling: classNames for composing optional class tokens and mergeClassNameOverrides for overriding utility-class groups while keeping unrelated defaults.\n\n- New ellipsis-middle Added new ellipsis-middle utility class for truncating text in the middle while keeping the suffix visible.\n\n- New TextTruncateMiddle Added a new TextTruncateMiddle component for rendering middle-truncated text with a configurable suffix length.\n\n- New New icons rioglyph- trailer-standard rioglyph- trailer-tipping rioglyph- trailer-liquid rioglyph- palette-empty rioglyph- box rioglyph- box-open rioglyph- mesh-box\n\n- Guideline State in URL guideline Added a dedicated guideline page for deep linking and URL state, including best practices for what to store in URLs and pushState vs replaceState usage.\nVersion 2.1.0 (2026-01-13)\n- Fixed Map context menu Fixed the typing for the ContextMenuItem component.\n\n- Fixed Map route Fixed the typing for the arrowStyle prop of the Route component.\n\n- Fixed Map SimpleClusterLayer type Fixed the typings for the SimpleClusterLayer component’s simpleTheme prop. Please use the new SimpleClusterTheme type instead of the ClusterTheme.\n\n- Fixed Dialog Fixed broken fade animation of Dialogs in Firefox.\n\n- Fixed TableSettingsDialog Fixed TableSettingsDialog so reset to default remains available after reopening when settings differ from defaults.\n\n- Fixed Select Fixed select filter regressions where hitting ‘nothing found’ could leave the dropdown stuck or missing options. Backspacing or clearing now restores the full list and keeps keyboard focus/highlights in sync. Dropdown scroll now resets on reopen and keeps the keyboard-focused item in view when navigating up and down with the arrow keys.\n\n- Update URL feature toggles Replaced the internal \"qs\" library used for parsing URL search parameters with the native URLSearchParams API, allowing us to remove the external dependency. This also solves the vulnerability issue with the \"qs\" library for this version.\n\n- Update Tree Extended the Tree component to support custom external icon and logo URLs.\n\n- Demo Updated the component prop documentation for most components by deriving it directly from the component type definitions and source files. This ensures more accurate documentation and reduces maintenance effort for the demo pages.\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 Radiobutton Changed the onChange callback so it is only used in the controlled use case, as already documented in earlier versions. For uncontrolled usage, please use the onClick callback 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- New useIncomingPostMessages and usePostMessageSender New tooling for sending and receiving postMessage events. We recommend utilizing \"action-style\" events if you control both ends of the communication. This simply means to send event objects with a type property and an optional payload - very similar to Redux actions. To receive messages, the new useIncomingPostMessages can be used. It allows a declarative style of registering action-style event handlers in your application. You can still use the \"simple\" event handler variants, when you're interested in receiving events that don't follow the action-style approach. The usePostMessageSender hook provides easy access to methods used to send message events either to a dedicated destination or to \"broadcast\" events to all iframes. Note that the existing usePostMessage hook will be deprecated in a future release.\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",
1138
1138
  "category": "Getting started",
1139
1139
  "section": "Welcome",
1140
1140
  "boost": "Changelog start/changelog #start/changelog Getting started Welcome"
@@ -1324,7 +1324,7 @@
1324
1324
  "title": "Feature cards",
1325
1325
  "lead": null,
1326
1326
  "summary": "Lorem ipsum dolor sit amet",
1327
- "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nQuas crux thermae facilis aegre harum acerbitas.\nIste conscendo tergum.\nConitor arbor decens.\nSolitudo asper substantia anser coma adfectus.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nAppono cur temperantia minus decor vigilo.\nBibo quam subito.\nClam vix nesciunt.\nTorqueo coniuratio earum alius demergo uter delectus suus.\nRead more\nLorem ipsum dolor sit amet\nItaque volva cinis tolero villa vel totidem.\nCalcar caelestis delego suppellex ager copia compello omnis creta tempora.\nSubseco audio tergum repudiandae decerno.\nBardus vomer aqua torqueo addo aer ventosus spiritus suadeo vapulus.\nCito speciosus comis demitto denuncio antepono.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nSono tergum modi consectetur ventus eius sono.\nDenuncio coadunatio textilis considero.\nSummisse similique creta clarus cum comburo decumbo volva suffoco ver.\nVerbera saepe sordeo vetus thalassinus natus aperiam theca vere.\nComminor eaque ipsum umbra.\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",
1327
+ "searchText": "Feature cards\nFeature cards\nLorem ipsum dolor sit amet\nAro molestias suffoco templum.\nUllus ad tolero vorax congregatio constans acidus sub.\nSumptus clam vix ipsam placeat explicabo ancilla.\nCaute compello ullam abduco compono cariosus alter dapifer deporto umquam.\nGet started\nLorem ipsum\nLorem ipsum dolor sit amet\nDemulceo odit et deinde.\nAdsidue praesentium acies aqua asper neque caste cimentarius bonus confido.\nDesipio corpus torqueo vado suggero cornu creptio adulescens curriculum agnitio.\nCompello beneficium cogo tandem tabernus dignissimos curtus dedecor suppellex alter.\nRead more\nLorem ipsum dolor sit amet\nUllam depono creptio ascit valens.\nSapiente admitto accusamus sodalitas omnis unus contabesco abstergo.\nTamisium perferendis vestrum terror.\nLaudantium umbra accusantium dapifer sol summa sperno ait absque carbo.\nSuffragium sequi corporis volva caelestis dicta corroboro.\nLearn more about our delivery features\nLorem ipsum dolor sit amet\nExplicabo virtus calamitas turbo.\nViduo aufero tumultus comparo maxime aqua tamen dolorem.\nVestigium usitas spoliatio perspiciatis vita cogito assentator aeger vitae.\nCogo canis angelus capitulus ago tempus cattus blanditiis.\nTerminatio valde absens copiose admitto socius congregatio conforto desino audio.\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",
1328
1328
  "category": "Templates",
1329
1329
  "section": "Content",
1330
1330
  "boost": "Feature cards templates/feature-cards #templates/feature-cards Templates Content"
@@ -1334,7 +1334,7 @@
1334
1334
  "title": "Form summary",
1335
1335
  "lead": null,
1336
1336
  "summary": "Request summary",
1337
- "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personEunice Cole\nRequested roleNational Branding Analyst\nContact emailOlivia7@gmail.com\nAnnual budget€99,514.00\nProject descriptionEt consuasor summisse tempore valde.\nCrinis adimpleo contigo enim aedificium valde.\nSolutio similique stillicidium expedita tandem denego cursim timidus coerceo.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
1337
+ "searchText": "Form summary\nForm summary\nRequest summary\nGenerated client request data\n\nContact personIgnacio Hilpert\nRequested roleLead Functionality Developer\nContact emailCatherine54@hotmail.com\nAnnual budget€152,212.00\nProject descriptionTalis aureus astrum vulariter video sto censura sit cimentarius.\nCogito verecundia tamdiu volup tergo turba consuasor vulticulus catena deleo.\nCarmen ulterius incidunt corrupti neque aptus.\nSupporting filesproject-outline.pdf\n2.4MB\nDownload\n\nwireframes.pdf\n3.7MB\nDownload",
1338
1338
  "category": "Templates",
1339
1339
  "section": "Forms",
1340
1340
  "boost": "Form summary templates/form-summary #templates/form-summary Templates Forms"
@@ -1354,7 +1354,7 @@
1354
1354
  "title": "List blocks",
1355
1355
  "lead": null,
1356
1356
  "summary": "Lorem ipsum dolor",
1357
- "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nApud aufero taedium.\n\nRath - Mante\nTalis iste correptius vitiosus desidero pax.\n\nConnect\n\nBrekke - Casper\nApostolus aetas cresco.\nSub suggero tot dedecor celer.\n\nConnect\n\nLowe Group\nAcervus totidem caelum vilitas stella.\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\nAmor cinis charisma degusto terreo.\n\nGusikowski, Wisozk and Oberbrunner\nTotidem carpo deputo amplus.\n\nBashirian - Osinski\nVelut commemoro sono ratione annus voro pecus.\nPraesentium copiose ascisco.\n\nFranecki - VonRueden\nVinculum una deripio vitium admitto solium hic ars harum.\nSubvenio crur vulnero vociferor velit vestigium vulgo quae.\nLorem ipsum dolor sit amet\nStatua cohaero vivo adduco cubicularis ciminatio.\nAudax ullus terror articulus defessus quos vae.\n\nMoen LLC\nBenevolentia appello torrens clamo atqui arto video enim.\nSoluta totus cui venustas apostolus suspendo cornu velut.\nAutem defetiscor bellicus pecco.\n\nHoeger, Wilderman and Baumbach\nCunae confugo viduo sordeo.\nCaput cur admoveo victoria curvo eos fugiat beneficium.\nEsse tamisium clibanus viriliter charisma pauper amplus.\n\nWuckert - Schinner\nDebilito magnam peccatus volubilis aptus enim.\nDecet celo cultellus audacia vinculum tricesimus ver.\nSuffoco constans ait amplus tenuis incidunt.\n\nReinger LLC\nArca curto adeptio supplanto quibusdam victus.\nArto vestrum tracto sodalitas sursum contra asper volo.\nRecusandae thalassinus vilitas aegrotatio nulla tepidus caritas vos conforto earum.\nEnhance your application with powerful add-ons!\n\nRustic Gold Car\nFeaturing Tennessine-enhanced technology, our Table offers unparalleled strange performance\n\n€30.05\nTotal per month\n\nGet Add-on\n\nModern Granite Mouse\nInnovative Bike featuring specific technology and Gold construction\n\n€86.15\nTotal per month\n\nGet Add-on\n\nElectronic Granite Shoes\nRefined Bike designed with Gold for classic performance\n\n€55.90\nTotal per month\n\nGet Add-on\n\nIncredible Marble Gloves\nThe sleek and hefty Tuna comes with silver LED lighting for smart functionality\n\n€91.10\nTotal per month\n\nGet Add-on\n\nLicensed Rubber Table\nIntroducing the Cuba-inspired Chips, blending advanced style with local craftsmanship\n\n€21.09\nTotal per month\n\nGet Add-on\nFeatures\n\nFrozen Silk Keyboard\nSavor the crunchy essence in our Salad, designed for excellent culinary adventures\n\nLicensed Aluminum Gloves\nErgonomic Bike designed with Aluminum for austere performance\n\nFantastic Rubber Pizza\nNew pink Bike with ergonomic design for menacing comfort\n\nGorgeous Granite Chips\nSmall Chicken designed with Marble for fluffy performance\n\nFresh Rubber Pizza\nDiscover the scary new Mouse with an exciting mix of Rubber ingredients\n\nRustic Plastic Car\nThe Managed fault-tolerant internet solution Ball offers reliable performance and frank design",
1357
+ "searchText": "List blocks\nList blocks\nLorem ipsum dolor\nThermae paens aduro demonstro molestiae debilito deorsum contigo.\n\nMuller, Wyman and Fadel\nVentito ars tribuo talus ago argentum comitatus vitae subiungo.\n\nConnect\n\nStreich - Franecki\nCareo sodalitas advoco.\nUtrimque cotidie contigo varietas aurum aeger thermae.\n\nConnect\n\nMcLaughlin - Klocko\nUredo turpis veritatis amitto aurum aveho vulticulus denique cresco.\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\nCaste civis callide nostrum claudeo asper.\n\nKirlin, Shanahan and Casper\nCura defero arbitro argentum villa volup venio vestrum.\n\nHerzog - Gutkowski\nAt pax tepesco aduro tersus.\nSpargo nisi vorax a verus color id absens compello.\n\nWilkinson, Murray and Hauck\nBlanditiis similique delego desino tergeo.\nBrevis pecus vacuus.\nLorem ipsum dolor sit amet\nCatena caelum tenax porro cubitum.\nAbsum astrum viriliter.\n\nReichel - Metz\nAbundans certe solutio testimonium abeo.\nArcus vesco urbs suadeo super astrum cimentarius.\nSuppono voluptate suffoco sponte subseco vigilo cunabula corroboro triduana.\n\nGleichner, Terry and Lemke\nTextus approbo taceo arx virgo curo spectaculum suus rerum damno.\nVideo adstringo adicio aequitas caelum tabesco nemo sufficio.\nThema mollitia defessus tener tenuis ancilla truculenter tenuis textor molestiae.\n\nHickle, Nitzsche and Howell\nAmor corrigo tamisium vorago sortitus casus quibusdam addo nam.\nThema vulpes aut confugo comes subito spectaculum vivo studio cubicularis.\nAeger dolorem numquam debeo temporibus dignissimos copia.\n\nWeissnat and Sons\nAlii versus tonsor pecco adipiscor.\nAccedo demergo addo delicate.\nAdimpleo curvo cotidie comprehendo adstringo admitto esse audacia.\nEnhance your application with powerful add-ons!\n\nRefined Granite Pizza\nProfessional-grade Keyboard perfect for immense training and recreational use\n\n€37.35\nTotal per user / month\n\nGet Add-on\n\nSoft Rubber Hat\nThe sleek and gripping Hat comes with teal LED lighting for smart functionality\n\n€27.59\nTotal per month\n\nGet Add-on\n\nFrozen Plastic Computer\nErgonomic Ball made with Steel for all-day vivacious support\n\n€13.89\nTotal per month\n\nGet Add-on\n\nFantastic Cotton Soap\nNew pink Cheese with ergonomic design for cloudy comfort\n\n€85.65\nTotal per month\n\nGet Add-on\n\nRefined Bamboo Bike\nThe sleek and alert Gloves comes with pink LED lighting for smart functionality\n\n€16.60\nTotal per user / month\n\nGet Add-on\nFeatures\n\nRefined Rubber Table\nErgonomic Soap made with Marble for all-day sugary support\n\nRecycled Rubber Hat\nNew Shirt model with 62 GB RAM, 950 GB storage, and glorious features\n\nHandcrafted Rubber Hat\nOur koala-friendly Cheese ensures near comfort for your pets\n\nIntelligent Plastic Bike\nThe sky blue Computer combines Guyana aesthetics with Berkelium-based durability\n\nElegant Concrete Towels\nThe Jarvis Chicken is the latest in a series of diligent products from Welch, MacGyver and Kilback\n\nRustic Granite Fish\nFresh Pants designed with Wooden for quick performance",
1358
1358
  "category": "Templates",
1359
1359
  "section": "Content",
1360
1360
  "boost": "List blocks templates/list-blocks #templates/list-blocks Templates Content"
@@ -1414,7 +1414,7 @@
1414
1414
  "title": "Form blocks",
1415
1415
  "lead": null,
1416
1416
  "summary": "SettingsCompany display name",
1417
- "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\nProgrammable bottom-line focus group\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\nMissouriMissouri\nIllinois\n\nIndonesiaIndonesia\nMozambique\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",
1417
+ "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\nUser-centric stable moratorium\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\nNevadaNevada\nAlabama\n\nCentral African RepublicCentral African Republic\nGuatemala\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",
1418
1418
  "category": "Templates",
1419
1419
  "section": "Forms",
1420
1420
  "boost": "Form blocks templates/settings-form #templates/settings-form Templates Forms"
@@ -1424,7 +1424,7 @@
1424
1424
  "title": "Stats blocks",
1425
1425
  "lead": null,
1426
1426
  "summary": "Stats page",
1427
- "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1197 units\n\n12%from last month\n\nOpen orders\n79\n\n5%from last month\n\nIn transit\n6\n\n-3%from last month\n\nIssues\n4\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%",
1427
+ "searchText": "Stats blocks\nStats blocks\nStats page\nOverview of your supply chain operations\n\nTotal inventory\n1330 units\n\n12%from last month\n\nOpen orders\n23\n\n5%from last month\n\nIn transit\n12\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%",
1428
1428
  "category": "Templates",
1429
1429
  "section": "Content",
1430
1430
  "boost": "Stats blocks templates/stats-blocks #templates/stats-blocks Templates Content"
@@ -1594,7 +1594,7 @@
1594
1594
  "title": "useDebugInfo",
1595
1595
  "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.",
1596
1596
  "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.",
1597
- "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\": 1771854538793\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. |",
1597
+ "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\": 1771861796836\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. |",
1598
1598
  "category": "Utilities",
1599
1599
  "section": "UI state & input hooks",
1600
1600
  "boost": "useDebugInfo utilities/useDebugInfo #utilities/useDebugInfo Utilities UI state & input hooks"
@@ -1904,7 +1904,7 @@
1904
1904
  "title": "useTableExport",
1905
1905
  "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.",
1906
1906
  "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.",
1907
- "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\n1EvelynBodeBlanche_Rippin27@hotmail.com\n2KarolannRiceJerome42@gmail.com\n3HerbertGloverKole5@yahoo.com\n4JennaHintzVictor.Mann@yahoo.com\n5JerroldEffertzJennifer24@hotmail.com\n6ChadrickTurcotteArnold34@yahoo.com\n7EdwinPagacChristy.Vandervort@gmail.com\n8LouiseSauerMarty.Graham40@yahoo.com\n9LindsayCummerataPat.Baumbach@gmail.com\n10HayleyBoehm-VandervortRoland.Spencer@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). |",
1907
+ "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\n1WilliamWillmsBurnice.Pouros@yahoo.com\n2KayliMcKenzieJody.Jaskolski99@gmail.com\n3LawrenceHerzogTina_Hegmann97@yahoo.com\n4ThurmanRauClaudie.Borer@yahoo.com\n5AntoniaSchneiderDoreen.Prosacco34@hotmail.com\n6RicardoOkunevaTina_Zemlak1@gmail.com\n7GustavoMayertNoel_Quigley82@hotmail.com\n8BerniceBoyleHerman_Tromp@hotmail.com\n9JamarConnElvera37@yahoo.com\n10LetitiaKlingHector_Kozey6@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). |",
1908
1908
  "category": "Utilities",
1909
1909
  "section": "Table & data hooks",
1910
1910
  "boost": "useTableExport utilities/useTableExport #utilities/useTableExport Utilities Table & data hooks"
@@ -1914,7 +1914,7 @@
1914
1914
  "title": "useTableSelection",
1915
1915
  "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.",
1916
1916
  "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.",
1917
- "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\n1RosemaryHaagChristian.Gulgowski19@yahoo.com\n2TimothyDickensMabelle.Blanda@yahoo.com\n3RosalindaMosciskiAdolphus_Ryan31@gmail.com\n4CornellBednarChyna.Goyette@yahoo.com\n5ClintonQuigleyCasper96@gmail.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\n1OlgaDietrichPaula49@gmail.com\n\n2SonjaGorczanyLorena_Ledner@hotmail.com\n\n3HarveyHoegerMarlene.Cassin@gmail.com\n\n4JeanetteStehrMaybelle66@yahoo.com\n\n5VincentKlockoTed.Dietrich@hotmail.com\n\n6KathrynLoweBrandy.Conroy@gmail.com\n\n7KeltonHegmannEsteban.Farrell29@gmail.com\n\n8CristopherO'ConnellAustin_Sauer@hotmail.com\n\n9ClaudeLegrosEnola_Mills@hotmail.com\n\n10AlexanderKshlerin-ReillyDomingo_Kuhn@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. |",
1917
+ "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\n1JesseHilpertLexus.Will@yahoo.com\n2LuellaLittelCasey.Trantow@yahoo.com\n3BeulahBartellBrady.Nader@gmail.com\n4DionLubowitzPerry33@gmail.com\n5TerrellBechtelarShirley32@gmail.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\n1JudithHalvorsonChasity_Johnston@yahoo.com\n\n2LouTorphy-CollinsStacey74@gmail.com\n\n3DerekOndrickaCarolina83@hotmail.com\n\n4AllenSpinkaDawn_Lowe39@hotmail.com\n\n5BruceKuvalisKay.Deckow73@yahoo.com\n\n6EmilioBaumbachJuanita.Hilpert23@hotmail.com\n\n7DarinJohnsonTwila.Leannon14@yahoo.com\n\n8DallasKoelpinRusty_Thompson-Lehner99@gmail.com\n\n9MauriceSwift-KemmerTim.Hamill65@gmail.com\n\n10GeovanniConroyAugust95@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. |",
1918
1918
  "category": "Utilities",
1919
1919
  "section": "Table & data hooks",
1920
1920
  "boost": "useTableSelection utilities/useTableSelection #utilities/useTableSelection Utilities Table & data hooks"