@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

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 (210) hide show
  1. package/README.md +17 -7
  2. package/dist/doc-metadata.json +325 -85
  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 +628 -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 +22 -22
  9. package/dist/docs/components/appHeader.md +27 -38
  10. package/dist/docs/components/appLayout.md +38 -42
  11. package/dist/docs/components/appNavigationBar.md +1 -1
  12. package/dist/docs/components/areaCharts.md +57 -63
  13. package/dist/docs/components/aspectRatioPlaceholder.md +1 -1
  14. package/dist/docs/components/assetTree.md +200 -167
  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 +531 -417
  19. package/dist/docs/components/barList.md +9 -9
  20. package/dist/docs/components/basicMap.md +60 -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 +57 -65
  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 -3
  28. package/dist/docs/components/chartsGettingStarted.md +1 -3
  29. package/dist/docs/components/chat.md +2 -2
  30. package/dist/docs/components/checkbox.md +15 -12
  31. package/dist/docs/components/circularProgress.md +8 -8
  32. package/dist/docs/components/clearableInput.md +1 -1
  33. package/dist/docs/components/collapse.md +2 -4
  34. package/dist/docs/components/composedCharts.md +63 -53
  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 -687
  38. package/dist/docs/components/dayPicker.md +5574 -0
  39. package/dist/docs/components/dayPickerCalendar.md +5269 -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 +3252 -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 -172
  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 +23 -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 +1 -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 -3
  69. package/dist/docs/components/mapPolygon.md +288 -85
  70. package/dist/docs/components/mapRoute.md +262 -172
  71. package/dist/docs/components/mapRouteGenerator.md +1 -1
  72. package/dist/docs/components/mapSettings.md +23 -1
  73. package/dist/docs/components/mapUtils.md +1 -1
  74. package/dist/docs/components/multiselects.md +211 -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 -213
  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 -400
  85. package/dist/docs/components/radioCardGroup.md +1 -1
  86. package/dist/docs/components/radiobutton.md +96 -98
  87. package/dist/docs/components/releaseNotes.md +1 -1
  88. package/dist/docs/components/resizer.md +1 -3
  89. package/dist/docs/components/responsiveColumnStripe.md +1 -3
  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 +165 -111
  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 -15
  98. package/dist/docs/components/spinners.md +1 -1
  99. package/dist/docs/components/states.md +1 -1
  100. package/dist/docs/components/statsWidgets.md +1 -1
  101. package/dist/docs/components/statusBar.md +1 -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 +3 -1
  108. package/dist/docs/components/table.md +19584 -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 -3
  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 +1 -1
  116. package/dist/docs/components/toggleButton.md +3 -1
  117. package/dist/docs/components/tooltip.md +4 -2
  118. package/dist/docs/components/tracker.md +1 -1
  119. package/dist/docs/components/virtualList.md +56 -56
  120. package/dist/docs/foundations.md +640 -3122
  121. package/dist/docs/start/changelog.md +53 -3
  122. package/dist/docs/start/goodtoknow.md +2 -4
  123. package/dist/docs/start/guidelines/color-combinations.md +1 -1
  124. package/dist/docs/start/guidelines/custom-css.md +1 -1
  125. package/dist/docs/start/guidelines/custom-rioglyph.md +1 -1
  126. package/dist/docs/start/guidelines/formatting.md +1 -3
  127. package/dist/docs/start/guidelines/iframe.md +17 -19
  128. package/dist/docs/start/guidelines/obfuscate-data.md +2 -4
  129. package/dist/docs/start/guidelines/print-css.md +1 -1
  130. package/dist/docs/start/guidelines/spinner.md +1 -1
  131. package/dist/docs/start/guidelines/state-in-url.md +1 -1
  132. package/dist/docs/start/guidelines/supported-browsers.md +1 -1
  133. package/dist/docs/start/guidelines/writing.md +1 -1
  134. package/dist/docs/start/howto.md +12 -20
  135. package/dist/docs/start/intro.md +1 -1
  136. package/dist/docs/start/responsiveness.md +1 -3
  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 +1 -1
  155. package/dist/docs/utilities/deviceUtils.md +2 -2
  156. package/dist/docs/utilities/featureToggles.md +1 -1
  157. package/dist/docs/utilities/fuelTypeUtils.md +27 -29
  158. package/dist/docs/utilities/getTrackingAttributes.md +277 -0
  159. package/dist/docs/utilities/routeUtils.md +2 -2
  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 +2 -4
  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 +2 -8
  207. package/dist/search-synonyms.json +2 -2
  208. package/dist/version.json +2 -2
  209. package/package.json +15 -9
  210. package/dist/docs/components/tables.md +0 -8
package/dist/docs/components/assetTree.md CHANGED
@@ -3,7 +3,7 @@
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-20T12:54:02.398Z
7
7
 
8
8
  ## AssetTree
