@rio-cloud/uikit-mcp 1.1.5 → 1.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/dist/doc-metadata.json +129 -29
  2. package/dist/docs/components/accentBar.md +2 -2
  3. package/dist/docs/components/activity.md +2 -2
  4. package/dist/docs/components/animatedNumber.md +3 -3
  5. package/dist/docs/components/animatedTextReveal.md +7 -7
  6. package/dist/docs/components/animations.md +33 -33
  7. package/dist/docs/components/appHeader.md +8 -8
  8. package/dist/docs/components/appLayout.md +106 -89
  9. package/dist/docs/components/appNavigationBar.md +2 -2
  10. package/dist/docs/components/areaCharts.md +14 -14
  11. package/dist/docs/components/aspectRatioPlaceholder.md +2 -2
  12. package/dist/docs/components/assetTree.md +209 -404
  13. package/dist/docs/components/autosuggests.md +2 -2
  14. package/dist/docs/components/avatar.md +2 -2
  15. package/dist/docs/components/banner.md +3 -3
  16. package/dist/docs/components/barCharts.md +24 -24
  17. package/dist/docs/components/barList.md +11 -11
  18. package/dist/docs/components/basicMap.md +2 -2
  19. package/dist/docs/components/bottomSheet.md +2 -2
  20. package/dist/docs/components/button.md +400 -32
  21. package/dist/docs/components/buttonToolbar.md +2 -2
  22. package/dist/docs/components/calendarStripe.md +96 -36
  23. package/dist/docs/components/card.md +2 -2
  24. package/dist/docs/components/carousel.md +2 -2
  25. package/dist/docs/components/chartColors.md +2 -2
  26. package/dist/docs/components/chartsGettingStarted.md +2 -2
  27. package/dist/docs/components/chat.md +3 -3
  28. package/dist/docs/components/checkbox.md +17 -20
  29. package/dist/docs/components/circularProgress.md +465 -0
  30. package/dist/docs/components/clearableInput.md +2 -2
  31. package/dist/docs/components/collapse.md +3 -3
  32. package/dist/docs/components/composedCharts.md +20 -20
  33. package/dist/docs/components/contentLoader.md +102 -102
  34. package/dist/docs/components/dataTabs.md +10 -10
  35. package/dist/docs/components/datepickers.md +31 -31
  36. package/dist/docs/components/dialogs.md +2 -2
  37. package/dist/docs/components/divider.md +2 -2
  38. package/dist/docs/components/dropdowns.md +4354 -4387
  39. package/dist/docs/components/editableContent.md +2 -2
  40. package/dist/docs/components/expander.md +2 -2
  41. package/dist/docs/components/fade.md +2 -2
  42. package/dist/docs/components/fadeExpander.md +3 -3
  43. package/dist/docs/components/fadeUp.md +3 -3
  44. package/dist/docs/components/feedback.md +2 -2
  45. package/dist/docs/components/filePickers.md +2 -2
  46. package/dist/docs/components/formLabel.md +5 -4
  47. package/dist/docs/components/groupedItemList.md +2 -2
  48. package/dist/docs/components/iconList.md +4 -4
  49. package/dist/docs/components/imagePreloader.md +2 -2
  50. package/dist/docs/components/labeledElement.md +2 -2
  51. package/dist/docs/components/licensePlate.md +2 -2
  52. package/dist/docs/components/lineCharts.md +11 -11
  53. package/dist/docs/components/listMenu.md +7 -7
  54. package/dist/docs/components/loadMore.md +2 -2
  55. package/dist/docs/components/mainNavigation.md +5 -5
  56. package/dist/docs/components/mapCircle.md +2 -2
  57. package/dist/docs/components/mapCluster.md +2 -2
  58. package/dist/docs/components/mapContext.md +2 -2
  59. package/dist/docs/components/mapDraggableMarker.md +2 -2
  60. package/dist/docs/components/mapGettingStarted.md +2 -2
  61. package/dist/docs/components/mapInfoBubble.md +2 -2
  62. package/dist/docs/components/mapLayerGroup.md +2 -2
  63. package/dist/docs/components/mapMarker.md +2 -2
  64. package/dist/docs/components/mapPolygon.md +2 -2
  65. package/dist/docs/components/mapRoute.md +2 -2
  66. package/dist/docs/components/mapRouteGenerator.md +2 -2
  67. package/dist/docs/components/mapSettings.md +9 -9
  68. package/dist/docs/components/mapUtils.md +2 -2
  69. package/dist/docs/components/multiselects.md +2 -2
  70. package/dist/docs/components/noData.md +2 -2
  71. package/dist/docs/components/notifications.md +2 -2
  72. package/dist/docs/components/numbercontrol.md +5 -4
  73. package/dist/docs/components/onboarding.md +2 -2
  74. package/dist/docs/components/page.md +2 -2
  75. package/dist/docs/components/pager.md +2 -2
  76. package/dist/docs/components/pieCharts.md +89 -78
  77. package/dist/docs/components/popover.md +2 -2
  78. package/dist/docs/components/position.md +2 -2
  79. package/dist/docs/components/radialBarCharts.md +2054 -2012
  80. package/dist/docs/components/radioCardGroup.md +487 -0
  81. package/dist/docs/components/radiobutton.md +2 -2
  82. package/dist/docs/components/releaseNotes.md +2 -2
  83. package/dist/docs/components/resizer.md +2 -2
  84. package/dist/docs/components/responsiveColumnStripe.md +2 -2
  85. package/dist/docs/components/responsiveVideo.md +2 -2
  86. package/dist/docs/components/rioglyph.md +2 -2
  87. package/dist/docs/components/rules.md +2 -2
  88. package/dist/docs/components/saveableInput.md +20 -20
  89. package/dist/docs/components/selects.md +2 -2
  90. package/dist/docs/components/sidebar.md +2 -2
  91. package/dist/docs/components/sliders.md +2 -2
  92. package/dist/docs/components/smoothScrollbars.md +2 -2
  93. package/dist/docs/components/spinners.md +2 -2
  94. package/dist/docs/components/states.md +2 -2
  95. package/dist/docs/components/statsWidgets.md +2 -2
  96. package/dist/docs/components/statusBar.md +2 -2
  97. package/dist/docs/components/stepButton.md +2 -2
  98. package/dist/docs/components/steppedProgressBars.md +2 -2
  99. package/dist/docs/components/subNavigation.md +17 -17
  100. package/dist/docs/components/supportMarker.md +2 -2
  101. package/dist/docs/components/svgImage.md +38 -2
  102. package/dist/docs/components/switch.md +210 -83
  103. package/dist/docs/components/tables.md +2 -2
  104. package/dist/docs/components/tagManager.md +2 -2
  105. package/dist/docs/components/tags.md +2 -2
  106. package/dist/docs/components/teaser.md +2 -2
  107. package/dist/docs/components/textTruncateMiddle.md +151 -0
  108. package/dist/docs/components/timeline.md +2 -2
  109. package/dist/docs/components/timepicker.md +660 -64
  110. package/dist/docs/components/toggleButton.md +37 -9
  111. package/dist/docs/components/tooltip.md +5 -4
  112. package/dist/docs/components/tracker.md +631 -0
  113. package/dist/docs/components/virtualList.md +77 -77
  114. package/dist/docs/foundations.md +594 -222
  115. package/dist/docs/start/changelog.md +54 -2
  116. package/dist/docs/start/goodtoknow.md +2 -2
  117. package/dist/docs/start/guidelines/color-combinations.md +2 -2
  118. package/dist/docs/start/guidelines/custom-css.md +2 -2
  119. package/dist/docs/start/guidelines/custom-rioglyph.md +2 -2
  120. package/dist/docs/start/guidelines/formatting.md +2 -2
  121. package/dist/docs/start/guidelines/iframe.md +3 -3
  122. package/dist/docs/start/guidelines/obfuscate-data.md +2 -2
  123. package/dist/docs/start/guidelines/print-css.md +2 -2
  124. package/dist/docs/start/guidelines/spinner.md +82 -82
  125. package/dist/docs/start/guidelines/state-in-url.md +263 -0
  126. package/dist/docs/start/guidelines/supported-browsers.md +2 -2
  127. package/dist/docs/start/guidelines/writing.md +2 -2
  128. package/dist/docs/start/howto.md +10 -10
  129. package/dist/docs/start/intro.md +2 -2
  130. package/dist/docs/start/responsiveness.md +2 -2
  131. package/dist/docs/templates/common-table.md +15 -14
  132. package/dist/docs/templates/detail-views.md +3 -3
  133. package/dist/docs/templates/expandable-details.md +2 -2
  134. package/dist/docs/templates/feature-cards.md +56 -56
  135. package/dist/docs/templates/form-summary.md +23 -23
  136. package/dist/docs/templates/form-toggle.md +2 -2
  137. package/dist/docs/templates/list-blocks.md +204 -204
  138. package/dist/docs/templates/loading-progress.md +2 -2
  139. package/dist/docs/templates/options-panel.md +2 -2
  140. package/dist/docs/templates/panel-variants.md +2 -2
  141. package/dist/docs/templates/progress-cards.md +2 -2
  142. package/dist/docs/templates/progress-success.md +2 -2
  143. package/dist/docs/templates/settings-form.md +24 -24
  144. package/dist/docs/templates/stats-blocks.md +15 -15
  145. package/dist/docs/templates/table-panel.md +2 -2
  146. package/dist/docs/templates/table-row-animation.md +2 -2
  147. package/dist/docs/templates/usage-cards.md +2 -2
  148. package/dist/docs/utilities/classNames.md +191 -0
  149. package/dist/docs/utilities/deviceUtils.md +2 -2
  150. package/dist/docs/utilities/featureToggles.md +2 -2
  151. package/dist/docs/utilities/fuelTypeUtils.md +2 -2
  152. package/dist/docs/utilities/routeUtils.md +326 -90
  153. package/dist/docs/utilities/useAfterMount.md +2 -2
  154. package/dist/docs/utilities/useAutoAnimate.md +2 -2
  155. package/dist/docs/utilities/useAverage.md +2 -2
  156. package/dist/docs/utilities/useClickOutside.md +2 -2
  157. package/dist/docs/utilities/useClipboard.md +3 -3
  158. package/dist/docs/utilities/useCookies.md +188 -0
  159. package/dist/docs/utilities/useCount.md +2 -2
  160. package/dist/docs/utilities/useDarkMode.md +2 -2
  161. package/dist/docs/utilities/useDebugInfo.md +5 -5
  162. package/dist/docs/utilities/useEffectOnce.md +2 -2
  163. package/dist/docs/utilities/useElapsedTime.md +2 -2
  164. package/dist/docs/utilities/useElementSize.md +2 -2
  165. package/dist/docs/utilities/useEsc.md +2 -2
  166. package/dist/docs/utilities/useEvent.md +2 -2
  167. package/dist/docs/utilities/useFocusTrap.md +2 -2
  168. package/dist/docs/utilities/useFullscreen.md +2 -2
  169. package/dist/docs/utilities/useHover.md +2 -2
  170. package/dist/docs/utilities/useIncomingPostMessages.md +2 -2
  171. package/dist/docs/utilities/useInterval.md +2 -2
  172. package/dist/docs/utilities/useIsFocusWithin.md +2 -2
  173. package/dist/docs/utilities/useKey.md +2 -2
  174. package/dist/docs/utilities/useLocalStorage.md +2 -2
  175. package/dist/docs/utilities/useLocationSuggestions.md +2 -2
  176. package/dist/docs/utilities/useMax.md +2 -2
  177. package/dist/docs/utilities/useMin.md +2 -2
  178. package/dist/docs/utilities/useMutationObserver.md +2 -2
  179. package/dist/docs/utilities/useOnScreen.md +2 -2
  180. package/dist/docs/utilities/useOnlineStatus.md +2 -2
  181. package/dist/docs/utilities/usePostMessage.md +3 -3
  182. package/dist/docs/utilities/usePostMessageSender.md +2 -2
  183. package/dist/docs/utilities/usePrevious.md +2 -2
  184. package/dist/docs/utilities/useResizeObserver.md +2 -2
  185. package/dist/docs/utilities/useRioCookieConsent.md +90 -0
  186. package/dist/docs/utilities/useScrollPosition.md +2 -2
  187. package/dist/docs/utilities/useSearch.md +2 -2
  188. package/dist/docs/utilities/useSearchHighlight.md +815 -0
  189. package/dist/docs/utilities/useSorting.md +2 -2
  190. package/dist/docs/utilities/useStateWithValidation.md +2 -2
  191. package/dist/docs/utilities/useSum.md +2 -2
  192. package/dist/docs/utilities/useTableExport.md +52 -52
  193. package/dist/docs/utilities/useTableSelection.md +90 -90
  194. package/dist/docs/utilities/useTimeout.md +2 -2
  195. package/dist/docs/utilities/useToggle.md +3 -3
  196. package/dist/docs/utilities/useUrlState.md +418 -0
  197. package/dist/docs/utilities/useWindowResize.md +2 -2
  198. package/dist/index.mjs +1 -1
  199. package/dist/version.json +2 -2
  200. package/package.json +9 -9
