@rio-cloud/uikit-mcp 1.1.9 → 1.1.11

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 (211) hide show
  1. package/README.md +2 -1
  2. package/dist/doc-metadata.json +334 -94
  3. package/dist/docs/components/accentBar.md +110 -116
  4. package/dist/docs/components/activity.md +1 -1
  5. package/dist/docs/components/analyticsAnalysisOverlay.md +630 -0
  6. package/dist/docs/components/animatedNumber.md +2 -2
  7. package/dist/docs/components/animatedTextReveal.md +53 -55
  8. package/dist/docs/components/animations.md +21 -21
  9. package/dist/docs/components/appHeader.md +27 -38
  10. package/dist/docs/components/appLayout.md +23 -77
  11. package/dist/docs/components/appNavigationBar.md +1 -1
  12. package/dist/docs/components/areaCharts.md +57 -61
  13. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  14. package/dist/docs/components/assetTree.md +429 -342
  15. package/dist/docs/components/autosuggests.md +1 -1
  16. package/dist/docs/components/avatar.md +1 -1
  17. package/dist/docs/components/banner.md +2 -2
  18. package/dist/docs/components/barCharts.md +530 -414
  19. package/dist/docs/components/barList.md +10 -10
  20. package/dist/docs/components/basicMap.md +104 -39
  21. package/dist/docs/components/bottomSheet.md +2 -2
  22. package/dist/docs/components/button.md +8 -2
  23. package/dist/docs/components/buttonToolbar.md +1 -1
  24. package/dist/docs/components/calendarStripe.md +59 -63
  25. package/dist/docs/components/card.md +1 -1
  26. package/dist/docs/components/carousel.md +1 -1
  27. package/dist/docs/components/chartColors.md +1 -1
  28. package/dist/docs/components/chartsGettingStarted.md +1 -1
  29. package/dist/docs/components/chat.md +2 -2
  30. package/dist/docs/components/checkbox.md +15 -10
  31. package/dist/docs/components/circularProgress.md +6 -6
  32. package/dist/docs/components/clearableInput.md +1 -1
  33. package/dist/docs/components/collapse.md +2 -2
  34. package/dist/docs/components/composedCharts.md +63 -51
  35. package/dist/docs/components/contentLoader.md +1 -1
  36. package/dist/docs/components/dataTabs.md +33 -33
  37. package/dist/docs/components/datepickers.md +693 -685
  38. package/dist/docs/components/dayPicker.md +5624 -0
  39. package/dist/docs/components/dayPickerCalendar.md +5289 -0
  40. package/dist/docs/components/dialogs.md +17 -19
  41. package/dist/docs/components/divider.md +1 -1
  42. package/dist/docs/components/dropdowns.md +3264 -3276
  43. package/dist/docs/components/editableContent.md +91 -91
  44. package/dist/docs/components/expander.md +4 -1
  45. package/dist/docs/components/fade.md +1 -1
  46. package/dist/docs/components/fadeExpander.md +1 -1
  47. package/dist/docs/components/fadeUp.md +32 -36
  48. package/dist/docs/components/feedback.md +1 -1
  49. package/dist/docs/components/filePickers.md +1 -1
  50. package/dist/docs/components/formLabel.md +29 -31
  51. package/dist/docs/components/groupedItemList.md +3 -7
  52. package/dist/docs/components/htmlTable.md +5074 -0
  53. package/dist/docs/components/iconList.md +4 -4
  54. package/dist/docs/components/imagePreloader.md +1 -1
  55. package/dist/docs/components/labeledElement.md +1 -1
  56. package/dist/docs/components/licensePlate.md +1 -1
  57. package/dist/docs/components/lineCharts.md +172 -170
  58. package/dist/docs/components/listMenu.md +15 -12
  59. package/dist/docs/components/loadMore.md +4 -2
  60. package/dist/docs/components/mainNavigation.md +1 -1
  61. package/dist/docs/components/mapCircle.md +10 -1
  62. package/dist/docs/components/mapCluster.md +25 -1
  63. package/dist/docs/components/mapContext.md +12 -4
  64. package/dist/docs/components/mapDraggableMarker.md +12 -1
  65. package/dist/docs/components/mapGettingStarted.md +39 -1
  66. package/dist/docs/components/mapInfoBubble.md +129 -2
  67. package/dist/docs/components/mapLayerGroup.md +10 -1
  68. package/dist/docs/components/mapMarker.md +10 -1
  69. package/dist/docs/components/mapPolygon.md +288 -85
  70. package/dist/docs/components/mapRoute.md +262 -172
  71. package/dist/docs/components/mapSettings.md +28 -1
  72. package/dist/docs/components/mapUtils.md +1 -1
  73. package/dist/docs/components/mapViewportHistory.md +287 -0
  74. package/dist/docs/components/multiselects.md +217 -18
  75. package/dist/docs/components/noData.md +1 -1
  76. package/dist/docs/components/notifications.md +2 -2
  77. package/dist/docs/components/numbercontrol.md +15 -15
  78. package/dist/docs/components/onboarding.md +1 -1
  79. package/dist/docs/components/page.md +1 -1
  80. package/dist/docs/components/pager.md +1 -1
  81. package/dist/docs/components/pieCharts.md +237 -211
  82. package/dist/docs/components/popover.md +1 -1
  83. package/dist/docs/components/position.md +1 -1
  84. package/dist/docs/components/radialBarCharts.md +446 -398
  85. package/dist/docs/components/radioCardGroup.md +1 -1
  86. package/dist/docs/components/radiobutton.md +98 -98
  87. package/dist/docs/components/releaseNotes.md +1 -1
  88. package/dist/docs/components/resizer.md +1 -1
  89. package/dist/docs/components/responsiveColumnStripe.md +1 -1
  90. package/dist/docs/components/responsiveVideo.md +1 -1
  91. package/dist/docs/components/rioglyph.md +1 -1
  92. package/dist/docs/components/rules.md +41 -47
  93. package/dist/docs/components/saveableInput.md +252 -252
  94. package/dist/docs/components/selects.md +332 -161
  95. package/dist/docs/components/sidebar.md +1 -1
  96. package/dist/docs/components/sliders.md +1 -1
  97. package/dist/docs/components/smoothScrollbars.md +19 -13
  98. package/dist/docs/components/spinners.md +1 -1
  99. package/dist/docs/components/states.md +15 -1
  100. package/dist/docs/components/statsWidgets.md +1 -1
  101. package/dist/docs/components/statusBar.md +3 -1
  102. package/dist/docs/components/stepButton.md +1 -1
  103. package/dist/docs/components/steppedProgressBars.md +9 -11
  104. package/dist/docs/components/subNavigation.md +1 -1
  105. package/dist/docs/components/supportMarker.md +1 -1
  106. package/dist/docs/components/svgImage.md +1 -1
  107. package/dist/docs/components/switch.md +5 -1
  108. package/dist/docs/components/table.md +21361 -0
  109. package/dist/docs/components/tableControls.md +982 -0
  110. package/dist/docs/components/tagManager.md +1 -1
  111. package/dist/docs/components/tags.md +1 -1
  112. package/dist/docs/components/teaser.md +1 -1
  113. package/dist/docs/components/textTruncateMiddle.md +1 -1
  114. package/dist/docs/components/timeline.md +1 -1
  115. package/dist/docs/components/timepicker.md +3 -1
  116. package/dist/docs/components/toggleButton.md +3 -1
  117. package/dist/docs/components/tooltip.md +8 -2
  118. package/dist/docs/components/tracker.md +1 -1
  119. package/dist/docs/components/virtualList.md +60 -60
  120. package/dist/docs/foundations.md +761 -3077
  121. package/dist/docs/start/changelog.md +73 -3
  122. package/dist/docs/start/goodtoknow.md +5 -1
  123. package/dist/docs/start/guidelines/color-combinations.md +5 -1
  124. package/dist/docs/start/guidelines/custom-css.md +26 -2
  125. package/dist/docs/start/guidelines/custom-rioglyph.md +20 -2
  126. package/dist/docs/start/guidelines/formatting.md +2254 -249
  127. package/dist/docs/start/guidelines/iframe.md +53 -19
  128. package/dist/docs/start/guidelines/obfuscate-data.md +24 -2
  129. package/dist/docs/start/guidelines/print-css.md +16 -2
  130. package/dist/docs/start/guidelines/spinner.md +1 -1
  131. package/dist/docs/start/guidelines/state-in-url.md +1138 -11
  132. package/dist/docs/start/guidelines/supported-browsers.md +9 -2
  133. package/dist/docs/start/guidelines/writing.md +228 -2
  134. package/dist/docs/start/howto.md +155 -13
  135. package/dist/docs/start/intro.md +40 -2
  136. package/dist/docs/start/responsiveness.md +27 -1
  137. package/dist/docs/templates/ai-assistant.md +311 -0
  138. package/dist/docs/templates/common-table.md +814 -0
  139. package/dist/docs/templates/detail-views.md +846 -0
  140. package/dist/docs/templates/expandable-details.md +214 -0
  141. package/dist/docs/templates/feature-cards.md +479 -0
  142. package/dist/docs/templates/form-summary.md +179 -0
  143. package/dist/docs/templates/form-toggle.md +329 -0
  144. package/dist/docs/templates/list-blocks.md +872 -0
  145. package/dist/docs/templates/loading-progress.md +100 -0
  146. package/dist/docs/templates/options-panel.md +132 -0
  147. package/dist/docs/templates/panel-variants.md +137 -0
  148. package/dist/docs/templates/progress-cards.md +541 -0
  149. package/dist/docs/templates/progress-success.md +125 -0
  150. package/dist/docs/templates/settings-form.md +401 -0
  151. package/dist/docs/templates/stats-blocks.md +1245 -0
  152. package/dist/docs/templates/table-panel.md +310 -0
  153. package/dist/docs/templates/usage-cards.md +199 -0
  154. package/dist/docs/utilities/classNames.md +89 -1
  155. package/dist/docs/utilities/deviceUtils.md +2 -2
  156. package/dist/docs/utilities/featureToggles.md +182 -2
  157. package/dist/docs/utilities/fuelTypeUtils.md +27 -29
  158. package/dist/docs/utilities/getTrackingAttributes.md +322 -0
  159. package/dist/docs/utilities/routeUtils.md +211 -3
  160. package/dist/docs/utilities/useAfterMount.md +1 -1
  161. package/dist/docs/utilities/useAutoAnimate.md +1 -1
  162. package/dist/docs/utilities/useAverage.md +1 -1
  163. package/dist/docs/utilities/useClickOutside.md +1 -1
  164. package/dist/docs/utilities/useClipboard.md +2 -2
  165. package/dist/docs/utilities/useCookies.md +1 -1
  166. package/dist/docs/utilities/useCount.md +1 -1
  167. package/dist/docs/utilities/useDarkMode.md +5 -4
  168. package/dist/docs/utilities/useDebugInfo.md +3 -3
  169. package/dist/docs/utilities/useDraggableElement.md +281 -0
  170. package/dist/docs/utilities/useEffectOnce.md +1 -1
  171. package/dist/docs/utilities/useElapsedTime.md +1 -1
  172. package/dist/docs/utilities/useElementSize.md +1 -1
  173. package/dist/docs/utilities/useEsc.md +1 -1
  174. package/dist/docs/utilities/useEvent.md +1 -1
  175. package/dist/docs/utilities/useFocusTrap.md +1 -1
  176. package/dist/docs/utilities/useFullscreen.md +1 -1
  177. package/dist/docs/utilities/useHover.md +1 -1
  178. package/dist/docs/utilities/useIncomingPostMessages.md +1 -1
  179. package/dist/docs/utilities/useInterval.md +1 -1
  180. package/dist/docs/utilities/useIsFocusWithin.md +1 -1
  181. package/dist/docs/utilities/useKey.md +8 -10
  182. package/dist/docs/utilities/useLocalStorage.md +1 -1
  183. package/dist/docs/utilities/useLocationSuggestions.md +1 -1
  184. package/dist/docs/utilities/useMax.md +1 -1
  185. package/dist/docs/utilities/useMin.md +1 -1
  186. package/dist/docs/utilities/useMutationObserver.md +1 -1
  187. package/dist/docs/utilities/useOnScreen.md +1 -1
  188. package/dist/docs/utilities/useOnlineStatus.md +1 -1
  189. package/dist/docs/utilities/usePostMessage.md +2 -2
  190. package/dist/docs/utilities/usePostMessageSender.md +1 -1
  191. package/dist/docs/utilities/usePrevious.md +110 -2
  192. package/dist/docs/utilities/useResizeObserver.md +35 -15
  193. package/dist/docs/utilities/useRioCookieConsent.md +1 -1
  194. package/dist/docs/utilities/useScrollPosition.md +3 -6
  195. package/dist/docs/utilities/useSearch.md +1 -3
  196. package/dist/docs/utilities/useSearchHighlight.md +1 -1
  197. package/dist/docs/utilities/useSorting.md +370 -239
  198. package/dist/docs/utilities/useStateWithValidation.md +1 -1
  199. package/dist/docs/utilities/useSum.md +1 -1
  200. package/dist/docs/utilities/useTableExport.md +364 -288
  201. package/dist/docs/utilities/useTableSelection.md +88 -92
  202. package/dist/docs/utilities/useTimeout.md +1 -1
  203. package/dist/docs/utilities/useToggle.md +1 -1
  204. package/dist/docs/utilities/useUrlState.md +1 -1
  205. package/dist/docs/utilities/useWindowResize.md +1 -1
  206. package/dist/index.mjs +173 -69
  207. package/dist/search-synonyms.json +214 -76
  208. package/dist/version.json +2 -2
  209. package/package.json +4 -5
  210. package/dist/docs/components/mapRouteGenerator.md +0 -6
  211. package/dist/docs/components/tables.md +0 -8