9
9
 
@@ -11,38 +11,38 @@
11
11
 
12
12
  Filter
13
13
 
14
- 5616
14
+ 5192
15
15
  4
16
16
 
17
- Group - Abbie Frami - 5984 25
17
+ Group - Abdiel Stracke - 7208 11
18
18
 
19
- Group - Abigayle Schiller - 8156 8
19
+ Group - Abel Nolan DDS - 7395 10
20
20
 
21
- Group - Adam Bednar - 2630 8
21
+ Group - Abel Welch - 8471 14
22
22
 
23
- Group - Adriel Bartell - 1478 10
23
+ Group - Adan Dickinson-Romaguera - 1669 8
24
24
 
25
- Group - Adrien Koss - 6578 15
25
+ Group - Adell Lang - 1397 9
26
26
 
27
- Group - Ahmad Hessel - 9343 10
27
+ Group - Agnes Runte - 2275 8
28
28
 
29
- Group - Ahmed Friesen - 6567 10
29
+ Group - Alanna Veum - 4822 7
30
30
 
31
- Group - Albina Hammes-Wehner - 2559 16
31
+ Group - Albert Lehner - 6018 8
32
32
 
33
- Group - Alex Barton - 8849 14
33
+ Group - Alberto Mitchell I - 5020 8
34
34
 
35
- Group - Alex Kilback - 5160 14
35
+ Group - Alda Spencer - 6590 11
36
36
 
37
- Group - Alex Nader - 8551 13
37
+ Group - Alejandro Little III - 9613 11
38
38
 
39
- Group - Alexander Dickens - 7423 21
39
+ Group - Alison Greenfelder Jr. - 4942 17
40
40
 
41
- Group - Alyson Altenwerth - 1730 12
41
+ Group - Allie Keeling - 1242 13
42
42
 
43
- Group - Alyssa Hilll - 7463 18
43
+ Group - Alonzo Dooley - 9191 6
44
44
 
45
- Group - Alyssa Russel PhD - 6088 11
45
+ Group - Alonzo O'Kon - 9115 8
46
46
 
47
47
  200
48
48
 