package/dist/docs/components/assetTree.md CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  *Category:* Components
4
4
  *Section:* Selection
5
- *Source:* https://uikit.developers.rio.cloud/#components/assetTree
6
- *Captured:* 2026-02-03T14:04:32.850Z
5
+ *Source:* https://uikit.developers.rio.cloud/#/components/assetTree
6
+ *Captured:* 2026-02-23T15:48:30.393Z
7
7
 
8
8
  ## AssetTree
9
9
 
@@ -11,36 +11,36 @@
11
11
 
12
12
  Filter
13
13
 
14
- 5868
14
+ 5143
15
15
  4
16
16
 
17
- Group - Adrienne Weimann - 60548
17
+ Group - Aaron Waters - 73367
18
18
 
19
- Group - Agnes Homenick - 817311
19
+ Group - Abagail Stoltenberg - 913613
20
20
 
21
- Group - Alejandro Little - 593623
21
+ Group - Abelardo Considine DVM - 62765
22
22
 
23
- Group - Alexander Kautzer - 58489
23
+ Group - Abraham Senger PhD - 132716
24
24
 
25
- Group - Alexandra McGlynn - 40409
25
+ Group - Alberta Veum - 57937
26
26
 
27
- Group - Allen Feeney - 758310
27
+ Group - Alek Gulgowski - 954312
28
28
 