package/dist/docs/components/assetTree.md CHANGED
@@ -3,46 +3,48 @@
3
3
  *Category:* Components
4
4
  *Section:* Selection
5
5
  *Source:* https://uikit.developers.rio.cloud/#/components/assetTree
6
- *Captured:* 2026-03-06T10:40:27.768Z
6
+ *Captured:* 2026-04-27T14:57:37.479Z
7
7
 
8
8
  ## AssetTree
9
9
 
10
+ The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.
11
+
10
12
  ### Example: Example 1
11
13
 
12
14
  Filter
13
15
 
14
- 5616
16
+ 5241
15
17
  4
16
18
 
17
- Group - Abbie Frami - 5984 25
19
+ Group - Abbie D'Amore - 4617 14
18
20
 
19
- Group - Abigayle Schiller - 8156 8
21
+ Group - Abdullah Gorczany - 4604 12
20
22
 
21
- Group - Adam Bednar - 2630 8
23
+ Group - Ada Bergnaum - 6885 15
22
24
 
23
- Group - Adriel Bartell - 1478 10
25
+ Group - Adam Spencer - 1326 6
24
26
 
25
- Group - Adrien Koss - 6578 15
27
+ Group - Adrain Rice - 3568 7
26
28
 
27
- Group - Ahmad Hessel - 9343 10
29
+ Group - Agustin Sawayn - 9288 13
28
30
 