@@ -227,8 +227,8 @@ const AssetTreeExample = () => {
227
227
  const handleToggleEmptyGroups = () => setShowEmptyGroups(!showEmptyGroups);
228
228
  const handleToggleAssetGroups = () => setShowAssetGroups(!showAssetGroups);
229
229
 
230
- const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {
231
- return selectedItemIds.map(selectedItemId => {
230
+ const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) =>
231
+ selectedItemIds.map(selectedItemId => {
232
232
  const result = list.find(listItem => listItem.id === selectedItemId);
233
233
  if (result) {
234
234
  const name = isObject(result.name)
@@ -238,7 +238,6 @@ const AssetTreeExample = () => {
238
238
  }
239
239
  return null;
240
240
  });
241
- };
242
241
 
243
242
  // Custom filter function for driver as for this we showcase the usage of a custom search component
244
243
  const filteredDrivers = randomDrivers.filter(driver =>
@@ -557,27 +556,27 @@ export default AssetTreeExample;
557
556
 
558
557
  ### Example: Example 2
559
558
 
560
- 8
561
- 5
562
- 8
559
+ 12
563
560
  9
561
+ 2
562
+ 7
564
563
 
565
- My Empty Group 4
564
+ My Empty Group 3
566
565
 
567
- Truck Group East 4
566
+ Truck Group East 5
568
567
 
569
568
  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
569
+ N18-G616 / M-AN 1025
570
+ N18-G906 / M-AN 1001
571
+ N18-G959 / M-AN 1004
572
+ N18-G970 / M-AN 1002
573
+ N18-G975 / M-AN 1027
575
574
 
576
- Truck Group South 6
575
+ Truck Group South 8
577
576
 
578
- Truck Group West 7
577
+ Truck Group West 2
579
578
 
580
- All my unassigned Trucks 4
579
+ All my unassigned Trucks 7
581
580
 
582
581
  Current category:
583
582
  assets
@@ -660,8 +659,8 @@ const AssetTreeSingleSelectExample = () => {
660
659
  const handleChangeCategories = (newCategoryId: string) => setCurrentCategoryId(newCategoryId);
661
660
  const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);
662
661
 
663
- const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {
664
- return selectedItemIds.map(selectedItemId => {
662
+ const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) =>
663
+ selectedItemIds.map(selectedItemId => {
665
664
  const result = list.find(listItem => listItem.id === selectedItemId);
666
665
  if (result) {
667
666
  const name = isObject(result.name)
@@ -671,7 +670,6 @@ const AssetTreeSingleSelectExample = () => {
671
670
  }
672
671
  return null;
673
672
  });
674
- };
675
673
 
676
674
  return (
677
675
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -774,24 +772,24 @@ export default AssetTreeSingleSelectExample;
774
772
  <div class="display-flex justify-content-between align-items-start width-100pct">
775
773
  <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
776
774
  <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">
775
+ <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
778
776
  </span>
779
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
777
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">12</span>
780
778
  </div>
781
779
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
782
780
  <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
783
781
  </span>
784
- <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
782
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
785
783
  </div>
786
784
  <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">
785
+ <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
788
786
  </span>
789
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
787
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
790
788
  </div>
791
789
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
792
790
  <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
793
791
  </span>
794
- <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
792
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
795
793
  </div>
796
794
  </div>
797
795
  </div>
@@ -804,7 +802,7 @@ export default AssetTreeSingleSelectExample;
804
802
  <span class="TreeLabelNameText">
805
803
  <span class="TreeLabelNameTextHeadline">My Empty Group</span>
806
804
  </span>
807
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
805
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
808
806
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
809
807
  </span>
810
808
  </span>
@@ -816,7 +814,7 @@ export default AssetTreeSingleSelectExample;
816
814
  <span class="TreeLabelNameText">
817
815
  <span class="TreeLabelNameTextHeadline">Truck Group East</span>
818
816
  </span>
819
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
817
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
820
818
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
821
819
  </span>
822
820
  </span>
@@ -833,48 +831,48 @@ export default AssetTreeSingleSelectExample;
833
831
  </span>
834
832
  </span>
835
833
  </div>
836
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
834
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9725">
837
835
  <span class="TreeLabel TreeLabelName">
838
- <span class="rioglyph rioglyph-truck">
836
+ <span class="rioglyph rioglyph-van">
839
837
  </span>
840
838
  <span class="TreeLabelNameText">
841
- <span class="TreeLabelNameTextHeadline">N18-G203 / M-AN 1009</span>
839
+ <span class="TreeLabelNameTextHeadline">N18-G616 / M-AN 1025</span>
842
840
  </span>
843
841
  </span>
844
842
  </div>
845
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
843
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
846
844
  <span class="TreeLabel TreeLabelName">
847
- <span class="rioglyph rioglyph-bus">
845
+ <span class="rioglyph rioglyph-trailer">
848
846
  </span>
849
847
  <span class="TreeLabelNameText">
850
- <span class="TreeLabelNameTextHeadline">N18-G458 / M-AN 1015</span>
848
+ <span class="TreeLabelNameTextHeadline">N18-G906 / M-AN 1001</span>
851
849
  </span>
852
850
  </span>
853
851
  </div>
854
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9724">
852
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
855
853
  <span class="TreeLabel TreeLabelName">
856
- <span class="rioglyph rioglyph-truck">
854
+ <span class="rioglyph rioglyph-trailer">
857
855
  </span>
858
856
  <span class="TreeLabelNameText">
859
- <span class="TreeLabelNameTextHeadline">N18-G504 / M-AN 1024</span>
857
+ <span class="TreeLabelNameTextHeadline">N18-G959 / M-AN 1004</span>
860
858
  </span>
861
859
  </span>
862
860
  </div>
863
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9728">
861
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
864
862
  <span class="TreeLabel TreeLabelName">
865
- <span class="rioglyph rioglyph-van">
863
+ <span class="rioglyph rioglyph-bus">
866
864
  </span>
867
865
  <span class="TreeLabelNameText">
868
- <span class="TreeLabelNameTextHeadline">N18-G754 / M-AN 1028</span>
866
+ <span class="TreeLabelNameTextHeadline">N18-G970 / M-AN 1002</span>
869
867
  </span>
870
868
  </span>
871
869
  </div>
872
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
870
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9727">
873
871
  <span class="TreeLabel TreeLabelName">
874
- <span class="rioglyph rioglyph-truck">
872
+ <span class="rioglyph rioglyph-trailer">
875
873
  </span>
876
874
  <span class="TreeLabelNameText">
877
- <span class="TreeLabelNameTextHeadline">N18-G932 / M-AN 1006</span>
875
+ <span class="TreeLabelNameTextHeadline">N18-G975 / M-AN 1027</span>
878
876
  </span>
879
877
  </span>
880
878
  </div>
@@ -885,7 +883,7 @@ export default AssetTreeSingleSelectExample;
885
883
  <span class="TreeLabelNameText">
886
884
  <span class="TreeLabelNameTextHeadline">Truck Group South</span>
887
885
  </span>
888
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
886
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
889
887
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
890
888
  </span>
891
889
  </span>
@@ -897,7 +895,7 @@ export default AssetTreeSingleSelectExample;
897
895
  <span class="TreeLabelNameText">
898
896
  <span class="TreeLabelNameTextHeadline">Truck Group West</span>
899
897
  </span>
900
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
898
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
901
899
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
902
900
  </span>
903
901
  </span>
@@ -909,7 +907,7 @@ export default AssetTreeSingleSelectExample;
909
907
  <span class="TreeLabelNameText">
910
908
  <span class="TreeLabelNameTextHeadline">All my unassigned Trucks</span>
911
909
  </span>
912
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
910
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
913
911
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
914
912
  </span>
915
913
  </span>
@@ -1096,29 +1094,30 @@ export default AssetTreeSingleSelectExample;
1096
1094
 
1097
1095
  ### Example: Example 3
1098
1096
 
1099
- 1
1100
- 5
1101
- 6
1102
- 8
1103
-
1104
- 4
1105
- 9
1106
- 2
1107
- 2
1097
+ 7
1108
1098
  3
1099
+ 4
1100
+ 6
1109
1101
 
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
1102
+ 13
1103
+ 5
1104
+ 1
1105
+ 1
1120
1106
 
1121
- Ungrouped 11
1107
+ Mixed Vehicles 11
1108
+ Vehicle-1849 Debug: lpg
1109
+ Vehicle-2383 Debug: heavy_fuel_oil
1110
+ Vehicle-3352 Debug: gas
1111
+ Vehicle-4157 Debug: diesel
1112
+ Vehicle-5855 Debug: gas
1113
+ Vehicle-6456 Debug: lpg
1114
+ Vehicle-7193 Debug: heavy_fuel_oil
1115
+ Vehicle-7464 Debug: diesel
1116
+ Vehicle-8699 Debug: gas
1117
+ Vehicle-8981 Debug: dual_fuel_diesel_cng
1118
+ Vehicle-9946 Debug: heavy_fuel_oil
1119
+
1120
+ Ungrouped 9
1122
1121
 
1123
1122
  Selected groups:
1124
1123
 
@@ -1278,15 +1277,14 @@ const AssetTreeExample = () => {
1278
1277
  setActiveFuelTypeGroupFilter(toggleListItem(activeFuelTypeGroupFilter, fuelTypeGroupFilter));
1279
1278
  };
1280
1279
 
1281
- const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) => {
1282
- return selectedItemIds.map(selectedItemId => {
1280
+ const renderSelectedItemsOfList = (selectedItemIds: string[], list: TreeGroup[] | TreeItem[]) =>
1281
+ selectedItemIds.map(selectedItemId => {
1283
1282
  const result = list.find(listItem => listItem.id === selectedItemId);
1284
1283
  if (result) {
1285
1284
  return <li key={selectedItemId}>{`${result.name}`}</li>;
1286
1285
  }
1287
1286
  return null;
1288
1287
  });
1289
- };
1290
1288
 
1291
1289
  return (
1292
1290
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -1453,56 +1451,51 @@ export default AssetTreeExample;
1453
1451
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1454
1452
  <span class="rioglyph rioglyph-truck-baseline text-size-16 margin-right-2">
1455
1453
  </span>
1456
- <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1454
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1457
1455
  </div>
1458
1456
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1459
1457
  <span class="rioglyph rioglyph-bus-baseline text-size-16 margin-right-2">
1460
1458
  </span>
1461
- <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1459
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1462
1460
  </div>
1463
1461
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1464
1462
  <span class="rioglyph rioglyph-van-baseline text-size-16 margin-right-2">
1465
1463
  </span>
1466
- <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
1464
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
1467
1465
  </div>
1468
1466
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1469
1467
  <span class="rioglyph rioglyph-car-baseline text-size-16 margin-right-2">
1470
1468
  </span>
1471
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
1469
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
1472
1470
  </div>
1473
1471
  </div>
1474
1472
  <div class="TreeSummaryRow display-grid grid-cols-4 gap-10">
1475
1473
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1476
1474
  <span class="rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2">
1477
1475
  </span>
1478
- <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
1476
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">13</span>
1479
1477
  </div>
1480
1478
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1481
1479
  <span class="rioglyph rioglyph-fuel-gas text-size-16 margin-right-2">
1482
1480
  </span>
1483
- <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
1484
- </div>
1485
- <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1486
- <span class="rioglyph rioglyph-fuel-electric text-size-16 margin-right-2">
1487
- </span>
1488
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1481
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1489
1482
  </div>
1490
1483
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1491
1484
  <span class="rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2">
1492
1485
  </span>
1493
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1486
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1494
1487
  </div>
1495
1488
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1496
1489
  <span class="rioglyph rioglyph-fuel-mix text-size-16 margin-right-2">
1497
1490
  </span>
1498
- <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1491
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1499
1492
  </div>
1500
1493
  </div>
1501
1494
  </div>
1502
1495
  </div>
1503
1496
  <div>
1504
1497
  <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">
1498
+ <button type="button" id="k0xshifd6sg" 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
1499
  <span class="rioglyph rioglyph-option-vertical" aria-hidden="true">
1507
1500
  </span>
1508
1501
  </button>
@@ -1522,12 +1515,12 @@ export default AssetTreeExample;
1522
1515
  <span class="TreeLabelNameText">
1523
1516
  <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
1524
1517
  </span>
1525
- <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
1518
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
1526
1519
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1527
1520
  </span>
1528
1521
  </span>
1529
1522
  </div>
1530
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
1523
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
1531
1524
  <label class="checkbox TreeCheckbox" tabindex="0">
1532
1525
  <input type="checkbox" class="TreeCheckbox">
1533
1526
  <span class="checkbox-text">
@@ -1535,20 +1528,41 @@ export default AssetTreeExample;
1535
1528
  </label>
1536
1529
  <span class="TreeLabel TreeLabelName">
1537
1530
  <span class="rioglyph-icon-pair">
1538
- <span class="rioglyph rioglyph-bus">
1531
+ <span class="rioglyph rioglyph-van">
1539
1532
  </span>
1540
- <span class="rioglyph rioglyph-fuel-mix">
1533
+ <span class="rioglyph rioglyph-fuel-gas">
1541
1534
  </span>
1542
1535
  </span>
1543
1536
  <span class="TreeLabelNameText">
1544
- <span class="TreeLabelNameTextHeadline">Vehicle-1126</span>
1537
+ <span class="TreeLabelNameTextHeadline">Vehicle-1849</span>
1545
1538
  <span class="TreeLabelNameTextSubline">
1546
- <span>Debug: dual_fuel_diesel_cng</span>
1539
+ <span>Debug: lpg</span>
1547
1540
  </span>
1548
1541
  </span>
1549
1542
  </span>
1550
1543
  </div>
1551
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
1544
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1545
+ <label class="checkbox TreeCheckbox" tabindex="0">
1546
+ <input type="checkbox" class="TreeCheckbox">
1547
+ <span class="checkbox-text">
1548
+ </span>
1549
+ </label>
1550
+ <span class="TreeLabel TreeLabelName">
1551
+ <span class="rioglyph-icon-pair">
1552
+ <span class="rioglyph rioglyph-truck">
1553
+ </span>
1554
+ <span class="rioglyph rioglyph-fuel-liquid">
1555
+ </span>
1556
+ </span>
1557
+ <span class="TreeLabelNameText">
1558
+ <span class="TreeLabelNameTextHeadline">Vehicle-2383</span>
1559
+ <span class="TreeLabelNameTextSubline">
1560
+ <span>Debug: heavy_fuel_oil</span>
1561
+ </span>
1562
+ </span>
1563
+ </span>
1564
+ </div>
1565
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
1552
1566
  <label class="checkbox TreeCheckbox" tabindex="0">
1553
1567
  <input type="checkbox" class="TreeCheckbox">
1554
1568
  <span class="checkbox-text">
@@ -1558,18 +1572,18 @@ export default AssetTreeExample;
1558
1572
  <span class="rioglyph-icon-pair">
1559
1573
  <span class="rioglyph rioglyph-bus">
1560
1574
  </span>
1561
- <span class="rioglyph rioglyph-fuel-gas">
1575
+ <span class="rioglyph rioglyph-fuel-liquid">
1562
1576
  </span>
1563
1577
  </span>
1564
1578
  <span class="TreeLabelNameText">
1565
- <span class="TreeLabelNameTextHeadline">Vehicle-1711</span>
1579
+ <span class="TreeLabelNameTextHeadline">Vehicle-3352</span>
1566
1580
  <span class="TreeLabelNameTextSubline">
1567
- <span>Debug: cng</span>
1581
+ <span>Debug: gas</span>
1568
1582
  </span>
1569
1583
  </span>
1570
1584
  </span>
1571
1585
  </div>
1572
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
1586
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
1573
1587
  <label class="checkbox TreeCheckbox" tabindex="0">
1574
1588
  <input type="checkbox" class="TreeCheckbox">
1575
1589
  <span class="checkbox-text">
@@ -1577,20 +1591,20 @@ export default AssetTreeExample;
1577
1591
  </label>
1578
1592
  <span class="TreeLabel TreeLabelName">
1579
1593
  <span class="rioglyph-icon-pair">
1580
- <span class="rioglyph rioglyph-van">
1594
+ <span class="rioglyph rioglyph-car">
1581
1595
  </span>
1582
- <span class="rioglyph rioglyph-fuel-gas">
1596
+ <span class="rioglyph rioglyph-fuel-liquid">
1583
1597
  </span>
1584
1598
  </span>
1585
1599
  <span class="TreeLabelNameText">
1586
- <span class="TreeLabelNameTextHeadline">Vehicle-3593</span>
1600
+ <span class="TreeLabelNameTextHeadline">Vehicle-4157</span>
1587
1601
  <span class="TreeLabelNameTextSubline">
1588
- <span>Debug: cng</span>
1602
+ <span>Debug: diesel</span>
1589
1603
  </span>
1590
1604
  </span>
1591
1605
  </span>
1592
1606
  </div>
1593
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
1607
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
1594
1608
  <label class="checkbox TreeCheckbox" tabindex="0">
1595
1609
  <input type="checkbox" class="TreeCheckbox">
1596
1610
  <span class="checkbox-text">
@@ -1600,18 +1614,18 @@ export default AssetTreeExample;
1600
1614
  <span class="rioglyph-icon-pair">
1601
1615
  <span class="rioglyph rioglyph-car">
1602
1616
  </span>
1603
- <span class="rioglyph rioglyph-fuel-gas">
1617
+ <span class="rioglyph rioglyph-fuel-liquid">
1604
1618
  </span>
1605
1619
  </span>
1606
1620
  <span class="TreeLabelNameText">
1607
- <span class="TreeLabelNameTextHeadline">Vehicle-4809</span>
1621
+ <span class="TreeLabelNameTextHeadline">Vehicle-5855</span>
1608
1622
  <span class="TreeLabelNameTextSubline">
1609
- <span>Debug: lpg</span>
1623
+ <span>Debug: gas</span>
1610
1624
  </span>
1611
1625
  </span>
1612
1626
  </span>
1613
1627
  </div>
1614
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
1628
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
1615
1629
  <label class="checkbox TreeCheckbox" tabindex="0">
1616
1630
  <input type="checkbox" class="TreeCheckbox">
1617
1631
  <span class="checkbox-text">
@@ -1621,13 +1635,13 @@ export default AssetTreeExample;
1621
1635
  <span class="rioglyph-icon-pair">
1622
1636
  <span class="rioglyph rioglyph-van">
1623
1637
  </span>
1624
- <span class="rioglyph rioglyph-fuel-mix">
1638
+ <span class="rioglyph rioglyph-fuel-gas">
1625
1639
  </span>
1626
1640
  </span>
1627
1641
  <span class="TreeLabelNameText">
1628
- <span class="TreeLabelNameTextHeadline">Vehicle-7089</span>
1642
+ <span class="TreeLabelNameTextHeadline">Vehicle-6456</span>
1629
1643
  <span class="TreeLabelNameTextSubline">
1630
- <span>Debug: dual_fuel_diesel_cng</span>
1644
+ <span>Debug: lpg</span>
1631
1645
  </span>
1632
1646
  </span>
1633
1647
  </span>
@@ -1640,20 +1654,20 @@ export default AssetTreeExample;
1640
1654
  </label>
1641
1655
  <span class="TreeLabel TreeLabelName">
1642
1656
  <span class="rioglyph-icon-pair">
1643
- <span class="rioglyph rioglyph-car">
1657
+ <span class="rioglyph rioglyph-truck">
1644
1658
  </span>
1645
1659
  <span class="rioglyph rioglyph-fuel-liquid">
1646
1660
  </span>
1647
1661
  </span>
1648
1662
  <span class="TreeLabelNameText">
1649
- <span class="TreeLabelNameTextHeadline">Vehicle-7536</span>
1663
+ <span class="TreeLabelNameTextHeadline">Vehicle-7193</span>
1650
1664
  <span class="TreeLabelNameTextSubline">
1651
- <span>Debug: diesel</span>
1665
+ <span>Debug: heavy_fuel_oil</span>
1652
1666
  </span>
1653
1667
  </span>
1654
1668
  </span>
1655
1669
  </div>
1656
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
1670
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
1657
1671
  <label class="checkbox TreeCheckbox" tabindex="0">
1658
1672
  <input type="checkbox" class="TreeCheckbox">
1659
1673
  <span class="checkbox-text">
@@ -1663,18 +1677,39 @@ export default AssetTreeExample;
1663
1677
  <span class="rioglyph-icon-pair">
1664
1678
  <span class="rioglyph rioglyph-van">
1665
1679
  </span>
1666
- <span class="rioglyph rioglyph-fuel-mix">
1680
+ <span class="rioglyph rioglyph-fuel-liquid">
1667
1681
  </span>
1668
1682
  </span>
1669
1683
  <span class="TreeLabelNameText">
1670
- <span class="TreeLabelNameTextHeadline">Vehicle-8575</span>
1684
+ <span class="TreeLabelNameTextHeadline">Vehicle-7464</span>
1671
1685
  <span class="TreeLabelNameTextSubline">
1672
- <span>Debug: dual_fuel_diesel_cng</span>
1686
+ <span>Debug: diesel</span>
1673
1687
  </span>
1674
1688
  </span>
1675
1689
  </span>
1676
1690
  </div>
1677
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1691
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
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-car">
1700
+ </span>
1701
+ <span class="rioglyph rioglyph-fuel-liquid">
1702
+ </span>
1703
+ </span>
1704
+ <span class="TreeLabelNameText">
1705
+ <span class="TreeLabelNameTextHeadline">Vehicle-8699</span>
1706
+ <span class="TreeLabelNameTextSubline">
1707
+ <span>Debug: gas</span>
1708
+ </span>
1709
+ </span>
1710
+ </span>
1711
+ </div>
1712
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9713">
1678
1713
  <label class="checkbox TreeCheckbox" tabindex="0">
1679
1714
  <input type="checkbox" class="TreeCheckbox">
1680
1715
  <span class="checkbox-text">
@@ -1684,18 +1719,18 @@ export default AssetTreeExample;
1684
1719
  <span class="rioglyph-icon-pair">
1685
1720
  <span class="rioglyph rioglyph-van">
1686
1721
  </span>
1687
- <span class="rioglyph rioglyph-fuel-gas">
1722
+ <span class="rioglyph rioglyph-fuel-mix">
1688
1723
  </span>
1689
1724
  </span>
1690
1725
  <span class="TreeLabelNameText">
1691
- <span class="TreeLabelNameTextHeadline">Vehicle-8949</span>
1726
+ <span class="TreeLabelNameTextHeadline">Vehicle-8981</span>
1692
1727
  <span class="TreeLabelNameTextSubline">
1693
- <span>Debug: lpg</span>
1728
+ <span>Debug: dual_fuel_diesel_cng</span>
1694
1729
  </span>
1695
1730
  </span>
1696
1731
  </span>
1697
1732
  </div>
1698
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
1733
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
1699
1734
  <label class="checkbox TreeCheckbox" tabindex="0">
1700
1735
  <input type="checkbox" class="TreeCheckbox">
1701
1736
  <span class="checkbox-text">
@@ -1703,15 +1738,15 @@ export default AssetTreeExample;
1703
1738
  </label>
1704
1739
  <span class="TreeLabel TreeLabelName">
1705
1740
  <span class="rioglyph-icon-pair">
1706
- <span class="rioglyph rioglyph-bus">
1741
+ <span class="rioglyph rioglyph-car">
1707
1742
  </span>
1708
- <span class="rioglyph rioglyph-fuel-gas">
1743
+ <span class="rioglyph rioglyph-fuel-liquid">
1709
1744
  </span>
1710
1745
  </span>
1711
1746
  <span class="TreeLabelNameText">
1712
- <span class="TreeLabelNameTextHeadline">Vehicle-9667</span>
1747
+ <span class="TreeLabelNameTextHeadline">Vehicle-9946</span>
1713
1748
  <span class="TreeLabelNameTextSubline">
1714
- <span>Debug: lpg</span>
1749
+ <span>Debug: heavy_fuel_oil</span>
1715
1750
  </span>
1716
1751
  </span>
1717
1752
  </span>
@@ -1728,7 +1763,7 @@ export default AssetTreeExample;
1728
1763
  <span class="TreeLabelNameText">
1729
1764
  <span class="TreeLabelNameTextHeadline">Ungrouped</span>
1730
1765
  </span>
1731
- <span class="TreeLabelCount label label-muted label-filled label-condensed">11</span>
1766
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
1732
1767
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1733
1768
  </span>
1734
1769
  </span>
@@ -2309,11 +2344,11 @@ export default AssetTreeWithCustomSummaryExample;
2309
2344
 
2310
2345
  ### Example: Example 5
2311
2346
 
2312
- Group 01 7
2347
+ Group 01 3
2313
2348
 
2314
- Group 02 5
2349
+ Group 02 10
2315
2350
 
2316
- Group 03 8
2351
+ Group 03 7
2317
2352
 
2318
2353
  #### React (tsx)
2319
2354
 
@@ -2414,7 +2449,7 @@ export default () => {
2414
2449
  <span class="TreeLabelNameText">
2415
2450
  <span class="TreeLabelNameTextHeadline">Group 01</span>
2416
2451
  </span>
2417
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2452
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2418
2453
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2419
2454
  </span>
2420
2455
  </span>
@@ -2429,7 +2464,7 @@ export default () => {
2429
2464
  <span class="TreeLabelNameText">
2430
2465
  <span class="TreeLabelNameTextHeadline">Group 02</span>
2431
2466
  </span>
2432
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
2467
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
2433
2468
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2434
2469
  </span>
2435
2470
  </span>
@@ -2444,7 +2479,7 @@ export default () => {
2444
2479
  <span class="TreeLabelNameText">
2445
2480
  <span class="TreeLabelNameTextHeadline">Group 03</span>
2446
2481
  </span>
2447
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
2482
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2448
2483
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2449
2484
  </span>
2450
2485
  </span>
@@ -2606,13 +2641,13 @@ Tree with header and search
2606
2641
 
2607
2642
  20
2608
2643
 
2609
- Folder 01 4
2644
+ Folder 01 3
2610
2645
 
2611
- Folder 02 8
2646
+ Folder 02 5
2612
2647
 
2613
- Folder 03 2
2648
+ Folder 03 4
2614
2649
 
2615
- Folder 04 6
2650
+ Folder 04 8
2616
2651
 
2617
2652
  Selected items:
2618
2653
 
@@ -2670,15 +2705,14 @@ const TreeOnlyExample = () => {
2670
2705
 
2671
2706
  const handleExpandFolder = (newExpandedFolders: string[]) => setExpandedFolders(newExpandedFolders);
2672
2707
 
2673
- const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) => {
2674
- return itemIds.map(selectedItemId => {
2708
+ const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) =>
2709
+ itemIds.map(selectedItemId => {
2675
2710
  const result = list.find(listItem => listItem.id === selectedItemId);
2676
2711
  if (result) {
2677
2712
  return <li key={selectedItemId}>{`${result.name}`}</li>;
2678
2713
  }
2679
2714
  return null;
2680
2715
  });
2681
- };
2682
2716
 
2683
2717
  return (
2684
2718
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -2757,7 +2791,7 @@ export default TreeOnlyExample;
2757
2791
  <span class="TreeLabelNameText">
2758
2792
  <span class="TreeLabelNameTextHeadline">Folder 01</span>
2759
2793
  </span>
2760
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
2794
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2761
2795
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2762
2796
  </span>
2763
2797
  </span>
@@ -2771,7 +2805,7 @@ export default TreeOnlyExample;
2771
2805
  <span class="TreeLabelNameText">
2772
2806
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
2773
2807
  </span>
2774
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
2808
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
2775
2809
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2776
2810
  </span>
2777
2811
  </span>
@@ -2785,7 +2819,7 @@ export default TreeOnlyExample;
2785
2819
  <span class="TreeLabelNameText">
2786
2820
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
2787
2821
  </span>
2788
- <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
2822
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
2789
2823
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2790
2824
  </span>
2791
2825
  </span>
@@ -2799,7 +2833,7 @@ export default TreeOnlyExample;
2799
2833
  <span class="TreeLabelNameText">
2800
2834
  <span class="TreeLabelNameTextHeadline">Folder 04</span>
2801
2835
  </span>
2802
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
2836
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
2803
2837
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2804
2838
  </span>
2805
2839
  </span>
@@ -2873,13 +2907,13 @@ export default TreeOnlyExample;
2873
2907
 
2874
2908
  Tree without header and search
2875
2909
 
2876
- Folder 01 6
2910
+ Folder 01 4
2877
2911
 
2878
- Folder 02 5
2912
+ Folder 02 4
2879
2913
 
2880
- Folder 03 5
2914
+ Folder 03 6
2881
2915
 
2882
- Folder 04 4
2916
+ Folder 04 6
2883
2917
 
2884
2918
  Selected items:
2885
2919
 
@@ -2940,15 +2974,14 @@ const TreeOnlyExample = () => {
2940
2974
 
2941
2975
  const handleExpandFolder = (newExpandedFolders: string[]) => setExpandedFolders(newExpandedFolders);
2942
2976
 
2943
- const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) => {
2944
- return itemIds.map(selectedItemId => {
2977
+ const renderSelectedItemsOfList = (itemIds: string[], list: TreeGroup[] | TreeItem[]) =>
2978
+ itemIds.map(selectedItemId => {
2945
2979
  const result = list.find(listItem => listItem.id === selectedItemId);
2946
2980
  if (result) {
2947
2981
  return <li key={selectedItemId}>{`${result.name}`}</li>;
2948
2982
  }
2949
2983
  return null;
2950
2984
  });
2951
- };
2952
2985
 
2953
2986
  return (
2954
2987
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
@@ -3000,7 +3033,7 @@ export default TreeOnlyExample;
3000
3033
  <span class="TreeLabelNameText">
3001
3034
  <span class="TreeLabelNameTextHeadline">Folder 01</span>
3002
3035
  </span>
3003
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
3036
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3004
3037
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3005
3038
  </span>
3006
3039
  </span>
@@ -3014,7 +3047,7 @@ export default TreeOnlyExample;
3014
3047
  <span class="TreeLabelNameText">
3015
3048
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
3016
3049
  </span>
3017
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
3050
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3018
3051
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3019
3052
  </span>
3020
3053
  </span>
@@ -3028,7 +3061,7 @@ export default TreeOnlyExample;
3028
3061
  <span class="TreeLabelNameText">
3029
3062
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
3030
3063
  </span>
3031
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
3064
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
3032
3065
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3033
3066
  </span>
3034
3067
  </span>
@@ -3042,7 +3075,7 @@ export default TreeOnlyExample;
3042
3075
  <span class="TreeLabelNameText">
3043
3076
  <span class="TreeLabelNameTextHeadline">Folder 04</span>
3044
3077
  </span>
3045
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3078
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
3046
3079
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3047
3080
  </span>
3048
3081
  </span>