29
- Group - Alma Bradtke - 812611
29
+ Group - Alena Welch - 15629
30
30
 
31
- Group - Alton Becker MD - 390414
31
+ Group - Alessandro Blanda - 38079
32
32
 
33
- Group - Amber Swift IV - 81856
33
+ Group - Alexandra Hyatt I - 382820
34
34
 
35
- Group - Amos Gorczany - 298611
35
+ Group - Alison Jerde - 909211
36
36
 
37
- Group - Amos Hickle - 741010
37
+ Group - Alta Schuppe - 900418
38
38
 
39
- Group - Amos Nader - 357510
39
+ Group - Alvin Wolf - 135517
40
40
 
41
- Group - Ana Sanford - 221715
41
+ Group - Amber Hodkiewicz V - 132312
42
42
 
43
- Group - Ana Sporer - 48377
43
+ Group - Amber O'Reilly - 345011
44
44
 
45
45
  200
46
46
 
@@ -68,36 +68,36 @@ Asset type filter:
68
68
 
69
69
  Filter
70
70
 
71
- 5868
71
+ 5143
72
72
  4
73
73
 
74
- Group - Adrienne Weimann - 60548
74
+ Group - Aaron Waters - 73367
75
75
 
76
- Group - Agnes Homenick - 817311
76
+ Group - Abagail Stoltenberg - 913613
77
77
 
78
- Group - Alejandro Little - 593623
78
+ Group - Abelardo Considine DVM - 62765
79
79
 
80
- Group - Alexander Kautzer - 58489
80
+ Group - Abraham Senger PhD - 132716
81
81
 
82
- Group - Alexandra McGlynn - 40409
82
+ Group - Alberta Veum - 57937
83
83
 
84
- Group - Allen Feeney - 758310
84
+ Group - Alek Gulgowski - 954312
85
85
 
86
- Group - Alma Bradtke - 812611
86
+ Group - Alena Welch - 15629
87
87
 
88
- Group - Alton Becker MD - 390414
88
+ Group - Alessandro Blanda - 38079
89
89
 
90
- Group - Amber Swift IV - 81856
90
+ Group - Alexandra Hyatt I - 382820
91
91
 
92
- Group - Amos Gorczany - 298611
92
+ Group - Alison Jerde - 909211
93
93
 
94
- Group - Amos Hickle - 741010
94
+ Group - Alta Schuppe - 900418
95
95
 
96
- Group - Amos Nader - 357510
96
+ Group - Alvin Wolf - 135517
97
97
 
98
- Group - Ana Sanford - 221715
98
+ Group - Amber Hodkiewicz V - 132312
99
99
 
100
- Group - Ana Sporer - 48377
100
+ Group - Amber O'Reilly - 345011
101
101
 
102
102
  200
103
103
 
@@ -612,31 +612,24 @@ export default AssetTreeExample;
612
612
 
613
613
  ### Example: Example 2
614
614
 
615
- 11
616
- 7
617
- 4
615
+ 5
616
+ 8
618
617
  8
618
+ 9
619
619
 
620
- My Empty Group4
620
+ My Empty Group7
621
621
 
622
- Truck Group East4
622
+ Truck Group East3
623
623
 
624
- Truck Group North9
625
- N18-G203 / M-AN 1002
626
- N18-G260 / M-AN 1028
627
- N18-G314 / M-AN 1006
628
- N18-G370 / M-AN 1022
629
- N18-G455 / M-AN 1024
630
- N18-G502 / M-AN 1014
631
- N18-G600 / M-AN 1001
632
- N18-G752 / M-AN 1021
633
- N18-G990 / M-AN 1015
624
+ Truck Group North2
625
+ N18-G225 / M-AN 1027
626
+ N18-G660 / M-AN 1019
634
627
 
635
- Truck Group South5
628
+ Truck Group South8
636
629
 
637
- Truck Group West3
630
+ Truck Group West7
638
631
 
639
- All my unassigned Trucks5
632
+ All my unassigned Trucks3
640
633
 
641
634
  Current category:
642
635
  assets
@@ -649,31 +642,24 @@ Truck Group North
649
642
 
650
643
  #### Summary
651
644
 
652
- 11
653
- 7
654
- 4
645
+ 5
646
+ 8
655
647
  8
648
+ 9
656
649
 
657
- My Empty Group4
650
+ My Empty Group7
658
651
 
659
- Truck Group East4
652
+ Truck Group East3
660
653
 
661
- Truck Group North9
662
- N18-G203 / M-AN 1002
663
- N18-G260 / M-AN 1028
664
- N18-G314 / M-AN 1006
665
- N18-G370 / M-AN 1022
666
- N18-G455 / M-AN 1024
667
- N18-G502 / M-AN 1014
668
- N18-G600 / M-AN 1001
669
- N18-G752 / M-AN 1021
670
- N18-G990 / M-AN 1015
654
+ Truck Group North2
655
+ N18-G225 / M-AN 1027
656
+ N18-G660 / M-AN 1019
671
657
 