29
- Group - Ahmed Friesen - 6567 10
31
+ Group - Agustina Mitchell - 7938 12
30
32
 
31
- Group - Albina Hammes-Wehner - 2559 16
33
+ Group - Alba Dickens - 4029 15
32
34
 
33
- Group - Alex Barton - 8849 14
35
+ Group - Albert Larkin Jr. - 4366 12
34
36
 
35
- Group - Alex Kilback - 5160 14
37
+ Group - Albert Turcotte - 3213 17
36
38
 
37
- Group - Alex Nader - 8551 13
39
+ Group - Albertha Maggio Jr. - 5254 14
38
40
 
39
- Group - Alexander Dickens - 7423 21
41
+ Group - Alejandro Dach Jr. - 7483 17
40
42
 
41
- Group - Alyson Altenwerth - 1730 12
43
+ Group - Alek Goldner - 1787 12
42
44
 
43
- Group - Alyssa Hilll - 7463 18
45
+ Group - Alek Hettinger V - 4864 13
44
46
 
45
- Group - Alyssa Russel PhD - 6088 11
47
+ Group - Alessandra Effertz - 8203 14
46
48
 
47
49
  200
48
50
 
@@ -227,8 +229,8 @@ const AssetTreeExample = () => {
227
229
  const handleToggleEmptyGroups = () => setShowEmptyGroups(!showEmptyGroups);
228
230
  const handleToggleAssetGroups = () => setShowAssetGroups(!showAssetGroups);
229
231
 
230
- const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {
231
- return selectedItemIds.map(selectedItemId => {
232
+ const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) =>
233
+ selectedItemIds.map(selectedItemId => {
232
234
  const result = list.find(listItem => listItem.id === selectedItemId);
233
235
  if (result) {
234
236
  const name = isObject(result.name)
@@ -238,7 +240,6 @@ const AssetTreeExample = () => {
238
240
  }
239
241
  return null;
240
242
  });
241
- };
242
243
 
243
244
  // Custom filter function for driver as for this we showcase the usage of a custom search component
244
245
  const filteredDrivers = randomDrivers.filter(driver =>
@@ -557,27 +558,26 @@ export default AssetTreeExample;
557
558
 
558
559
  ### Example: Example 2
559
560
 
560
- 8
561
- 5
562
- 8
563
561
  9
562
+ 10
563
+ 5
564
+ 6
564
565
 
565
- My Empty Group 4
566
+ My Empty Group 3
566
567
 
567
- Truck Group East 4
568
+ Truck Group East 5
568
569
 
569
- Truck Group North 5
570
- N18-G203 / M-AN 1009
571
- N18-G458 / M-AN 1015
572
- N18-G504 / M-AN 1024
573
- N18-G754 / M-AN 1028
574
- N18-G932 / M-AN 1006
570
+ Truck Group North 4
571
+ N18-G259 / M-AN 1006
572
+ N18-G545 / M-AN 1029
573
+ N18-G632 / M-AN 1011
574
+ N18-G845 / M-AN 1003
575
575
 
576
- Truck Group South 6
576
+ Truck Group South 7
577
577
 
578
- Truck Group West 7
578
+ Truck Group West 6
579
579
 
580
- All my unassigned Trucks 4
580
+ All my unassigned Trucks 5
581
581
 
582
582
  Current category:
583
583
  assets
@@ -660,8 +660,8 @@ const AssetTreeSingleSelectExample = () => {
660
660
  const handleChangeCategories = (newCategoryId: string) => setCurrentCategoryId(newCategoryId);
661
661
  const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);
662
662
 
663
- const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {
664
- return selectedItemIds.map(selectedItemId => {
663
+ const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) =>
664
+ selectedItemIds.map(selectedItemId => {
665
665
  const result = list.find(listItem => listItem.id === selectedItemId);
666
666
  if (result) {
667
667
  const name = isObject(result.name)
@@ -671,7 +671,6 @@ const AssetTreeSingleSelectExample = () => {
671
671
  }
672
672
  return null;
673
673
  });
674
- };
675
674
 
676
675
  return (
677
676
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -774,24 +773,24 @@ export default AssetTreeSingleSelectExample;
774
773
  <div class="display-flex justify-content-between align-items-start width-100pct">
775
774
  <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
776
775
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
777
- <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
776
+ <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
778
777
  </span>
779
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
778
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
780
779
  </div>
781
780
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
782
781
  <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
783
782
  </span>
784
- <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
783
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">10</span>
785
784
  </div>
786
785
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
787
- <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
786
+ <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
788
787
  </span>
789
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
788
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
790
789
  </div>
791
790
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
792
- <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
791
+ <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
793
792
  </span>
794
- <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
793
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
795
794
  </div>
796
795
  </div>
797
796
  </div>
@@ -804,7 +803,7 @@ export default AssetTreeSingleSelectExample;
804
803
  <span class="TreeLabelNameText">
805
804
  <span class="TreeLabelNameTextHeadline">My Empty Group</span>
806
805
  </span>
807
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
806
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
808
807
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
809
808
  </span>
810
809
  </span>
@@ -816,7 +815,7 @@ export default AssetTreeSingleSelectExample;
816
815
  <span class="TreeLabelNameText">
817
816
  <span class="TreeLabelNameTextHeadline">Truck Group East</span>
818
817
  </span>
819
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
818
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
820
819
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
821
820
  </span>
822
821
  </span>
@@ -828,53 +827,44 @@ export default AssetTreeSingleSelectExample;
828
827
  <span class="TreeLabelNameText">
829
828
  <span class="TreeLabelNameTextHeadline">Truck Group North</span>
830
829
  </span>
831
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
830
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
832
831
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
833
832
  </span>
834
833
  </span>
835
834
  </div>
836
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
837
- <span class="TreeLabel TreeLabelName">
838
- <span class="rioglyph rioglyph-truck">
839
- </span>
840
- <span class="TreeLabelNameText">
841
- <span class="TreeLabelNameTextHeadline">N18-G203 / M-AN 1009</span>
842
- </span>
843
- </span>
844
- </div>
845
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
835
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
846
836
  <span class="TreeLabel TreeLabelName">
847
837
  <span class="rioglyph rioglyph-bus">
848
838
  </span>
849
839
  <span class="TreeLabelNameText">
850
- <span class="TreeLabelNameTextHeadline">N18-G458 / M-AN 1015</span>
840
+ <span class="TreeLabelNameTextHeadline">N18-G259 / M-AN 1006</span>
851
841
  </span>
852
842
  </span>
853
843
  </div>
854
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9724">
844
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9729">
855
845
  <span class="TreeLabel TreeLabelName">
856
- <span class="rioglyph rioglyph-truck">
846
+ <span class="rioglyph rioglyph-van">
857
847
  </span>
858
848
  <span class="TreeLabelNameText">
859
- <span class="TreeLabelNameTextHeadline">N18-G504 / M-AN 1024</span>
849
+ <span class="TreeLabelNameTextHeadline">N18-G545 / M-AN 1029</span>
860
850
  </span>
861
851
  </span>
862
852
  </div>
863
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9728">
853
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9711">
864
854
  <span class="TreeLabel TreeLabelName">
865
- <span class="rioglyph rioglyph-van">
855
+ <span class="rioglyph rioglyph-trailer">
866
856
  </span>
867
857
  <span class="TreeLabelNameText">
868
- <span class="TreeLabelNameTextHeadline">N18-G754 / M-AN 1028</span>
858
+ <span class="TreeLabelNameTextHeadline">N18-G632 / M-AN 1011</span>
869
859
  </span>
870
860
  </span>
871
861
  </div>
872
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
862
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
873
863
  <span class="TreeLabel TreeLabelName">
874
- <span class="rioglyph rioglyph-truck">
864
+ <span class="rioglyph rioglyph-bus">
875
865
  </span>
876
866
  <span class="TreeLabelNameText">
877
- <span class="TreeLabelNameTextHeadline">N18-G932 / M-AN 1006</span>
867
+ <span class="TreeLabelNameTextHeadline">N18-G845 / M-AN 1003</span>
878
868
  </span>
879
869
  </span>
880
870
  </div>
@@ -885,7 +875,7 @@ export default AssetTreeSingleSelectExample;
885
875
  <span class="TreeLabelNameText">
886
876
  <span class="TreeLabelNameTextHeadline">Truck Group South</span>
887
877
  </span>
888
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
878
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
889
879
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
890
880
  </span>
891
881
  </span>
@@ -897,7 +887,7 @@ export default AssetTreeSingleSelectExample;
897
887
  <span class="TreeLabelNameText">
898
888
  <span class="TreeLabelNameTextHeadline">Truck Group West</span>
899
889
  </span>
900
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
890
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
901
891
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
902
892
  </span>
903
893
  </span>
@@ -909,7 +899,7 @@ export default AssetTreeSingleSelectExample;
909
899
  <span class="TreeLabelNameText">
910
900
  <span class="TreeLabelNameTextHeadline">All my unassigned Trucks</span>
911
901
  </span>
912
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
902
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
913
903
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
914
904
  </span>
915
905
  </span>
@@ -1094,31 +1084,44 @@ export default AssetTreeSingleSelectExample;
1094
1084
 
1095
1085
  ## AssetTree with multiple asset filter in summary
1096
1086
 
1087
+ When using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.
1088
+
1097
1089
  ### Example: Example 3
1098
1090
 
1099
- 1
1100
- 5
1101
- 6
1091
+ 3
1102
1092
  8
1093
+ 6
1094
+ 3
1103
1095
 
1104
- 4
1105
1096
  9
1106
1097
  2
1107
- 2
1108
- 3
1098
+ 7
1099
+ 1
1100
+ 1
1101
+
1102
+ Mixed Vehicles 14
1103
+
1104
+ Vehicle-1032 Debug: lpg
1105
+
1106
+ Vehicle-1530 Debug: diesel
1107
+
1108
+ Vehicle-1885 Debug: electric
1109
+
1110
+ Vehicle-2261 Debug: electric
1111
+
1112
+ Vehicle-3321 Debug: electric
1113
+
1114
+ Vehicle-6234 Debug: gas
1115
+
1116
+ Vehicle-6675 Debug: gas
1117
+
1118
+ Vehicle-6884 Debug: dual_fuel_diesel_cng
1119
+
1120
+ Vehicle-7323 Debug: hydrogen
1109
1121
 
1110
- Mixed Vehicles 9
1111
- Vehicle-1126 Debug: dual_fuel_diesel_cng
1112
- Vehicle-1711 Debug: cng
1113
- Vehicle-3593 Debug: cng
1114
- Vehicle-4809 Debug: lpg
1115
- Vehicle-7089 Debug: dual_fuel_diesel_cng
1116
- Vehicle-7536 Debug: diesel
1117
- Vehicle-8575 Debug: dual_fuel_diesel_cng
1118
- Vehicle-8949 Debug: lpg
1119
- Vehicle-9667 Debug: lpg
1122
+ Vehicle-8654 Debug: diesel
1120
1123
 
1121
- Ungrouped 11
1124
+ Vehicle-8759 Debug: electric
1122
1125
 
1123
1126
  Selected groups:
1124
1127
 
@@ -1278,15 +1281,14 @@ const AssetTreeExample = () => {
1278
1281
  setActiveFuelTypeGroupFilter(toggleListItem(activeFuelTypeGroupFilter, fuelTypeGroupFilter));
1279
1282
  };
1280
1283
 
1281
- const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {
1282
- return selectedItemIds.map(selectedItemId => {
1284
+ const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) =>
1285
+ selectedItemIds.map(selectedItemId => {
1283
1286
  const result = list.find(listItem => listItem.id === selectedItemId);
1284
1287
  if (result) {
1285
1288
  return <li key={selectedItemId}>{`${result.name}`}</li>;
1286
1289
  }
1287
1290
  return null;
1288
1291
  });
1289
- };
1290
1292
 
1291
1293
  return (
1292
1294
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -1453,12 +1455,12 @@ export default AssetTreeExample;
1453
1455
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1454
1456
  <span class="rioglyph rioglyph-truck-baseline text-size-16 margin-right-2">
1455
1457
  </span>
1456
- <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1458
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1457
1459
  </div>
1458
1460
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1459
1461
  <span class="rioglyph rioglyph-bus-baseline text-size-16 margin-right-2">
1460
1462
  </span>
1461
- <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1463
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
1462
1464
  </div>
1463
1465
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1464
1466
  <span class="rioglyph rioglyph-van-baseline text-size-16 margin-right-2">
@@ -1468,41 +1470,41 @@ export default AssetTreeExample;
1468
1470
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1469
1471
  <span class="rioglyph rioglyph-car-baseline text-size-16 margin-right-2">
1470
1472
  </span>
1471
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
1473
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1472
1474
  </div>
1473
1475
  </div>
1474
1476
  <div class="TreeSummaryRow display-grid grid-cols-4 gap-10">
1475
1477
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1476
1478
  <span class="rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2">
1477
1479
  </span>
1478
- <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
1480
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
1479
1481
  </div>
1480
1482
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1481
1483
  <span class="rioglyph rioglyph-fuel-gas text-size-16 margin-right-2">
1482
1484
  </span>
1483
- <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
1485
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1484
1486
  </div>
1485
1487
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1486
1488
  <span class="rioglyph rioglyph-fuel-electric text-size-16 margin-right-2">
1487
1489
  </span>
1488
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1490
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1489
1491
  </div>
1490
1492
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1491
1493
  <span class="rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2">
1492
1494
  </span>
1493
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1495
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1494
1496
  </div>
1495
1497
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1496
1498
  <span class="rioglyph rioglyph-fuel-mix text-size-16 margin-right-2">
1497
1499
  </span>
1498
- <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1500
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1499
1501
  </div>
1500
1502
  </div>
1501
1503
  </div>
1502
1504
  </div>
1503
1505
  <div>
1504
1506
  <div class="dropdown btn-group TreeHeaderOptions height-20">
1505
- <button type="button" id="n1rmgx0134e" class="btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark" tabindex="0">
1507
+ <button type="button" id="9uzjfkuoqvt" class="btn btn-default btn-sm btn-icon-only btn-component dropdown-toggle hover-bg-white border-none text-color-gray hover-text-color-dark" tabindex="0">
1506
1508
  <span class="rioglyph rioglyph-option-vertical" aria-hidden="true">
1507
1509
  </span>
1508
1510
  </button>
@@ -1511,227 +1513,314 @@ export default AssetTreeExample;
1511
1513
  </div>
1512
1514
  </div>
1513
1515
  <div class="TreeRoot user-select-none overflow-hidden" style="position: relative;">
1514
- <div class="TreeNodeContainer user-select-none overflow-hidden open" data-id="group-1">
1515
- <div class="TreeNode from-group" data-key="group-1">
1516
- <label class="checkbox TreeCheckbox" tabindex="0">
1517
- <input type="checkbox" class="TreeCheckbox">
1518
- <span class="checkbox-text">
1519
- </span>
1520
- </label>
1521
- <span class="TreeLabel TreeLabelName">
1522
- <span class="TreeLabelNameText">
1523
- <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
1524
- </span>
1525
- <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
1526
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1527
- </span>
1528
- </span>
1529
- </div>
1530
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
1531
- <label class="checkbox TreeCheckbox" tabindex="0">
1532
- <input type="checkbox" class="TreeCheckbox">
1533
- <span class="checkbox-text">
1534
- </span>
1535
- </label>
1536
- <span class="TreeLabel TreeLabelName">
1537
- <span class="rioglyph-icon-pair">
1538
- <span class="rioglyph rioglyph-bus">
1539
- </span>
1540
- <span class="rioglyph rioglyph-fuel-mix">
1541
- </span>
1542
- </span>
1543
- <span class="TreeLabelNameText">
1544
- <span class="TreeLabelNameTextHeadline">Vehicle-1126</span>
1545
- <span class="TreeLabelNameTextSubline">
1546
- <span>Debug: dual_fuel_diesel_cng</span>
1547
- </span>
1548
- </span>
1549
- </span>
1550
- </div>
1551
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
1552
- <label class="checkbox TreeCheckbox" tabindex="0">
1553
- <input type="checkbox" class="TreeCheckbox">
1554
- <span class="checkbox-text">
1555
- </span>
1556
- </label>
1557
- <span class="TreeLabel TreeLabelName">
1558
- <span class="rioglyph-icon-pair">
1559
- <span class="rioglyph rioglyph-bus">
1560
- </span>
1561
- <span class="rioglyph rioglyph-fuel-gas">
1562
- </span>
1563
- </span>
1564
- <span class="TreeLabelNameText">
1565
- <span class="TreeLabelNameTextHeadline">Vehicle-1711</span>
1566
- <span class="TreeLabelNameTextSubline">
1567
- <span>Debug: cng</span>
1568
- </span>
1569
- </span>
1570
- </span>
1571
- </div>
1572
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
1573
- <label class="checkbox TreeCheckbox" tabindex="0">
1574
- <input type="checkbox" class="TreeCheckbox">
1575
- <span class="checkbox-text">
1576
- </span>
1577
- </label>
1578
- <span class="TreeLabel TreeLabelName">
1579
- <span class="rioglyph-icon-pair">
1580
- <span class="rioglyph rioglyph-van">
1581
- </span>
1582
- <span class="rioglyph rioglyph-fuel-gas">
1583
- </span>
1584
- </span>
1585
- <span class="TreeLabelNameText">
1586
- <span class="TreeLabelNameTextHeadline">Vehicle-3593</span>
1587
- <span class="TreeLabelNameTextSubline">
1588
- <span>Debug: cng</span>
1589
- </span>
1590
- </span>
1591
- </span>
1592
- </div>
1593
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
1594
- <label class="checkbox TreeCheckbox" tabindex="0">
1595
- <input type="checkbox" class="TreeCheckbox">
1596
- <span class="checkbox-text">
1597
- </span>
1598
- </label>
1599
- <span class="TreeLabel TreeLabelName">
1600
- <span class="rioglyph-icon-pair">
1601
- <span class="rioglyph rioglyph-car">
1602
- </span>
1603
- <span class="rioglyph rioglyph-fuel-gas">
1604
- </span>
1605
- </span>
1606
- <span class="TreeLabelNameText">
1607
- <span class="TreeLabelNameTextHeadline">Vehicle-4809</span>
1608
- <span class="TreeLabelNameTextSubline">
1609
- <span>Debug: lpg</span>
1610
- </span>
1611
- </span>
1612
- </span>
1613
- </div>
1614
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
1615
- <label class="checkbox TreeCheckbox" tabindex="0">
1616
- <input type="checkbox" class="TreeCheckbox">
1617
- <span class="checkbox-text">
1618
- </span>
1619
- </label>
1620
- <span class="TreeLabel TreeLabelName">
1621
- <span class="rioglyph-icon-pair">
1622
- <span class="rioglyph rioglyph-van">
1623
- </span>
1624
- <span class="rioglyph rioglyph-fuel-mix">
1625
- </span>
1626
- </span>
1627
- <span class="TreeLabelNameText">
1628
- <span class="TreeLabelNameTextHeadline">Vehicle-7089</span>
1629
- <span class="TreeLabelNameTextSubline">
1630
- <span>Debug: dual_fuel_diesel_cng</span>
1631
- </span>
1632
- </span>
1633
- </span>
1634
- </div>
1635
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
1636
- <label class="checkbox TreeCheckbox" tabindex="0">
1637
- <input type="checkbox" class="TreeCheckbox">
1638
- <span class="checkbox-text">
1639
- </span>
1640
- </label>
1641
- <span class="TreeLabel TreeLabelName">
1642
- <span class="rioglyph-icon-pair">
1643
- <span class="rioglyph rioglyph-car">
1644
- </span>
1645
- <span class="rioglyph rioglyph-fuel-liquid">
1646
- </span>
1647
- </span>
1648
- <span class="TreeLabelNameText">
1649
- <span class="TreeLabelNameTextHeadline">Vehicle-7536</span>
1650
- <span class="TreeLabelNameTextSubline">
1651
- <span>Debug: diesel</span>
1652
- </span>
1653
- </span>
1654
- </span>
1655
- </div>
1656
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
1657
- <label class="checkbox TreeCheckbox" tabindex="0">
1658
- <input type="checkbox" class="TreeCheckbox">
1659
- <span class="checkbox-text">
1660
- </span>
1661
- </label>
1662
- <span class="TreeLabel TreeLabelName">
1663
- <span class="rioglyph-icon-pair">
1664
- <span class="rioglyph rioglyph-van">
1665
- </span>
1666
- <span class="rioglyph rioglyph-fuel-mix">
1667
- </span>
1668
- </span>
1669
- <span class="TreeLabelNameText">
1670
- <span class="TreeLabelNameTextHeadline">Vehicle-8575</span>
1671
- <span class="TreeLabelNameTextSubline">
1672
- <span>Debug: dual_fuel_diesel_cng</span>
1673
- </span>
1674
- </span>
1675
- </span>
1676
- </div>
1677
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1678
- <label class="checkbox TreeCheckbox" tabindex="0">
1679
- <input type="checkbox" class="TreeCheckbox">
1680
- <span class="checkbox-text">
1681
- </span>
1682
- </label>
1683
- <span class="TreeLabel TreeLabelName">
1684
- <span class="rioglyph-icon-pair">
1685
- <span class="rioglyph rioglyph-van">
1686
- </span>
1687
- <span class="rioglyph rioglyph-fuel-gas">
1688
- </span>
1689
- </span>
1690
- <span class="TreeLabelNameText">
1691
- <span class="TreeLabelNameTextHeadline">Vehicle-8949</span>
1692
- <span class="TreeLabelNameTextSubline">
1693
- <span>Debug: lpg</span>
1694
- </span>
1695
- </span>
1696
- </span>
1516
+ <div class="tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
1517
+ <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
1518
+ <div class="scrollbar-content-wrapper">
1519
+ <div class="grouped-list" style="height: 825px; position: relative;">
1520
+ <div data-index="0" class="virtualized-tree-item group-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 41px; transform: translateY(0px);">
1521
+ <div class="TreeNodeContainer user-select-none overflow-hidden open" data-id="group-1">
1522
+ <div class="TreeNode from-group" data-key="group-1">
1523
+ <label class="checkbox TreeCheckbox" tabindex="0">
1524
+ <input type="checkbox" class="TreeCheckbox">
1525
+ <span class="checkbox-text">
1526
+ </span>
1527
+ </label>
1528
+ <span class="TreeLabel TreeLabelName">
1529
+ <span class="TreeLabelNameText">
1530
+ <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
1531
+ </span>
1532
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">14</span>
1533
+ <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1534
+ </span>
1535
+ </span>
1536
+ </div>
1537
+ </div>
1538
+ </div>
1539
+ <div data-index="1" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(41px);">
1540
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1541
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
1542
+ <label class="checkbox TreeCheckbox" tabindex="0">
1543
+ <input type="checkbox" class="TreeCheckbox">
1544
+ <span class="checkbox-text">
1545
+ </span>
1546
+ </label>
1547
+ <span class="TreeLabel TreeLabelName">
1548
+ <span class="rioglyph-icon-pair">
1549
+ <span class="rioglyph rioglyph-van">
1550
+ </span>
1551
+ <span class="rioglyph rioglyph-fuel-gas">
1552
+ </span>
1553
+ </span>
1554
+ <span class="TreeLabelNameText">
1555
+ <span class="TreeLabelNameTextHeadline">Vehicle-1032</span>
1556
+ <span class="TreeLabelNameTextSubline">
1557
+ <span>Debug: lpg</span>
1558
+ </span>
1559
+ </span>
1560
+ </span>
1561
+ </div>
1562
+ </div>
1563
+ </div>
1564
+ <div data-index="2" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(95px);">
1565
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1566
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
1567
+ <label class="checkbox TreeCheckbox" tabindex="0">
1568
+ <input type="checkbox" class="TreeCheckbox">
1569
+ <span class="checkbox-text">
1570
+ </span>
1571
+ </label>
1572
+ <span class="TreeLabel TreeLabelName">
1573
+ <span class="rioglyph-icon-pair">
1574
+ <span class="rioglyph rioglyph-bus">
1575
+ </span>
1576
+ <span class="rioglyph rioglyph-fuel-liquid">
1577
+ </span>
1578
+ </span>
1579
+ <span class="TreeLabelNameText">
1580
+ <span class="TreeLabelNameTextHeadline">Vehicle-1530</span>
1581
+ <span class="TreeLabelNameTextSubline">
1582
+ <span>Debug: diesel</span>
1583
+ </span>
1584
+ </span>
1585
+ </span>
1586
+ </div>
1587
+ </div>
1588
+ </div>
1589
+ <div data-index="3" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(149px);">
1590
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1591
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1592
+ <label class="checkbox TreeCheckbox" tabindex="0">
1593
+ <input type="checkbox" class="TreeCheckbox">
1594
+ <span class="checkbox-text">
1595
+ </span>
1596
+ </label>
1597
+ <span class="TreeLabel TreeLabelName">
1598
+ <span class="rioglyph-icon-pair">
1599
+ <span class="rioglyph rioglyph-van">
1600
+ </span>
1601
+ <span class="rioglyph rioglyph-fuel-electric">
1602
+ </span>
1603
+ </span>
1604
+ <span class="TreeLabelNameText">
1605
+ <span class="TreeLabelNameTextHeadline">Vehicle-1885</span>
1606
+ <span class="TreeLabelNameTextSubline">
1607
+ <span>Debug: electric</span>
1608
+ </span>
1609
+ </span>
1610
+ </span>
1611
+ </div>
1612
+ </div>
1613
+ </div>
1614
+ <div data-index="4" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(203px);">
1615
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1616
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1617
+ <label class="checkbox TreeCheckbox" tabindex="0">
1618
+ <input type="checkbox" class="TreeCheckbox">
1619
+ <span class="checkbox-text">
1620
+ </span>
1621
+ </label>
1622
+ <span class="TreeLabel TreeLabelName">
1623
+ <span class="rioglyph-icon-pair">
1624
+ <span class="rioglyph rioglyph-van">
1625
+ </span>
1626
+ <span class="rioglyph rioglyph-fuel-electric">
1627
+ </span>
1628
+ </span>
1629
+ <span class="TreeLabelNameText">
1630
+ <span class="TreeLabelNameTextHeadline">Vehicle-2261</span>
1631
+ <span class="TreeLabelNameTextSubline">
1632
+ <span>Debug: electric</span>
1633
+ </span>
1634
+ </span>
1635
+ </span>
1636
+ </div>
1637
+ </div>
1638
+ </div>
1639
+ <div data-index="5" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(257px);">
1640
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1641
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
1642
+ <label class="checkbox TreeCheckbox" tabindex="0">
1643
+ <input type="checkbox" class="TreeCheckbox">
1644
+ <span class="checkbox-text">
1645
+ </span>
1646
+ </label>
1647
+ <span class="TreeLabel TreeLabelName">
1648
+ <span class="rioglyph-icon-pair">
1649
+ <span class="rioglyph rioglyph-bus">
1650
+ </span>
1651
+ <span class="rioglyph rioglyph-fuel-electric">
1652
+ </span>
1653
+ </span>
1654
+ <span class="TreeLabelNameText">
1655
+ <span class="TreeLabelNameTextHeadline">Vehicle-3321</span>
1656
+ <span class="TreeLabelNameTextSubline">
1657
+ <span>Debug: electric</span>
1658
+ </span>
1659
+ </span>
1660
+ </span>
1661
+ </div>
1662
+ </div>
1663
+ </div>
1664
+ <div data-index="6" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(311px);">
1665
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1666
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
1667
+ <label class="checkbox TreeCheckbox" tabindex="0">
1668
+ <input type="checkbox" class="TreeCheckbox">
1669
+ <span class="checkbox-text">
1670
+ </span>
1671
+ </label>
1672
+ <span class="TreeLabel TreeLabelName">
1673
+ <span class="rioglyph-icon-pair">
1674
+ <span class="rioglyph rioglyph-car">
1675
+ </span>
1676
+ <span class="rioglyph rioglyph-fuel-liquid">
1677
+ </span>
1678
+ </span>
1679
+ <span class="TreeLabelNameText">
1680
+ <span class="TreeLabelNameTextHeadline">Vehicle-6234</span>
1681
+ <span class="TreeLabelNameTextSubline">
1682
+ <span>Debug: gas</span>
1683
+ </span>
1684
+ </span>
1685
+ </span>
1686
+ </div>
1687
+ </div>
1688
+ </div>
1689
+ <div data-index="7" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(365px);">
1690
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1691
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
1692
+ <label class="checkbox TreeCheckbox" tabindex="0">
1693
+ <input type="checkbox" class="TreeCheckbox">
1694
+ <span class="checkbox-text">
1695
+ </span>
1696
+ </label>
1697
+ <span class="TreeLabel TreeLabelName">
1698
+ <span class="rioglyph-icon-pair">
1699
+ <span class="rioglyph rioglyph-bus">
1700
+ </span>
1701
+ <span class="rioglyph rioglyph-fuel-liquid">
1702
+ </span>
1703
+ </span>
1704
+ <span class="TreeLabelNameText">
1705
+ <span class="TreeLabelNameTextHeadline">Vehicle-6675</span>
1706
+ <span class="TreeLabelNameTextSubline">
1707
+ <span>Debug: gas</span>
1708
+ </span>
1709
+ </span>
1710
+ </span>
1711
+ </div>
1712
+ </div>
1713
+ </div>
1714
+ <div data-index="8" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(419px);">
1715
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1716
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9712">
1717
+ <label class="checkbox TreeCheckbox" tabindex="0">
1718
+ <input type="checkbox" class="TreeCheckbox">
1719
+ <span class="checkbox-text">
1720
+ </span>
1721
+ </label>
1722
+ <span class="TreeLabel TreeLabelName">
1723
+ <span class="rioglyph-icon-pair">
1724
+ <span class="rioglyph rioglyph-bus">
1725
+ </span>
1726
+ <span class="rioglyph rioglyph-fuel-mix">
1727
+ </span>
1728
+ </span>
1729
+ <span class="TreeLabelNameText">
1730
+ <span class="TreeLabelNameTextHeadline">Vehicle-6884</span>
1731
+ <span class="TreeLabelNameTextSubline">
1732
+ <span>Debug: dual_fuel_diesel_cng</span>
1733
+ </span>
1734
+ </span>
1735
+ </span>
1736
+ </div>
1737
+ </div>
1738
+ </div>
1739
+ <div data-index="9" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(473px);">
1740
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1741
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
1742
+ <label class="checkbox TreeCheckbox" tabindex="0">
1743
+ <input type="checkbox" class="TreeCheckbox">
1744
+ <span class="checkbox-text">
1745
+ </span>
1746
+ </label>
1747
+ <span class="TreeLabel TreeLabelName">
1748
+ <span class="rioglyph-icon-pair">
1749
+ <span class="rioglyph rioglyph-bus">
1750
+ </span>
1751
+ <span class="rioglyph rioglyph-fuel-hydrogen">
1752
+ </span>
1753
+ </span>
1754
+ <span class="TreeLabelNameText">
1755
+ <span class="TreeLabelNameTextHeadline">Vehicle-7323</span>
1756
+ <span class="TreeLabelNameTextSubline">
1757
+ <span>Debug: hydrogen</span>
1758
+ </span>
1759
+ </span>
1760
+ </span>
1761
+ </div>
1762
+ </div>
1763
+ </div>
1764
+ <div data-index="10" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(527px);">
1765
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1766
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
1767
+ <label class="checkbox TreeCheckbox" tabindex="0">
1768
+ <input type="checkbox" class="TreeCheckbox">
1769
+ <span class="checkbox-text">
1770
+ </span>
1771
+ </label>
1772
+ <span class="TreeLabel TreeLabelName">
1773
+ <span class="rioglyph-icon-pair">
1774
+ <span class="rioglyph rioglyph-bus">
1775
+ </span>
1776
+ <span class="rioglyph rioglyph-fuel-liquid">
1777
+ </span>
1778
+ </span>
1779
+ <span class="TreeLabelNameText">
1780
+ <span class="TreeLabelNameTextHeadline">Vehicle-8654</span>
1781
+ <span class="TreeLabelNameTextSubline">
1782
+ <span>Debug: diesel</span>
1783
+ </span>
1784
+ </span>
1785
+ </span>
1786
+ </div>
1787
+ </div>
1788
+ </div>
1789
+ <div data-index="11" class="virtualized-tree-item leaf-item " style="position: absolute; top: 0px; left: 0px; width: 100%; height: 54px; transform: translateY(581px);">
1790
+ <div class="TreeNodeContainer user-select-none overflow-hidden open">
1791
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
1792
+ <label class="checkbox TreeCheckbox" tabindex="0">
1793
+ <input type="checkbox" class="TreeCheckbox">
1794
+ <span class="checkbox-text">
1795
+ </span>
1796
+ </label>
1797
+ <span class="TreeLabel TreeLabelName">
1798
+ <span class="rioglyph-icon-pair">
1799
+ <span class="rioglyph rioglyph-truck">
1800
+ </span>
1801
+ <span class="rioglyph rioglyph-fuel-electric">
1802
+ </span>
1803
+ </span>
1804
+ <span class="TreeLabelNameText">
1805
+ <span class="TreeLabelNameTextHeadline">Vehicle-8759</span>
1806
+ <span class="TreeLabelNameTextSubline">
1807
+ <span>Debug: electric</span>
1808
+ </span>
1809
+ </span>
1810
+ </span>
1811
+ </div>
1812
+ </div>
1813
+ </div>
1814
+ </div>
1815
+ </div>
1697
1816
  </div>
1698
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
1699
- <label class="checkbox TreeCheckbox" tabindex="0">
1700
- <input type="checkbox" class="TreeCheckbox">
1701
- <span class="checkbox-text">
1702
- </span>
1703
- </label>
1704
- <span class="TreeLabel TreeLabelName">
1705
- <span class="rioglyph-icon-pair">
1706
- <span class="rioglyph rioglyph-bus">
1707
- </span>
1708
- <span class="rioglyph rioglyph-fuel-gas">
1709
- </span>
1710
- </span>
1711
- <span class="TreeLabelNameText">
1712
- <span class="TreeLabelNameTextHeadline">Vehicle-9667</span>
1713
- <span class="TreeLabelNameTextSubline">
1714
- <span>Debug: lpg</span>
1715
- </span>
1716
- </span>
1717
- </span>
1817
+ <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
1818
+ <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
1819
+ </div>
1718
1820
  </div>
1719
- </div>
1720
- <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned-group">
1721
- <div class="TreeNode from-group" data-key="unassigned-group">
1722
- <label class="checkbox TreeCheckbox" tabindex="0">
1723
- <input type="checkbox" class="TreeCheckbox">
1724
- <span class="checkbox-text">
1725
- </span>
1726
- </label>
1727
- <span class="TreeLabel TreeLabelName">
1728
- <span class="TreeLabelNameText">
1729
- <span class="TreeLabelNameTextHeadline">Ungrouped</span>
1730
- </span>
1731
- <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
1732
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1733
- </span>
1734
- </span>
1821
+ <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
1822
+ <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
1823
+ </div>
1735
1824
  </div>
1736
1825
  </div>
1737
1826
  </div>
@@ -2309,11 +2398,11 @@ export default AssetTreeWithCustomSummaryExample;
2309
2398
 
2310
2399
  ### Example: Example 5
2311
2400
 
2312
- Group 01 7
2401
+ Group 01 11
2313
2402
 
2314
- Group 02 5
2403
+ Group 02 3
2315
2404
 
2316
- Group 03 8
2405
+ Group 03 6
2317
2406
 
2318
2407
  #### React (tsx)
2319
2408
 
@@ -2414,7 +2503,7 @@ export default () => {
2414
2503
  <span class="TreeLabelNameText">
2415
2504
  <span class="TreeLabelNameTextHeadline">Group 01</span>
2416
2505
  </span>
2417
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2506
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
2418
2507
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2419
2508
  </span>
2420
2509
  </span>
@@ -2429,7 +2518,7 @@ export default () => {
2429
2518
  <span class="TreeLabelNameText">
2430
2519
  <span class="TreeLabelNameTextHeadline">Group 02</span>
2431
2520
  </span>
2432
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
2521
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2433
2522
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2434
2523
  </span>
2435
2524
  </span>
@@ -2444,7 +2533,7 @@ export default () => {
2444
2533
  <span class="TreeLabelNameText">
2445
2534
  <span class="TreeLabelNameTextHeadline">Group 03</span>
2446
2535
  </span>
2447
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
2536
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
2448
2537
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2449
2538
  </span>
2450
2539
  </span>
@@ -2606,13 +2695,13 @@ Tree with header and search
2606
2695
 
2607
2696
  20
2608
2697
 
2609
- Folder 01 4
2698
+ Folder 01 3
2610
2699
 
2611
- Folder 02 8
2700
+ Folder 02 7
2612
2701
 
2613
- Folder 03 2
2702
+ Folder 03 7
2614
2703
 
2615
- Folder 04 6
2704
+ Folder 04 3
2616
2705
 
2617
2706
  Selected items:
2618
2707
 
@@ -2670,15 +2759,14 @@ const TreeOnlyExample = () => {
2670
2759
 
2671
2760
  const handleExpandFolder = (newExpandedFolders: string[]) => setExpandedFolders(newExpandedFolders);
2672
2761
 
2673
- const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) => {
2674
- return itemIds.map(selectedItemId => {
2762
+ const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) =>
2763
+ itemIds.map(selectedItemId => {
2675
2764
  const result = list.find(listItem => listItem.id === selectedItemId);
2676
2765
  if (result) {
2677
2766
  return <li key={selectedItemId}>{`${result.name}`}</li>;
2678
2767
  }
2679
2768
  return null;
2680
2769
  });
2681
- };
2682
2770
 
2683
2771
  return (
2684
2772
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -2757,7 +2845,7 @@ export default TreeOnlyExample;
2757
2845
  <span class="TreeLabelNameText">
2758
2846
  <span class="TreeLabelNameTextHeadline">Folder 01</span>
2759
2847
  </span>
2760
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
2848
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2761
2849
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2762
2850
  </span>
2763
2851
  </span>
@@ -2771,7 +2859,7 @@ export default TreeOnlyExample;
2771
2859
  <span class="TreeLabelNameText">
2772
2860
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
2773
2861
  </span>
2774
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
2862
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2775
2863
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2776
2864
  </span>
2777
2865
  </span>
@@ -2785,7 +2873,7 @@ export default TreeOnlyExample;
2785
2873
  <span class="TreeLabelNameText">
2786
2874
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
2787
2875
  </span>
2788
- <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
2876
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2789
2877
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2790
2878
  </span>
2791
2879
  </span>
@@ -2799,7 +2887,7 @@ export default TreeOnlyExample;
2799
2887
  <span class="TreeLabelNameText">
2800
2888
  <span class="TreeLabelNameTextHeadline">Folder 04</span>
2801
2889
  </span>
2802
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
2890
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2803
2891
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2804
2892
  </span>
2805
2893
  </span>
@@ -2875,9 +2963,9 @@ Tree without header and search
2875
2963
 
2876
2964
  Folder 01 6
2877
2965
 
2878
- Folder 02 5
2966
+ Folder 02 7
2879
2967
 
2880
- Folder 03 5
2968
+ Folder 03 3
2881
2969
 
2882
2970
  Folder 04 4
2883
2971
 
@@ -2940,15 +3028,14 @@ const TreeOnlyExample = () => {
2940
3028
 
2941
3029
  const handleExpandFolder = (newExpandedFolders: string[]) => setExpandedFolders(newExpandedFolders);
2942
3030
 
2943
- const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) => {
2944
- return itemIds.map(selectedItemId => {
3031
+ const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) =>
3032
+ itemIds.map(selectedItemId => {
2945
3033
  const result = list.find(listItem => listItem.id === selectedItemId);
2946
3034
  if (result) {
2947
3035
  return <li key={selectedItemId}>{`${result.name}`}</li>;
2948
3036
  }
2949
3037
  return null;
2950
3038
  });
2951
- };
2952
3039
 
2953
3040
  return (
2954
3041
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -3014,7 +3101,7 @@ export default TreeOnlyExample;
3014
3101
  <span class="TreeLabelNameText">
3015
3102
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
3016
3103
  </span>
3017
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
3104
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
3018
3105
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3019
3106
  </span>
3020
3107
  </span>
@@ -3028,7 +3115,7 @@ export default TreeOnlyExample;
3028
3115
  <span class="TreeLabelNameText">
3029
3116
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
3030
3117
  </span>
3031
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
3118
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
3032
3119
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3033
3120
  </span>
3034
3121
  </span>