672
- Truck Group South5
658
+ Truck Group South8
673
659
 
674
- Truck Group West3
660
+ Truck Group West7
675
661
 
676
- All my unassigned Trucks5
662
+ All my unassigned Trucks3
677
663
 
678
664
  Current category:
679
665
  assets
@@ -870,24 +856,24 @@ export default AssetTreeSingleSelectExample;
870
856
  <div class="display-flex justify-content-between align-items-start width-100pct">
871
857
  <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
872
858
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
873
- <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
859
+ <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
874
860
  </span>
875
- <span class="TreeLabelCount label label-condensed label-muted label-filled">11</span>
861
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
876
862
  </div>
877
863
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
878
- <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
864
+ <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
879
865
  </span>
880
- <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
866
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
881
867
  </div>
882
868
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
883
- <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
869
+ <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
884
870
  </span>
885
- <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
871
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
886
872
  </div>
887
873
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
888
- <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
874
+ <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
889
875
  </span>
890
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
876
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
891
877
  </div>
892
878
  </div>
893
879
  </div>
@@ -900,7 +886,7 @@ export default AssetTreeSingleSelectExample;
900
886
  <span class="TreeLabelNameText">
901
887
  <span class="TreeLabelNameTextHeadline">My Empty Group</span>
902
888
  </span>
903
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
889
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
904
890
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
905
891
  </span>
906
892
  </span>
@@ -912,7 +898,7 @@ export default AssetTreeSingleSelectExample;
912
898
  <span class="TreeLabelNameText">
913
899
  <span class="TreeLabelNameTextHeadline">Truck Group East</span>
914
900
  </span>
915
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
901
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
916
902
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
917
903
  </span>
918
904
  </span>
@@ -924,89 +910,26 @@ export default AssetTreeSingleSelectExample;
924
910
  <span class="TreeLabelNameText">
925
911
  <span class="TreeLabelNameTextHeadline">Truck Group North</span>
926
912
  </span>
927
- <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
913
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
928
914
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
929
915
  </span>
930
916
  </span>
931
917
  </div>
932
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
918
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9727">
933
919
  <span class="TreeLabel TreeLabelName">
934
920
  <span class="rioglyph rioglyph-trailer">
935
921
  </span>
936
922
  <span class="TreeLabelNameText">
937
- <span class="TreeLabelNameTextHeadline">N18-G203 / M-AN 1002</span>
938
- </span>
939
- </span>
940
- </div>
941
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9728">
942
- <span class="TreeLabel TreeLabelName">
943
- <span class="rioglyph rioglyph-bus">
944
- </span>
945
- <span class="TreeLabelNameText">
946
- <span class="TreeLabelNameTextHeadline">N18-G260 / M-AN 1028</span>
947
- </span>
948
- </span>
949
- </div>
950
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
951
- <span class="TreeLabel TreeLabelName">
952
- <span class="rioglyph rioglyph-truck">
953
- </span>
954
- <span class="TreeLabelNameText">
955
- <span class="TreeLabelNameTextHeadline">N18-G314 / M-AN 1006</span>
923
+ <span class="TreeLabelNameTextHeadline">N18-G225 / M-AN 1027</span>
956
924
  </span>
957
925
  </span>
958
926
  </div>
959
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9722">
960
- <span class="TreeLabel TreeLabelName">
961
- <span class="rioglyph rioglyph-bus">
962
- </span>
963
- <span class="TreeLabelNameText">
964
- <span class="TreeLabelNameTextHeadline">N18-G370 / M-AN 1022</span>
965
- </span>
966
- </span>
967
- </div>
968
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9724">
927
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
969
928
  <span class="TreeLabel TreeLabelName">
970
929
  <span class="rioglyph rioglyph-van">
971
930
  </span>
972
931
  <span class="TreeLabelNameText">
973
- <span class="TreeLabelNameTextHeadline">N18-G455 / M-AN 1024</span>
974
- </span>
975
- </span>
976
- </div>
977
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
978
- <span class="TreeLabel TreeLabelName">
979
- <span class="rioglyph rioglyph-truck">
980
- </span>
981
- <span class="TreeLabelNameText">
982
- <span class="TreeLabelNameTextHeadline">N18-G502 / M-AN 1014</span>
983
- </span>
984
- </span>
985
- </div>
986
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
987
- <span class="TreeLabel TreeLabelName">
988
- <span class="rioglyph rioglyph-bus">
989
- </span>
990
- <span class="TreeLabelNameText">
991
- <span class="TreeLabelNameTextHeadline">N18-G600 / M-AN 1001</span>
992
- </span>
993
- </span>
994
- </div>
995
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9721">
996
- <span class="TreeLabel TreeLabelName">
997
- <span class="rioglyph rioglyph-trailer">
998
- </span>
999
- <span class="TreeLabelNameText">
1000
- <span class="TreeLabelNameTextHeadline">N18-G752 / M-AN 1021</span>
1001
- </span>
1002
- </span>
1003
- </div>
1004
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
1005
- <span class="TreeLabel TreeLabelName">
1006
- <span class="rioglyph rioglyph-bus">
1007
- </span>
1008
- <span class="TreeLabelNameText">
1009
- <span class="TreeLabelNameTextHeadline">N18-G990 / M-AN 1015</span>
932
+ <span class="TreeLabelNameTextHeadline">N18-G660 / M-AN 1019</span>
1010
933
  </span>
1011
934
  </span>
1012
935
  </div>
@@ -1017,7 +940,7 @@ export default AssetTreeSingleSelectExample;
1017
940
  <span class="TreeLabelNameText">
1018
941
  <span class="TreeLabelNameTextHeadline">Truck Group South</span>
1019
942
  </span>
1020
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
943
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
1021
944
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1022
945
  </span>
1023
946
  </span>
@@ -1029,7 +952,7 @@ export default AssetTreeSingleSelectExample;
1029
952
  <span class="TreeLabelNameText">
1030
953
  <span class="TreeLabelNameTextHeadline">Truck Group West</span>
1031
954
  </span>
1032
- <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
955
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
1033
956
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1034
957
  </span>
1035
958
  </span>
@@ -1041,7 +964,7 @@ export default AssetTreeSingleSelectExample;
1041
964
  <span class="TreeLabelNameText">
1042
965
  <span class="TreeLabelNameTextHeadline">All my unassigned Trucks</span>
1043
966
  </span>
1044
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
967
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
1045
968
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1046
969
  </span>
1047
970
  </span>
@@ -1228,28 +1151,24 @@ export default AssetTreeSingleSelectExample;
1228
1151
 
1229
1152
  ### Example: Example 3
1230
1153
 
1231
- 9
1232
1154
  7
1155
+ 5
1156
+ 5
1233
1157
  3
1234
- 1
1235
1158
 
1236
- 8
1237
- 7
1238
- 1
1159
+ 6
1160
+ 5
1239
1161
  2
1162
+ 5
1240
1163
  2
1241
1164
 
1242
- Mixed Vehicles8
1243
- Vehicle-1670Debug: hydrogen
1244
- Vehicle-2011Debug: diesel
1245
- Vehicle-3346Debug: dual_fuel_diesel_cng
1246
- Vehicle-3670Debug: lpg
1247
- Vehicle-5464Debug: cng
1248
- Vehicle-6229Debug: lpg
1249
- Vehicle-6521Debug: cng
1250
- Vehicle-7377Debug: gas
1165
+ Mixed Vehicles4
1166
+ Vehicle-2107Debug: hydrogen
1167
+ Vehicle-2123Debug: cng
1168
+ Vehicle-7629Debug: diesel
1169
+ Vehicle-8638Debug: hydrogen
1251
1170
 
1252
- Ungrouped12
1171
+ Ungrouped16
1253
1172
 
1254
1173
  Selected groups:
1255
1174
 
@@ -1260,28 +1179,24 @@ Mixed Vehicles
1260
1179
 
1261
1180
  #### Summary
1262
1181
 
1263
- 9
1264
1182
  7
1183
+ 5
1184
+ 5
1265
1185
  3
1266
- 1
1267
1186
 
1268
- 8
1269
- 7
1270
- 1
1187
+ 6
1188
+ 5
1271
1189
  2
1190
+ 5
1272
1191
  2
1273
1192
 
1274
- Mixed Vehicles8
1275
- Vehicle-1670Debug: hydrogen
1276
- Vehicle-2011Debug: diesel
1277
- Vehicle-3346Debug: dual_fuel_diesel_cng
1278
- Vehicle-3670Debug: lpg
1279
- Vehicle-5464Debug: cng
1280
- Vehicle-6229Debug: lpg
1281
- Vehicle-6521Debug: cng
1282
- Vehicle-7377Debug: gas
1193
+ Mixed Vehicles4
1194
+ Vehicle-2107Debug: hydrogen
1195
+ Vehicle-2123Debug: cng
1196
+ Vehicle-7629Debug: diesel
1197
+ Vehicle-8638Debug: hydrogen
1283
1198
 
1284
- Ungrouped12
1199
+ Ungrouped16
1285
1200
 
1286
1201
  Selected groups:
1287
1202
 
@@ -1616,44 +1531,44 @@ export default AssetTreeExample;
1616
1531
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1617
1532
  <span class="rioglyph rioglyph-truck-baseline text-size-16 margin-right-2">
1618
1533
  </span>
1619
- <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
1534
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1620
1535
  </div>
1621
1536
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1622
1537
  <span class="rioglyph rioglyph-bus-baseline text-size-16 margin-right-2">
1623
1538
  </span>
1624
- <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1539
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1625
1540
  </div>
1626
1541
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1627
1542
  <span class="rioglyph rioglyph-van-baseline text-size-16 margin-right-2">
1628
1543
  </span>
1629
- <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1544
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1630
1545
  </div>
1631
1546
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1632
1547
  <span class="rioglyph rioglyph-car-baseline text-size-16 margin-right-2">
1633
1548
  </span>
1634
- <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1549
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
1635
1550
  </div>
1636
1551
  </div>
1637
1552
  <div class="TreeSummaryRow display-grid grid-cols-4 gap-10">
1638
1553
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1639
1554
  <span class="rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2">
1640
1555
  </span>
1641
- <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
1556
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
1642
1557
  </div>
1643
1558
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1644
1559
  <span class="rioglyph rioglyph-fuel-gas text-size-16 margin-right-2">
1645
1560
  </span>
1646
- <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
1561
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1647
1562
  </div>
1648
1563
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1649
1564
  <span class="rioglyph rioglyph-fuel-electric text-size-16 margin-right-2">
1650
1565
  </span>
1651
- <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
1566
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1652
1567
  </div>
1653
1568
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1654
1569
  <span class="rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2">
1655
1570
  </span>
1656
- <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
1571
+ <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
1657
1572
  </div>
1658
1573
  <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
1659
1574
  <span class="rioglyph rioglyph-fuel-mix text-size-16 margin-right-2">
@@ -1665,7 +1580,7 @@ export default AssetTreeExample;
1665
1580
  </div>
1666
1581
  <div>
1667
1582
  <div class="dropdown btn-group TreeHeaderOptions height-20">
1668
- <button type="button" id="ujryythjcze" 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">
1583
+ <button type="button" id="sxrhqk1nu4j" 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">
1669
1584
  <span class="rioglyph rioglyph-option-vertical" aria-hidden="true">
1670
1585
  </span>
1671
1586
  </button>
@@ -1685,12 +1600,12 @@ export default AssetTreeExample;
1685
1600
  <span class="TreeLabelNameText">
1686
1601
  <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
1687
1602
  </span>
1688
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
1603
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
1689
1604
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1690
1605
  </span>
1691
1606
  </span>
1692
1607
  </div>
1693
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
1608
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1694
1609
  <label class="checkbox TreeCheckbox" tabindex="0">
1695
1610
  <input type="checkbox" class="TreeCheckbox">
1696
1611
  <span class="checkbox-text">
@@ -1704,77 +1619,14 @@ export default AssetTreeExample;
1704
1619
  </span>
1705
1620
  </span>
1706
1621
  <span class="TreeLabelNameText">
1707
- <span class="TreeLabelNameTextHeadline">Vehicle-1670</span>
1622
+ <span class="TreeLabelNameTextHeadline">Vehicle-2107</span>
1708
1623
  <span class="TreeLabelNameTextSubline">
1709
1624
  <span>Debug: hydrogen</span>
1710
1625
  </span>
1711
1626
  </span>
1712
1627
  </span>
1713
1628
  </div>
1714
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
1715
- <label class="checkbox TreeCheckbox" tabindex="0">
1716
- <input type="checkbox" class="TreeCheckbox">
1717
- <span class="checkbox-text">
1718
- </span>
1719
- </label>
1720
- <span class="TreeLabel TreeLabelName">
1721
- <span class="rioglyph-icon-pair">
1722
- <span class="rioglyph rioglyph-truck">
1723
- </span>
1724
- <span class="rioglyph rioglyph-fuel-liquid">
1725
- </span>
1726
- </span>
1727
- <span class="TreeLabelNameText">
1728
- <span class="TreeLabelNameTextHeadline">Vehicle-2011</span>
1729
- <span class="TreeLabelNameTextSubline">
1730
- <span>Debug: diesel</span>
1731
- </span>
1732
- </span>
1733
- </span>
1734
- </div>
1735
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
1736
- <label class="checkbox TreeCheckbox" tabindex="0">
1737
- <input type="checkbox" class="TreeCheckbox">
1738
- <span class="checkbox-text">
1739
- </span>
1740
- </label>
1741
- <span class="TreeLabel TreeLabelName">
1742
- <span class="rioglyph-icon-pair">
1743
- <span class="rioglyph rioglyph-truck">
1744
- </span>
1745
- <span class="rioglyph rioglyph-fuel-mix">
1746
- </span>
1747
- </span>
1748
- <span class="TreeLabelNameText">
1749
- <span class="TreeLabelNameTextHeadline">Vehicle-3346</span>
1750
- <span class="TreeLabelNameTextSubline">
1751
- <span>Debug: dual_fuel_diesel_cng</span>
1752
- </span>
1753
- </span>
1754
- </span>
1755
- </div>
1756
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
1757
- <label class="checkbox TreeCheckbox" tabindex="0">
1758
- <input type="checkbox" class="TreeCheckbox">
1759
- <span class="checkbox-text">
1760
- </span>
1761
- </label>
1762
- <span class="TreeLabel TreeLabelName">
1763
- <span class="rioglyph-icon-pair">
1764
- <span class="rioglyph rioglyph-bus">
1765
- </span>
1766
- <span class="rioglyph rioglyph-fuel-gas">
1767
- </span>
1768
- </span>
1769
- <span class="TreeLabelNameText">
1770
- <span class="TreeLabelNameTextHeadline">Vehicle-3670</span>
1771
- <span class="TreeLabelNameTextSubline">
1772
- <span>Debug: lpg</span>
1773
- </span>
1774
- </span>
1775
- </span>
1776
- </div>
1777
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9717">
1629
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
1778
1630
  <label class="checkbox TreeCheckbox" tabindex="0">
1779
1631
  <input type="checkbox" class="TreeCheckbox">
1780
1632
  <span class="checkbox-text">
@@ -1782,41 +1634,20 @@ export default AssetTreeExample;
1782
1634
  </label>
1783
1635
  <span class="TreeLabel TreeLabelName">
1784
1636
  <span class="rioglyph-icon-pair">
1785
- <span class="rioglyph rioglyph-truck">
1637
+ <span class="rioglyph rioglyph-van">
1786
1638
  </span>
1787
1639
  <span class="rioglyph rioglyph-fuel-gas">
1788
1640
  </span>
1789
1641
  </span>
1790
1642
  <span class="TreeLabelNameText">
1791
- <span class="TreeLabelNameTextHeadline">Vehicle-5464</span>
1643
+ <span class="TreeLabelNameTextHeadline">Vehicle-2123</span>
1792
1644
  <span class="TreeLabelNameTextSubline">
1793
1645
  <span>Debug: cng</span>
1794
1646
  </span>
1795
1647
  </span>
1796
1648
  </span>
1797
1649
  </div>
1798
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
1799
- <label class="checkbox TreeCheckbox" tabindex="0">
1800
- <input type="checkbox" class="TreeCheckbox">
1801
- <span class="checkbox-text">
1802
- </span>
1803
- </label>
1804
- <span class="TreeLabel TreeLabelName">
1805
- <span class="rioglyph-icon-pair">
1806
- <span class="rioglyph rioglyph-truck">
1807
- </span>
1808
- <span class="rioglyph rioglyph-fuel-gas">
1809
- </span>
1810
- </span>
1811
- <span class="TreeLabelNameText">
1812
- <span class="TreeLabelNameTextHeadline">Vehicle-6229</span>
1813
- <span class="TreeLabelNameTextSubline">
1814
- <span>Debug: lpg</span>
1815
- </span>
1816
- </span>
1817
- </span>
1818
- </div>
1819
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
1650
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9716">
1820
1651
  <label class="checkbox TreeCheckbox" tabindex="0">
1821
1652
  <input type="checkbox" class="TreeCheckbox">
1822
1653
  <span class="checkbox-text">
@@ -1826,18 +1657,18 @@ export default AssetTreeExample;
1826
1657
  <span class="rioglyph-icon-pair">
1827
1658
  <span class="rioglyph rioglyph-bus">
1828
1659
  </span>
1829
- <span class="rioglyph rioglyph-fuel-gas">
1660
+ <span class="rioglyph rioglyph-fuel-liquid">
1830
1661
  </span>
1831
1662
  </span>
1832
1663
  <span class="TreeLabelNameText">
1833
- <span class="TreeLabelNameTextHeadline">Vehicle-6521</span>
1664
+ <span class="TreeLabelNameTextHeadline">Vehicle-7629</span>
1834
1665
  <span class="TreeLabelNameTextSubline">
1835
- <span>Debug: cng</span>
1666
+ <span>Debug: diesel</span>
1836
1667
  </span>
1837
1668
  </span>
1838
1669
  </span>
1839
1670
  </div>
1840
- <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
1671
+ <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
1841
1672
  <label class="checkbox TreeCheckbox" tabindex="0">
1842
1673
  <input type="checkbox" class="TreeCheckbox">
1843
1674
  <span class="checkbox-text">
@@ -1847,13 +1678,13 @@ export default AssetTreeExample;
1847
1678
  <span class="rioglyph-icon-pair">
1848
1679
  <span class="rioglyph rioglyph-truck">
1849
1680
  </span>
1850
- <span class="rioglyph rioglyph-fuel-liquid">
1681
+ <span class="rioglyph rioglyph-fuel-hydrogen">
1851
1682
  </span>
1852
1683
  </span>
1853
1684
  <span class="TreeLabelNameText">
1854
- <span class="TreeLabelNameTextHeadline">Vehicle-7377</span>
1685
+ <span class="TreeLabelNameTextHeadline">Vehicle-8638</span>
1855
1686
  <span class="TreeLabelNameTextSubline">
1856
- <span>Debug: gas</span>
1687
+ <span>Debug: hydrogen</span>
1857
1688
  </span>
1858
1689
  </span>
1859
1690
  </span>
@@ -1870,7 +1701,7 @@ export default AssetTreeExample;
1870
1701
  <span class="TreeLabelNameText">
1871
1702
  <span class="TreeLabelNameTextHeadline">Ungrouped</span>
1872
1703
  </span>
1873
- <span class="TreeLabelCount label label-muted label-filled label-condensed">12</span>
1704
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">16</span>
1874
1705
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
1875
1706
  </span>
1876
1707
  </span>
@@ -2460,29 +2291,21 @@ export default AssetTreeWithCustomSummaryExample;
2460
2291
 
2461
2292
  ## Tree with custom icons
2462
2293
 
2463
- ### Example: Tree with header and search
2294
+ ### Example: Example 5
2464
2295
 
2465
- Tree with header and search
2296
+ Group 0110
2466
2297
 
2467
- 20
2468
-
2469
- Group 014
2470
-
2471
- Group 026
2298
+ Group 027
2472
2299
 
2473
- Group 0310
2300
+ Group 033
2474
2301
 
2475
2302
  #### Summary
2476
2303
 
2477
- Tree with header and search
2304
+ Group 0110
2478
2305
 
2479
- 20
2306
+ Group 027
2480
2307
 
2481
- Group 014
2482
-
2483
- Group 026
2484
-
2485
- Group 0310
2308
+ Group 033
2486
2309
 
2487
2310
  #### React (tsx)
2488
2311
 
@@ -2492,7 +2315,6 @@ import { random } from 'es-toolkit/compat';
2492
2315
  import { faker } from '@faker-js/faker';
2493
2316
 
2494
2317
  import Tree, { type TreeItem, type TreeGroup, type SelectionChangeResponse } from '@rio-cloud/rio-uikit/Tree';
2495
- import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
2496
2318
 
2497
2319
  const groups: TreeGroup[] = [
2498
2320
  {
@@ -2532,21 +2354,20 @@ export default () => {
2532
2354
 
2533
2355
  return (
2534
2356
  <div className='display-flex flex-wrap gap-25 overflow-auto'>
2535
- <LabeledElement label='Tree with header and search'>
2536
- <div className='width-500 border border-color-lighter border-bottom-none'>
2537
- <Tree
2538
- groups={groups}
2539
- items={treeItems}
2540
- expandedGroups={expandedGroups}
2541
- onExpandGroupsChange={handleExpandGroups}
2542
- selectedItems={selectedItemIds}
2543
- onSelectionChange={handleSelection}
2544
- searchPlaceholder='Find items'
2545
- scrollHeight={300}
2546
- hasMultiselect={false}
2547
- />
2548
- </div>
2549
- </LabeledElement>
2357
+ <div className='width-500 border border-color-lighter border-bottom-none'>
2358
+ <Tree
2359
+ groups={groups}
2360
+ items={treeItems}
2361
+ expandedGroups={expandedGroups}
2362
+ onExpandGroupsChange={handleExpandGroups}
2363
+ selectedItems={selectedItemIds}
2364
+ onSelectionChange={handleSelection}
2365
+ searchPlaceholder='Find items'
2366
+ scrollHeight={300}
2367
+ hasMultiselect={false}
2368
+ hideTreeHead
2369
+ />
2370
+ </div>
2550
2371
  </div>
2551
2372
  );
2552
2373
  };
@@ -2556,85 +2377,69 @@ export default () => {
2556
2377
 
2557
2378
  ```html
2558
2379
  <div class="display-flex flex-wrap gap-25 overflow-auto">
2559
- <div class="LabeledElement display-flex flex-column">
2560
- <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Tree with header and search</div>
2561
- <div class="width-500 border border-color-lighter border-bottom-none">
2562
- <div class="Tree">
2563
- <div class="TreeHeader">
2564
- <div class="TreeSearch">
2565
- <div class="input-group flex-1-0">
2566
- <span class="input-group-addon">
2567
- <span class="rioglyph rioglyph-search" aria-hidden="true">
2568
- </span>
2380
+ <div class="width-500 border border-color-lighter border-bottom-none">
2381
+ <div class="Tree">
2382
+ <div class="TreeHeader">
2383
+ <div class="TreeSearch">
2384
+ <div class="input-group flex-1-0">
2385
+ <span class="input-group-addon">
2386
+ <span class="rioglyph rioglyph-search" aria-hidden="true">
2569
2387
  </span>
2570
- <div class="ClearableInput input-group">
2571
- <input placeholder="Find items" class="form-control" type="text" tabindex="0" value="">
2572
- <span class="clearButton hide">
2573
- <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
2574
- </span>
2388
+ </span>
2389
+ <div class="ClearableInput input-group">
2390
+ <input placeholder="Find items" class="form-control" type="text" tabindex="0" value="">
2391
+ <span class="clearButton hide">
2392
+ <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
2575
2393
  </span>
2576
- </div>
2394
+ </span>
2577
2395
  </div>
2578
2396
  </div>
2579
- <div class="TreeHead display-flex gap-5 padding-15">
2580
- <div class="border border-right-only hidden-empty padding-right-10 margin-right-2">
2581
- </div>
2582
- <div class="display-flex justify-content-between align-items-start width-100pct">
2583
- <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
2584
- <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none">
2585
- <span class="rioglyph rioglyph-files text-size-16 margin-right-2">
2586
- </span>
2587
- <span class="TreeLabelCount label label-condensed label-muted label-filled">20</span>
2588
- </div>
2397
+ </div>
2398
+ </div>
2399
+ <div class="TreeRoot user-select-none overflow-auto" style="max-height: 300px; position: relative;">
2400
+ <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="1">
2401
+ <div class="TreeNode from-group" data-key="1">
2402
+ <span class="TreeLabel TreeLabelName">
2403
+ <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
2404
+ <img src="https://cdn.rio.cloud/images/uikit/react_logo.svg" style="max-width: 100%; max-height: 100%;">
2589
2405
  </div>
2590
- </div>
2406
+ <span class="TreeLabelNameText">
2407
+ <span class="TreeLabelNameTextHeadline">Group 01</span>
2408
+ </span>
2409
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
2410
+ <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2411
+ </span>
2412
+ </span>
2591
2413
  </div>
2592
2414
  </div>
2593
- <div class="TreeRoot user-select-none overflow-auto" style="max-height: 300px; position: relative;">
2594
- <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="1">
2595
- <div class="TreeNode from-group" data-key="1">
2596
- <span class="TreeLabel TreeLabelName">
2597
- <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
2598
- <img src="https://cdn.rio.cloud/images/uikit/react_logo.svg" style="max-width: 100%; max-height: 100%;">
2599
- </div>
2600
- <span class="TreeLabelNameText">
2601
- <span class="TreeLabelNameTextHeadline">Group 01</span>
2602
- </span>
2603
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
2604
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2605
- </span>
2415
+ <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="2">
2416
+ <div class="TreeNode from-group" data-key="2">
2417
+ <span class="TreeLabel TreeLabelName">
2418
+ <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
2419
+ <img src="https://cdn.rio.cloud/images/uikit/react_logo.svg" style="max-width: 100%; max-height: 100%;">
2420
+ </div>
2421
+ <span class="TreeLabelNameText">
2422
+ <span class="TreeLabelNameTextHeadline">Group 02</span>
2606
2423
  </span>
2607
- </div>
2608
- </div>
2609
- <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="2">
2610
- <div class="TreeNode from-group" data-key="2">
2611
- <span class="TreeLabel TreeLabelName">
2612
- <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
2613
- <img src="https://cdn.rio.cloud/images/uikit/react_logo.svg" style="max-width: 100%; max-height: 100%;">
2614
- </div>
2615
- <span class="TreeLabelNameText">
2616
- <span class="TreeLabelNameTextHeadline">Group 02</span>
2617
- </span>
2618
- <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
2619
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2620
- </span>
2424
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2425
+ <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2621
2426
  </span>
2622
- </div>
2427
+ </span>
2623
2428
  </div>
2624
- <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="3">
2625
- <div class="TreeNode from-group" data-key="3">
2626
- <span class="TreeLabel TreeLabelName">
2627
- <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
2628
- <img src="https://cdn.rio.cloud/svg/common/ico_rio_colored.svg" style="max-width: 100%; max-height: 100%;">
2629
- </div>
2630
- <span class="TreeLabelNameText">
2631
- <span class="TreeLabelNameTextHeadline">Group 03</span>
2632
- </span>
2633
- <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
2634
- <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2635
- </span>
2429
+ </div>
2430
+ <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="3">
2431
+ <div class="TreeNode from-group" data-key="3">
2432
+ <span class="TreeLabel TreeLabelName">
2433
+ <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
2434
+ <img src="https://cdn.rio.cloud/svg/common/ico_rio_colored.svg" style="max-width: 100%; max-height: 100%;">
2435
+ </div>
2436
+ <span class="TreeLabelNameText">
2437
+ <span class="TreeLabelNameTextHeadline">Group 03</span>
2636
2438
  </span>
2637
- </div>
2439
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2440
+ <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2441
+ </span>
2442
+ </span>
2638
2443
  </div>
2639
2444
  </div>
2640
2445
  </div>
@@ -2793,11 +2598,11 @@ Tree with header and search
2793
2598
 
2794
2599
  20
2795
2600
 
2796
- Folder 017
2601
+ Folder 016
2797
2602
 
2798
- Folder 024
2603
+ Folder 023
2799
2604
 
2800
- Folder 035
2605
+ Folder 037
2801
2606
 
2802
2607
  Folder 044
2803
2608
 
@@ -2811,11 +2616,11 @@ Tree with header and search
2811
2616
 
2812
2617
  20
2813
2618
 
2814
- Folder 017
2619
+ Folder 016
2815
2620
 
2816
- Folder 024
2621
+ Folder 023
2817
2622
 
2818
- Folder 035
2623
+ Folder 037
2819
2624
 
2820
2625
  Folder 044
2821
2626
 
@@ -2962,7 +2767,7 @@ export default TreeOnlyExample;
2962
2767
  <span class="TreeLabelNameText">
2963
2768
  <span class="TreeLabelNameTextHeadline">Folder 01</span>
2964
2769
  </span>
2965
- <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2770
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
2966
2771
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2967
2772
  </span>
2968
2773
  </span>
@@ -2976,7 +2781,7 @@ export default TreeOnlyExample;
2976
2781
  <span class="TreeLabelNameText">
2977
2782
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
2978
2783
  </span>
2979
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
2784
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
2980
2785
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2981
2786
  </span>
2982
2787
  </span>
@@ -2990,7 +2795,7 @@ export default TreeOnlyExample;
2990
2795
  <span class="TreeLabelNameText">
2991
2796
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
2992
2797
  </span>
2993
- <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
2798
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
2994
2799
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
2995
2800
  </span>
2996
2801
  </span>
@@ -3078,11 +2883,11 @@ export default TreeOnlyExample;
3078
2883
 
3079
2884
  Tree without header and search
3080
2885
 
3081
- Folder 012
2886
+ Folder 017
3082
2887
 
3083
- Folder 028
2888
+ Folder 022
3084
2889
 
3085
- Folder 034
2890
+ Folder 035
3086
2891
 
3087
2892
  Folder 046
3088
2893
 
@@ -3094,11 +2899,11 @@ Expanded folders:
3094
2899
 
3095
2900
  Tree without header and search
3096
2901
 
3097
- Folder 012
2902
+ Folder 017
3098
2903
 
3099
- Folder 028
2904
+ Folder 022
3100
2905
 
3101
- Folder 034
2906
+ Folder 035
3102
2907
 
3103
2908
  Folder 046
3104
2909
 
@@ -3221,7 +3026,7 @@ export default TreeOnlyExample;
3221
3026
  <span class="TreeLabelNameText">
3222
3027
  <span class="TreeLabelNameTextHeadline">Folder 01</span>
3223
3028
  </span>
3224
- <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
3029
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
3225
3030
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3226
3031
  </span>
3227
3032
  </span>
@@ -3235,7 +3040,7 @@ export default TreeOnlyExample;
3235
3040
  <span class="TreeLabelNameText">
3236
3041
  <span class="TreeLabelNameTextHeadline">Folder 02</span>
3237
3042
  </span>
3238
- <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
3043
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
3239
3044
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3240
3045
  </span>
3241
3046
  </span>
@@ -3249,7 +3054,7 @@ export default TreeOnlyExample;
3249
3054
  <span class="TreeLabelNameText">
3250
3055
  <span class="TreeLabelNameTextHeadline">Folder 03</span>
3251
3056
  </span>
3252
- <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
3057
+ <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
3253
3058
  <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
3254
3059
  </span>
3255
3060
  </span>