@rio-cloud/uikit-mcp 1.1.3 → 1.1.5

package/dist/docs/components/assetTree.md

@@ -3,9 +3,7 @@
 *Category:* Components
 *Section:* Selection
 *Source:* https://uikit.developers.rio.cloud/#components/assetTree
-*Captured:* 2026-01-07T12:11:29.011Z
-
-The asset tree components are using labels that need to be defined from the outside of the components, meaning the come from your service. To align on the labels and their translations you should use the shared project on Phrase.
+*Captured:* 2026-02-03T14:04:32.850Z
 
 ## AssetTree
 
@@ -13,38 +11,36 @@ The asset tree components are using labels that need to be defined from the outs
 
 Filter
 
-5384
+5868
 4
 
-Group - Abraham Watsica - 621113
-
-Group - Adam Windler - 770317
+Group - Adrienne Weimann - 60548
 
-Group - Alexandra Collins - 999013
+Group - Agnes Homenick - 817311
 
-Group - Alfred Olson - 956712
+Group - Alejandro Little - 593623
 
-Group - Alfred Stokes - 89338
+Group - Alexander Kautzer - 58489
 
-Group - Alice Green - 890610
+Group - Alexandra McGlynn - 40409
 
-Group - Allison Padberg III - 27086
+Group - Allen Feeney - 758310
 
-Group - Alma Sanford - 66055
+Group - Alma Bradtke - 812611
 
-Group - Alvin Wolf Sr. - 47075
+Group - Alton Becker MD - 390414
 
-Group - Amanda Kunde - 348613
+Group - Amber Swift IV - 81856
 
-Group - Amelia Zemlak - 819710
+Group - Amos Gorczany - 298611
 
-Group - Amos Welch - 13858
+Group - Amos Hickle - 741010
 
-Group - Ana Greenfelder - 97437
+Group - Amos Nader - 357510
 
-Group - Andrea Mueller - 75687
+Group - Ana Sanford - 221715
 
-Group - Andrew Howell Sr. - 815511
+Group - Ana Sporer - 48377
 
 200
 
@@ -72,38 +68,36 @@ Asset type filter:
 
 Filter
 
-5384
+5868
 4
 
-Group - Abraham Watsica - 621113
+Group - Adrienne Weimann - 60548
 
-Group - Adam Windler - 770317
+Group - Agnes Homenick - 817311
 
-Group - Alexandra Collins - 999013
+Group - Alejandro Little - 593623
 
-Group - Alfred Olson - 956712
+Group - Alexander Kautzer - 58489
 
-Group - Alfred Stokes - 89338
+Group - Alexandra McGlynn - 40409
 
-Group - Alice Green - 890610
+Group - Allen Feeney - 758310
 
-Group - Allison Padberg III - 27086
+Group - Alma Bradtke - 812611
 
-Group - Alma Sanford - 66055
+Group - Alton Becker MD - 390414
 
-Group - Alvin Wolf Sr. - 47075
+Group - Amber Swift IV - 81856
 
-Group - Amanda Kunde - 348613
+Group - Amos Gorczany - 298611
 
-Group - Amelia Zemlak - 819710
+Group - Amos Hickle - 741010
 
-Group - Amos Welch - 13858
+Group - Amos Nader - 357510
 
-Group - Ana Greenfelder - 97437
+Group - Ana Sanford - 221715
 
-Group - Andrea Mueller - 75687
-
-Group - Andrew Howell Sr. - 815511
+Group - Ana Sporer - 48377
 
 200
 
@@ -132,7 +126,7 @@ Asset type filter:
 ```tsx
 import { useState } from 'react';
 import { get, isEmpty, isObject, random } from 'es-toolkit/compat';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 
 import AssetTree from '@rio-cloud/rio-uikit/AssetTree';
 import TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';
@@ -155,8 +149,8 @@ const CATEGORY_LOREM = 'lorem';
 const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
     id: `74e8eb86-18a1-4abe-90cb-aeee7909f85${index}`,
     name: {
-        firstName: faker.internet.userName(),
-        lastName: faker.name.firstName(),
+        firstName: faker.internet.username(),
+        lastName: faker.person.firstName(),
     },
     type: 'driver',
 }));
@@ -164,7 +158,7 @@ const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
 const getTruckGroups = (): TreeGroup[] => {
     const groups = Array.from({ length: random(400, 600) }, (_, index) => ({
         id: `group-${index}`,
-        name: `Group - ${faker.name.findName()} - ${random(1000, 9999)}`,
+        name: `Group - ${faker.person.fullName()} - ${random(1000, 9999)}`,
     }));
     return [
         ...groups,
@@ -234,7 +228,7 @@ const getTrucks = (namePrefix = 'Vehicle-'): TreeItem[] => {
         name: `${namePrefix}${random(1000, 9999)}`,
         info: `M-AN 1${String(index).padStart(3, '0')}`,
         type: 'truck',
-        groupIds: [faker.random.arrayElement(groups).id],
+        groupIds: [faker.helpers.arrayElement(groups).id],
     }));
     return [...randomTrucks, ...trailer];
 };
@@ -480,19 +474,18 @@ export default AssetTreeExample;
 | --- | --- | --- | --- |
 | fly | boolean | false | Defines if the component will overlap the body content. |
 | resizable | boolean | true | Defines whether or not the sidebar is resizable. |
-| onResizeEnd | Function | () => {} | Callback for when the resize is done. |
 | bordered | boolean | false | Defines whether the component has a border or not. |
-| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
+| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
 | minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |
 | maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |
 | height | number | — | Defines the height of the component in px. |
 | isOpen | boolean | true | Defines whether the component is open or not. |
-| onToggleTree | Function | () => {} | Callback for when the tree visibility is toggled. |
+| onToggleTree | (isOpen: boolean) => void | () => {} | Callback for when the tree visibility is toggled. |
 | currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |
-| onCategoryChange | Function | () => {} | Callback for handling change of category. |
+| onCategoryChange | (selectedCategoryId: string) => void | () => {} | Callback for handling change of category. |
+| onResizeEnd | VoidFunction | () => {} | Callback for when the resize is done. |
 | useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |
-| className | String | — | Additional classes added on the wrapper element. |
-| children | TreeCategory | — | A list of TreeCategory components |
+| className | string | — | Additional classes added on the wrapper element. |
 
 #### Props: TreeCategory
 
@@ -500,9 +493,9 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | A unique identifier for that category. |
-| icon | String | — | The rioglyph icon name for that category. |
-| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |
+| id | string | — | A unique identifier for that category. |
+| icon | string | — | The rioglyph icon name for that category. |
+| label | string \| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |
 | hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |
 
 #### Props: Tree
@@ -511,45 +504,48 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
-| └id | String | — | A unique identifier of a group. |
-| └name | String | — | The name of a group. |
-| └position | string | — | Can be set to "last" to enforce the last position in the tree. |
-| └disabled | Boolean | — | Disallows the selection of the group itself. |
-| └className | String | — | Additional classes added to the group element. |
-| items | Array of Objects | [] | The list of items. |
-| └id | String | — | A unique identifier of an item. |
-| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |
-| └info | String \| Node | — | The subline of an item. |
-| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix). |
-| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |
-| └icon | string | — | The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted. |
-| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |
-| └groupIds | Array of strings | [] | List of group ids the items is associated with. |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
 | └className | string | — | Additional classes added to the item element. |
-| selectedGroups | Array of strings | — | List of selected group ids. |
-| selectedItems | Array of strings | — | List of selected item ids. |
-| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
 | hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
 | showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
 | hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
 | searchPlaceholder | string | — | The text used as placeholder for the search input. |
-| onSearchChange | Function | — | Callback for when the search value changes. |
-| search | node | — | Used to define custom custom search component which replaces the built-in search. |
-| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
-| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
 | hideSummary | boolean | false | Defines whether a summary is shown. |
+| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
 | hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
-| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
-| scrollHeight | Number | — | Defines the max-height of the scrollable list |
-| expandedGroups | Array of String | — | List of group ids which are expanded. |
-| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
 | showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
-| treeOptions | ReactNode | — | Component to offer customization options for the tree. |
-| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
 | virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
 | overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
-| className | String | — | Additional classes added to the wrapping element. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSearch
 
@@ -557,10 +553,10 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| value | String | — | The search value to be shown and used for the search. |
-| onChange | Function | () => {} | Callback for when the search value changes. |
-| placeholder | String | — | The placeholder text used for the input field. |
-| className | String | — | Additional classes added to the wrapping element. |
+| value | string | — | The search value to be shown and used for the search. |
+| onChange | (newValue: string, event: React.ChangeEvent \| React.MouseEvent) => void | () => {} | Callback for when the search value changes. |
+| placeholder | string | — | The placeholder text used for the input field. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummary
 
@@ -568,13 +564,14 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| assetCounts | object | — | The object containing various asset type counter. |
-| └truck | number | — | The amount of trucks. |
-| └trailer | number | — | The amount of trailers. |
-| └bus | number | — | The amount of buses. |
-| └van | number | — | The amount of vans. |
-| └driver | number | — | The amount of drivers. |
-| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummaryRow
@@ -593,12 +590,12 @@ export default AssetTreeExample;
 | --- | --- | --- | --- |
 | type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
 | icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
-| isActive | Boolean | — | Sets the active styling if active. |
-| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |
-| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
 | hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
-| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the "type" prop is defined to receive the value in the callback and the flag "enableActivity" is set to true otherwise the callback is not triggered. |
-| value | String / Number / Node | — | A custom value to be shown in the counter. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |
 
 #### Props: TreeOption
 
@@ -606,38 +603,40 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| isChecked | boolean | — | Defines whether the option is set. |
-| label | string / node | — | The label for the option. |
-| onChange | Function | — | Callback triggered when option is selected. |
+| isChecked | boolean | false | Defines whether the option is set. |
+| onChange | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback triggered when option is selected. |
+| label | string \| React.ReactNode | — | The label for the option. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 ## AssetTree with single select
 
 ### Example: Example 2
 
-10
-5
-9
-6
+11
+7
+4
+8
 
-My Empty Group5
+My Empty Group4
 
-Truck Group East5
+Truck Group East4
 
-Truck Group North7
-N18-G109 / M-AN 1018
-N18-G176 / M-AN 1026
-N18-G560 / M-AN 1006
-N18-G704 / M-AN 1007
-N18-G811 / M-AN 1005
-N18-G830 / M-AN 1010
-N18-G961 / M-AN 1009
+Truck Group North9
+N18-G203 / M-AN 1002
+N18-G260 / M-AN 1028
+N18-G314 / M-AN 1006
+N18-G370 / M-AN 1022
+N18-G455 / M-AN 1024
+N18-G502 / M-AN 1014
+N18-G600 / M-AN 1001
+N18-G752 / M-AN 1021
+N18-G990 / M-AN 1015
 
-Truck Group South7
+Truck Group South5
 
 Truck Group West3
 
-All my unassigned Trucks3
+All my unassigned Trucks5
 
 Current category:
 assets
@@ -650,29 +649,31 @@ Truck Group North
 
 #### Summary
 
-10
-5
-9
-6
+11
+7
+4
+8
 
-My Empty Group5
+My Empty Group4
 
-Truck Group East5
+Truck Group East4
 
-Truck Group North7
-N18-G109 / M-AN 1018
-N18-G176 / M-AN 1026
-N18-G560 / M-AN 1006
-N18-G704 / M-AN 1007
-N18-G811 / M-AN 1005
-N18-G830 / M-AN 1010
-N18-G961 / M-AN 1009
+Truck Group North9
+N18-G203 / M-AN 1002
+N18-G260 / M-AN 1028
+N18-G314 / M-AN 1006
+N18-G370 / M-AN 1022
+N18-G455 / M-AN 1024
+N18-G502 / M-AN 1014
+N18-G600 / M-AN 1001
+N18-G752 / M-AN 1021
+N18-G990 / M-AN 1015
 
-Truck Group South7
+Truck Group South5
 
 Truck Group West3
 
-All my unassigned Trucks3
+All my unassigned Trucks5
 
 Current category:
 assets
@@ -688,7 +689,7 @@ Truck Group North
 ```tsx
 import { useState } from 'react';
 import { isEmpty, isObject, random } from 'es-toolkit/compat';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 
 import AssetTree from '@rio-cloud/rio-uikit/AssetTree';
 import TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';
@@ -735,8 +736,8 @@ const assetTypes = ['truck', 'bus', 'van', 'trailer'];
 const assets = Array.from({ length: 30 }, (_, index) => ({
     id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,
     name: `N18-G${random(100, 999)} / M-AN 1${String(index).padStart(3, '0')}`,
-    type: faker.random.arrayElement(assetTypes),
-    groupIds: [faker.random.arrayElement(assetGroups).id],
+    type: faker.helpers.arrayElement(assetTypes),
+    groupIds: [faker.helpers.arrayElement(assetGroups).id],
 }));
 
 const AssetTreeSingleSelectExample = () => {
@@ -871,22 +872,22 @@ export default AssetTreeSingleSelectExample;
                                                 <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                     <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                     </span>
-                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">10</span>
+                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">11</span>
                                                 </div>
                                                 <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                    <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
+                                                    <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
                                                     </span>
-                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
+                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
                                                 </div>
                                                 <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
-                                                    <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
+                                                    <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
                                                     </span>
-                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
+                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
                                                 </div>
                                                 <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                     <span class="rioglyph rioglyph-truck text-size-16 margin-right-2">
                                                     </span>
-                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
+                                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
                                                 </div>
                                             </div>
                                         </div>
@@ -899,7 +900,7 @@ export default AssetTreeSingleSelectExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">My Empty Group</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
@@ -911,7 +912,7 @@ export default AssetTreeSingleSelectExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">Truck Group East</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
@@ -923,71 +924,89 @@ export default AssetTreeSingleSelectExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">Truck Group North</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">9</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9718">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
                                             <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph rioglyph-truck">
+                                                <span class="rioglyph rioglyph-trailer">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G109 / M-AN 1018</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G203 / M-AN 1002</span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9726">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9728">
                                             <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph rioglyph-van">
+                                                <span class="rioglyph rioglyph-bus">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G176 / M-AN 1026</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G260 / M-AN 1028</span>
                                                 </span>
                                             </span>
                                         </div>
                                         <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d976">
                                             <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph rioglyph-bus">
+                                                <span class="rioglyph rioglyph-truck">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G560 / M-AN 1006</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G314 / M-AN 1006</span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d977">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9722">
                                             <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph rioglyph-trailer">
+                                                <span class="rioglyph rioglyph-bus">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G704 / M-AN 1007</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G370 / M-AN 1022</span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9724">
                                             <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph rioglyph-trailer">
+                                                <span class="rioglyph rioglyph-van">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G811 / M-AN 1005</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G455 / M-AN 1024</span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9710">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph rioglyph-truck">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G830 / M-AN 1010</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G502 / M-AN 1014</span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
+                                            <span class="TreeLabel TreeLabelName">
+                                                <span class="rioglyph rioglyph-bus">
+                                                </span>
+                                                <span class="TreeLabelNameText">
+                                                    <span class="TreeLabelNameTextHeadline">N18-G600 / M-AN 1001</span>
+                                                </span>
+                                            </span>
+                                        </div>
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9721">
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph rioglyph-trailer">
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">N18-G961 / M-AN 1009</span>
+                                                    <span class="TreeLabelNameTextHeadline">N18-G752 / M-AN 1021</span>
+                                                </span>
+                                            </span>
+                                        </div>
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
+                                            <span class="TreeLabel TreeLabelName">
+                                                <span class="rioglyph rioglyph-bus">
+                                                </span>
+                                                <span class="TreeLabelNameText">
+                                                    <span class="TreeLabelNameTextHeadline">N18-G990 / M-AN 1015</span>
                                                 </span>
                                             </span>
                                         </div>
@@ -998,7 +1017,7 @@ export default AssetTreeSingleSelectExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">Truck Group South</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
@@ -1022,7 +1041,7 @@ export default AssetTreeSingleSelectExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">All my unassigned Trucks</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
@@ -1071,19 +1090,18 @@ export default AssetTreeSingleSelectExample;
 | --- | --- | --- | --- |
 | fly | boolean | false | Defines if the component will overlap the body content. |
 | resizable | boolean | true | Defines whether or not the sidebar is resizable. |
-| onResizeEnd | Function | () => {} | Callback for when the resize is done. |
 | bordered | boolean | false | Defines whether the component has a border or not. |
-| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
+| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
 | minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |
 | maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |
 | height | number | — | Defines the height of the component in px. |
 | isOpen | boolean | true | Defines whether the component is open or not. |
-| onToggleTree | Function | () => {} | Callback for when the tree visibility is toggled. |
+| onToggleTree | (isOpen: boolean) => void | () => {} | Callback for when the tree visibility is toggled. |
 | currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |
-| onCategoryChange | Function | () => {} | Callback for handling change of category. |
+| onCategoryChange | (selectedCategoryId: string) => void | () => {} | Callback for handling change of category. |
+| onResizeEnd | VoidFunction | () => {} | Callback for when the resize is done. |
 | useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |
-| className | String | — | Additional classes added on the wrapper element. |
-| children | TreeCategory | — | A list of TreeCategory components |
+| className | string | — | Additional classes added on the wrapper element. |
 
 #### Props: TreeCategory
 
@@ -1091,9 +1109,9 @@ export default AssetTreeSingleSelectExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | A unique identifier for that category. |
-| icon | String | — | The rioglyph icon name for that category. |
-| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |
+| id | string | — | A unique identifier for that category. |
+| icon | string | — | The rioglyph icon name for that category. |
+| label | string \| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |
 | hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |
 
 #### Props: Tree
@@ -1102,45 +1120,48 @@ export default AssetTreeSingleSelectExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
-| └id | String | — | A unique identifier of a group. |
-| └name | String | — | The name of a group. |
-| └position | string | — | Can be set to "last" to enforce the last position in the tree. |
-| └disabled | Boolean | — | Disallows the selection of the group itself. |
-| └className | String | — | Additional classes added to the group element. |
-| items | Array of Objects | [] | The list of items. |
-| └id | String | — | A unique identifier of an item. |
-| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |
-| └info | String \| Node | — | The subline of an item. |
-| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix). |
-| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |
-| └icon | string | — | The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted. |
-| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |
-| └groupIds | Array of strings | [] | List of group ids the items is associated with. |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
 | └className | string | — | Additional classes added to the item element. |
-| selectedGroups | Array of strings | — | List of selected group ids. |
-| selectedItems | Array of strings | — | List of selected item ids. |
-| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
 | hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
 | showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
 | hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
 | searchPlaceholder | string | — | The text used as placeholder for the search input. |
-| onSearchChange | Function | — | Callback for when the search value changes. |
-| search | node | — | Used to define custom custom search component which replaces the built-in search. |
-| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
-| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
 | hideSummary | boolean | false | Defines whether a summary is shown. |
+| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
 | hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
-| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
-| scrollHeight | Number | — | Defines the max-height of the scrollable list |
-| expandedGroups | Array of String | — | List of group ids which are expanded. |
-| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
 | showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
-| treeOptions | ReactNode | — | Component to offer customization options for the tree. |
-| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
 | virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
 | overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
-| className | String | — | Additional classes added to the wrapping element. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSearch
 
@@ -1148,10 +1169,10 @@ export default AssetTreeSingleSelectExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| value | String | — | The search value to be shown and used for the search. |
-| onChange | Function | () => {} | Callback for when the search value changes. |
-| placeholder | String | — | The placeholder text used for the input field. |
-| className | String | — | Additional classes added to the wrapping element. |
+| value | string | — | The search value to be shown and used for the search. |
+| onChange | (newValue: string, event: React.ChangeEvent \| React.MouseEvent) => void | () => {} | Callback for when the search value changes. |
+| placeholder | string | — | The placeholder text used for the input field. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummary
 
@@ -1159,13 +1180,14 @@ export default AssetTreeSingleSelectExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| assetCounts | object | — | The object containing various asset type counter. |
-| └truck | number | — | The amount of trucks. |
-| └trailer | number | — | The amount of trailers. |
-| └bus | number | — | The amount of buses. |
-| └van | number | — | The amount of vans. |
-| └driver | number | — | The amount of drivers. |
-| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummaryRow
@@ -1184,12 +1206,12 @@ export default AssetTreeSingleSelectExample;
 | --- | --- | --- | --- |
 | type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
 | icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
-| isActive | Boolean | — | Sets the active styling if active. |
-| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |
-| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
 | hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
-| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the "type" prop is defined to receive the value in the callback and the flag "enableActivity" is set to true otherwise the callback is not triggered. |
-| value | String / Number / Node | — | A custom value to be shown in the counter. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |
 
 #### Props: TreeOption
 
@@ -1197,43 +1219,37 @@ export default AssetTreeSingleSelectExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| isChecked | boolean | — | Defines whether the option is set. |
-| label | string / node | — | The label for the option. |
-| onChange | Function | — | Callback triggered when option is selected. |
+| isChecked | boolean | false | Defines whether the option is set. |
+| onChange | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback triggered when option is selected. |
+| label | string \| React.ReactNode | — | The label for the option. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 ## AssetTree with multiple asset filter in summary
 
-When using fuel filter, please check out the fuel type utils that ease the implementation of mapping vehicle fuel types to common fuel type groups.
-
 ### Example: Example 3
 
+9
 7
-4
 3
-6
+1
 
+8
 7
-5
 1
-4
-3
+2
+2
 
-Mixed Vehicles12
-Vehicle-1219Debug: lpg
-Vehicle-1695Debug: heavy_fuel_oil
-Vehicle-2865Debug: gas
-Vehicle-2935Debug: hydrogen
-Vehicle-4548Debug: lpg
-Vehicle-4993Debug: hydrogen
-Vehicle-5555Debug: heavy_fuel_oil
-Vehicle-7086Debug: diesel
-Vehicle-8678Debug: dual_fuel_diesel_cng
-Vehicle-8791Debug: hydrogen
-Vehicle-9194Debug: lpg
-Vehicle-9266Debug: hydrogen
-
-Ungrouped8
+Mixed Vehicles8
+Vehicle-1670Debug: hydrogen
+Vehicle-2011Debug: diesel
+Vehicle-3346Debug: dual_fuel_diesel_cng
+Vehicle-3670Debug: lpg
+Vehicle-5464Debug: cng
+Vehicle-6229Debug: lpg
+Vehicle-6521Debug: cng
+Vehicle-7377Debug: gas
+
+Ungrouped12
 
 Selected groups:
 
@@ -1244,32 +1260,28 @@ Mixed Vehicles
 
 #### Summary
 
+9
 7
-4
 3
-6
+1
 
+8
 7
-5
 1
-4
-3
+2
+2
+
+Mixed Vehicles8
+Vehicle-1670Debug: hydrogen
+Vehicle-2011Debug: diesel
+Vehicle-3346Debug: dual_fuel_diesel_cng
+Vehicle-3670Debug: lpg
+Vehicle-5464Debug: cng
+Vehicle-6229Debug: lpg
+Vehicle-6521Debug: cng
+Vehicle-7377Debug: gas
 
-Mixed Vehicles12
-Vehicle-1219Debug: lpg
-Vehicle-1695Debug: heavy_fuel_oil
-Vehicle-2865Debug: gas
-Vehicle-2935Debug: hydrogen
-Vehicle-4548Debug: lpg
-Vehicle-4993Debug: hydrogen
-Vehicle-5555Debug: heavy_fuel_oil
-Vehicle-7086Debug: diesel
-Vehicle-8678Debug: dual_fuel_diesel_cng
-Vehicle-8791Debug: hydrogen
-Vehicle-9194Debug: lpg
-Vehicle-9266Debug: hydrogen
-
-Ungrouped8
+Ungrouped12
 
 Selected groups:
 
@@ -1283,7 +1295,7 @@ Mixed Vehicles
 ```tsx
 import { useMemo, useState } from 'react';
 import { isEmpty, random } from 'es-toolkit/compat';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 
 import AssetTree from '@rio-cloud/rio-uikit/AssetTree';
 import TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';
@@ -1334,15 +1346,15 @@ const fuelTypes = ['diesel', 'electric', 'gas', 'hydrogen', 'cng', 'lpg', 'dual_
 
 const getVehicles = (withSubType = true): TreeItem[] =>
     Array.from({ length: 20 }, (_, index) => {
-        const fuelType = withSubType ? faker.random.arrayElement(fuelTypes) : undefined;
+        const fuelType = withSubType ? faker.helpers.arrayElement(fuelTypes) : undefined;
         return {
             id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,
             name: `Vehicle-${random(1000, 9999)}`,
             info: <span>Debug: {fuelType}</span>,
-            type: faker.random.arrayElement(assetTypes),
+            type: faker.helpers.arrayElement(assetTypes),
             subType: fuelType, // subType cannot be used as icon here anymore
             pairIcon: getFuelIcon(fuelType),
-            groupIds: [faker.random.arrayElement(truckGroups).id],
+            groupIds: [faker.helpers.arrayElement(truckGroups).id],
         };
     });
 
@@ -1604,12 +1616,12 @@ export default AssetTreeExample;
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-truck-baseline text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">9</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-bus-baseline text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-van-baseline text-size-16 margin-right-2">
@@ -1619,19 +1631,19 @@ export default AssetTreeExample;
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-car-baseline text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">6</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
                                                     </div>
                                                 </div>
                                                 <div class="TreeSummaryRow display-grid grid-cols-4 gap-10">
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-fuel-liquid text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">8</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-fuel-gas text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">7</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-fuel-electric text-size-16 margin-right-2">
@@ -1641,19 +1653,19 @@ export default AssetTreeExample;
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-fuel-hydrogen text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">4</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
                                                     </div>
                                                     <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                         <span class="rioglyph rioglyph-fuel-mix text-size-16 margin-right-2">
                                                         </span>
-                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">3</span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
                                                     </div>
                                                 </div>
                                             </div>
                                         </div>
                                         <div>
                                             <div class="dropdown btn-group TreeHeaderOptions height-20">
-                                                <button type="button" id="9bc9newyu7d" 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">
+                                                <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">
                                                     <span class="rioglyph rioglyph-option-vertical" aria-hidden="true">
                                                     </span>
                                                 </button>
@@ -1673,32 +1685,11 @@ export default AssetTreeExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">Mixed Vehicles</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">12</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
-                                            <label class="checkbox TreeCheckbox" tabindex="0">
-                                                <input type="checkbox" class="TreeCheckbox">
-                                                <span class="checkbox-text">
-                                                </span>
-                                            </label>
-                                            <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-truck">
-                                                    </span>
-                                                    <span class="rioglyph rioglyph-fuel-gas">
-                                                    </span>
-                                                </span>
-                                                <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-1219</span>
-                                                    <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: lpg</span>
-                                                    </span>
-                                                </span>
-                                            </span>
-                                        </div>
                                         <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d978">
                                             <label class="checkbox TreeCheckbox" tabindex="0">
                                                 <input type="checkbox" class="TreeCheckbox">
@@ -1707,20 +1698,20 @@ export default AssetTreeExample;
                                             </label>
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-car">
+                                                    <span class="rioglyph rioglyph-van">
                                                     </span>
-                                                    <span class="rioglyph rioglyph-fuel-liquid">
+                                                    <span class="rioglyph rioglyph-fuel-hydrogen">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-1695</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-1670</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: heavy_fuel_oil</span>
+                                                        <span>Debug: hydrogen</span>
                                                     </span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9718">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
                                             <label class="checkbox TreeCheckbox" tabindex="0">
                                                 <input type="checkbox" class="TreeCheckbox">
                                                 <span class="checkbox-text">
@@ -1728,20 +1719,20 @@ export default AssetTreeExample;
                                             </label>
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-car">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
                                                     <span class="rioglyph rioglyph-fuel-liquid">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-2865</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-2011</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: gas</span>
+                                                        <span>Debug: diesel</span>
                                                     </span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9714">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9715">
                                             <label class="checkbox TreeCheckbox" tabindex="0">
                                                 <input type="checkbox" class="TreeCheckbox">
                                                 <span class="checkbox-text">
@@ -1751,13 +1742,13 @@ export default AssetTreeExample;
                                                 <span class="rioglyph-icon-pair">
                                                     <span class="rioglyph rioglyph-truck">
                                                     </span>
-                                                    <span class="rioglyph rioglyph-fuel-hydrogen">
+                                                    <span class="rioglyph rioglyph-fuel-mix">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-2935</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-3346</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: hydrogen</span>
+                                                        <span>Debug: dual_fuel_diesel_cng</span>
                                                     </span>
                                                 </span>
                                             </span>
@@ -1770,13 +1761,13 @@ export default AssetTreeExample;
                                             </label>
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-truck">
+                                                    <span class="rioglyph rioglyph-bus">
                                                     </span>
                                                     <span class="rioglyph rioglyph-fuel-gas">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-4548</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-3670</span>
                                                     <span class="TreeLabelNameTextSubline">
                                                         <span>Debug: lpg</span>
                                                     </span>
@@ -1791,36 +1782,15 @@ export default AssetTreeExample;
                                             </label>
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-bus">
-                                                    </span>
-                                                    <span class="rioglyph rioglyph-fuel-hydrogen">
-                                                    </span>
-                                                </span>
-                                                <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-4993</span>
-                                                    <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: hydrogen</span>
-                                                    </span>
-                                                </span>
-                                            </span>
-                                        </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d973">
-                                            <label class="checkbox TreeCheckbox" tabindex="0">
-                                                <input type="checkbox" class="TreeCheckbox">
-                                                <span class="checkbox-text">
-                                                </span>
-                                            </label>
-                                            <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-car">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
-                                                    <span class="rioglyph rioglyph-fuel-liquid">
+                                                    <span class="rioglyph rioglyph-fuel-gas">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-5555</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-5464</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: heavy_fuel_oil</span>
+                                                        <span>Debug: cng</span>
                                                     </span>
                                                 </span>
                                             </span>
@@ -1833,15 +1803,15 @@ export default AssetTreeExample;
                                             </label>
                                             <span class="TreeLabel TreeLabelName">
                                                 <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-car">
+                                                    <span class="rioglyph rioglyph-truck">
                                                     </span>
-                                                    <span class="rioglyph rioglyph-fuel-liquid">
+                                                    <span class="rioglyph rioglyph-fuel-gas">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-7086</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-6229</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: diesel</span>
+                                                        <span>Debug: lpg</span>
                                                     </span>
                                                 </span>
                                             </span>
@@ -1856,60 +1826,18 @@ export default AssetTreeExample;
                                                 <span class="rioglyph-icon-pair">
                                                     <span class="rioglyph rioglyph-bus">
                                                     </span>
-                                                    <span class="rioglyph rioglyph-fuel-mix">
-                                                    </span>
-                                                </span>
-                                                <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-8678</span>
-                                                    <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: dual_fuel_diesel_cng</span>
-                                                    </span>
-                                                </span>
-                                            </span>
-                                        </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
-                                            <label class="checkbox TreeCheckbox" tabindex="0">
-                                                <input type="checkbox" class="TreeCheckbox">
-                                                <span class="checkbox-text">
-                                                </span>
-                                            </label>
-                                            <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-bus">
-                                                    </span>
-                                                    <span class="rioglyph rioglyph-fuel-hydrogen">
-                                                    </span>
-                                                </span>
-                                                <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-8791</span>
-                                                    <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: hydrogen</span>
-                                                    </span>
-                                                </span>
-                                            </span>
-                                        </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d972">
-                                            <label class="checkbox TreeCheckbox" tabindex="0">
-                                                <input type="checkbox" class="TreeCheckbox">
-                                                <span class="checkbox-text">
-                                                </span>
-                                            </label>
-                                            <span class="TreeLabel TreeLabelName">
-                                                <span class="rioglyph-icon-pair">
-                                                    <span class="rioglyph rioglyph-van">
-                                                    </span>
                                                     <span class="rioglyph rioglyph-fuel-gas">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-9194</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-6521</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: lpg</span>
+                                                        <span>Debug: cng</span>
                                                     </span>
                                                 </span>
                                             </span>
                                         </div>
-                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d974">
+                                        <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d9719">
                                             <label class="checkbox TreeCheckbox" tabindex="0">
                                                 <input type="checkbox" class="TreeCheckbox">
                                                 <span class="checkbox-text">
@@ -1919,13 +1847,13 @@ export default AssetTreeExample;
                                                 <span class="rioglyph-icon-pair">
                                                     <span class="rioglyph rioglyph-truck">
                                                     </span>
-                                                    <span class="rioglyph rioglyph-fuel-hydrogen">
+                                                    <span class="rioglyph rioglyph-fuel-liquid">
                                                     </span>
                                                 </span>
                                                 <span class="TreeLabelNameText">
-                                                    <span class="TreeLabelNameTextHeadline">Vehicle-9266</span>
+                                                    <span class="TreeLabelNameTextHeadline">Vehicle-7377</span>
                                                     <span class="TreeLabelNameTextSubline">
-                                                        <span>Debug: hydrogen</span>
+                                                        <span>Debug: gas</span>
                                                     </span>
                                                 </span>
                                             </span>
@@ -1942,7 +1870,7 @@ export default AssetTreeExample;
                                                 <span class="TreeLabelNameText">
                                                     <span class="TreeLabelNameTextHeadline">Ungrouped</span>
                                                 </span>
-                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
+                                                <span class="TreeLabelCount label label-muted label-filled label-condensed">12</span>
                                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                 </span>
                                             </span>
@@ -1989,19 +1917,18 @@ export default AssetTreeExample;
 | --- | --- | --- | --- |
 | fly | boolean | false | Defines if the component will overlap the body content. |
 | resizable | boolean | true | Defines whether or not the sidebar is resizable. |
-| onResizeEnd | Function | () => {} | Callback for when the resize is done. |
 | bordered | boolean | false | Defines whether the component has a border or not. |
-| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
+| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
 | minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |
 | maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |
 | height | number | — | Defines the height of the component in px. |
 | isOpen | boolean | true | Defines whether the component is open or not. |
-| onToggleTree | Function | () => {} | Callback for when the tree visibility is toggled. |
+| onToggleTree | (isOpen: boolean) => void | () => {} | Callback for when the tree visibility is toggled. |
 | currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |
-| onCategoryChange | Function | () => {} | Callback for handling change of category. |
+| onCategoryChange | (selectedCategoryId: string) => void | () => {} | Callback for handling change of category. |
+| onResizeEnd | VoidFunction | () => {} | Callback for when the resize is done. |
 | useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |
-| className | String | — | Additional classes added on the wrapper element. |
-| children | TreeCategory | — | A list of TreeCategory components |
+| className | string | — | Additional classes added on the wrapper element. |
 
 #### Props: TreeCategory
 
@@ -2009,9 +1936,9 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | A unique identifier for that category. |
-| icon | String | — | The rioglyph icon name for that category. |
-| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |
+| id | string | — | A unique identifier for that category. |
+| icon | string | — | The rioglyph icon name for that category. |
+| label | string \| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |
 | hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |
 
 #### Props: Tree
@@ -2020,45 +1947,48 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
-| └id | String | — | A unique identifier of a group. |
-| └name | String | — | The name of a group. |
-| └position | string | — | Can be set to "last" to enforce the last position in the tree. |
-| └disabled | Boolean | — | Disallows the selection of the group itself. |
-| └className | String | — | Additional classes added to the group element. |
-| items | Array of Objects | [] | The list of items. |
-| └id | String | — | A unique identifier of an item. |
-| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |
-| └info | String \| Node | — | The subline of an item. |
-| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix). |
-| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |
-| └icon | string | — | The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted. |
-| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |
-| └groupIds | Array of strings | [] | List of group ids the items is associated with. |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
 | └className | string | — | Additional classes added to the item element. |
-| selectedGroups | Array of strings | — | List of selected group ids. |
-| selectedItems | Array of strings | — | List of selected item ids. |
-| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
 | hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
 | showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
 | hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
 | searchPlaceholder | string | — | The text used as placeholder for the search input. |
-| onSearchChange | Function | — | Callback for when the search value changes. |
-| search | node | — | Used to define custom custom search component which replaces the built-in search. |
-| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
-| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
 | hideSummary | boolean | false | Defines whether a summary is shown. |
+| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
 | hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
-| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
-| scrollHeight | Number | — | Defines the max-height of the scrollable list |
-| expandedGroups | Array of String | — | List of group ids which are expanded. |
-| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
 | showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
-| treeOptions | ReactNode | — | Component to offer customization options for the tree. |
-| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
 | virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
 | overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
-| className | String | — | Additional classes added to the wrapping element. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSearch
 
@@ -2066,10 +1996,10 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| value | String | — | The search value to be shown and used for the search. |
-| onChange | Function | () => {} | Callback for when the search value changes. |
-| placeholder | String | — | The placeholder text used for the input field. |
-| className | String | — | Additional classes added to the wrapping element. |
+| value | string | — | The search value to be shown and used for the search. |
+| onChange | (newValue: string, event: React.ChangeEvent \| React.MouseEvent) => void | () => {} | Callback for when the search value changes. |
+| placeholder | string | — | The placeholder text used for the input field. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummary
 
@@ -2077,13 +2007,14 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| assetCounts | object | — | The object containing various asset type counter. |
-| └truck | number | — | The amount of trucks. |
-| └trailer | number | — | The amount of trailers. |
-| └bus | number | — | The amount of buses. |
-| └van | number | — | The amount of vans. |
-| └driver | number | — | The amount of drivers. |
-| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummaryRow
@@ -2102,12 +2033,12 @@ export default AssetTreeExample;
 | --- | --- | --- | --- |
 | type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
 | icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
-| isActive | Boolean | — | Sets the active styling if active. |
-| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |
-| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
 | hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
-| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the "type" prop is defined to receive the value in the callback and the flag "enableActivity" is set to true otherwise the callback is not triggered. |
-| value | String / Number / Node | — | A custom value to be shown in the counter. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |
 
 #### Props: TreeOption
 
@@ -2115,9 +2046,9 @@ export default AssetTreeExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| isChecked | boolean | — | Defines whether the option is set. |
-| label | string / node | — | The label for the option. |
-| onChange | Function | — | Callback triggered when option is selected. |
+| isChecked | boolean | false | Defines whether the option is set. |
+| onChange | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback triggered when option is selected. |
+| label | string \| React.ReactNode | — | The label for the option. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 ## AssetTree with custom summary
@@ -2393,19 +2324,18 @@ export default AssetTreeWithCustomSummaryExample;
 | --- | --- | --- | --- |
 | fly | boolean | false | Defines if the component will overlap the body content. |
 | resizable | boolean | true | Defines whether or not the sidebar is resizable. |
-| onResizeEnd | Function | () => {} | Callback for when the resize is done. |
 | bordered | boolean | false | Defines whether the component has a border or not. |
-| width | string / number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
+| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
 | minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |
 | maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |
 | height | number | — | Defines the height of the component in px. |
 | isOpen | boolean | true | Defines whether the component is open or not. |
-| onToggleTree | Function | () => {} | Callback for when the tree visibility is toggled. |
+| onToggleTree | (isOpen: boolean) => void | () => {} | Callback for when the tree visibility is toggled. |
 | currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |
-| onCategoryChange | Function | () => {} | Callback for handling change of category. |
+| onCategoryChange | (selectedCategoryId: string) => void | () => {} | Callback for handling change of category. |
+| onResizeEnd | VoidFunction | () => {} | Callback for when the resize is done. |
 | useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |
-| className | String | — | Additional classes added on the wrapper element. |
-| children | TreeCategory | — | A list of TreeCategory components |
+| className | string | — | Additional classes added on the wrapper element. |
 
 #### Props: TreeCategory
 
@@ -2413,9 +2343,9 @@ export default AssetTreeWithCustomSummaryExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| id | String | — | A unique identifier for that category. |
-| icon | String | — | The rioglyph icon name for that category. |
-| label | String / Node | — | The optional label for the category which will be shown in a tooltip. |
+| id | string | — | A unique identifier for that category. |
+| icon | string | — | The rioglyph icon name for that category. |
+| label | string \| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |
 | hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |
 
 #### Props: Tree
@@ -2424,45 +2354,375 @@ export default AssetTreeWithCustomSummaryExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
-| └id | String | — | A unique identifier of a group. |
-| └name | String | — | The name of a group. |
-| └position | string | — | Can be set to "last" to enforce the last position in the tree. |
-| └disabled | Boolean | — | Disallows the selection of the group itself. |
-| └className | String | — | Additional classes added to the group element. |
-| items | Array of Objects | [] | The list of items. |
-| └id | String | — | A unique identifier of an item. |
-| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |
-| └info | String \| Node | — | The subline of an item. |
-| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix). |
-| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |
-| └icon | string | — | The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted. |
-| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |
-| └groupIds | Array of strings | [] | List of group ids the items is associated with. |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
 | └className | string | — | Additional classes added to the item element. |
-| selectedGroups | Array of strings | — | List of selected group ids. |
-| selectedItems | Array of strings | — | List of selected item ids. |
-| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
 | hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
 | showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
 | hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
 | searchPlaceholder | string | — | The text used as placeholder for the search input. |
-| onSearchChange | Function | — | Callback for when the search value changes. |
-| search | node | — | Used to define custom custom search component which replaces the built-in search. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| hideSummary | boolean | false | Defines whether a summary is shown. |
 | onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
-| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
+| showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
+| virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
+| overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
+| className | string | — | Additional classes added to the wrapping element. |
+
+#### Props: TreeSearch
+
+### TreeSearch
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| value | string | — | The search value to be shown and used for the search. |
+| onChange | (newValue: string, event: React.ChangeEvent \| React.MouseEvent) => void | () => {} | Callback for when the search value changes. |
+| placeholder | string | — | The placeholder text used for the input field. |
+| className | string | — | Additional classes added to the wrapping element. |
+
+#### Props: TreeSummary
+
+### TreeSummary
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
+| className | string | — | Additional classes added to the wrapping element. |
+
+#### Props: TreeSummaryRow
+
+### TreeSummaryRow
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| gridCols | number | 4 | Defined the number of grid columns for a single row. Note, when the amount of children exceed the columns it will wrap around to a new line. |
+
+#### Props: TypeCounter
+
+### TypeCounter
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
+| icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |
+
+#### Props: TreeOption
+
+### TreeOption
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| isChecked | boolean | false | Defines whether the option is set. |
+| onChange | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback triggered when option is selected. |
+| label | string \| React.ReactNode | — | The label for the option. |
+| className | string | — | Additional classes added to the wrapping element. |
+
+## Tree with custom icons
+
+### Example: Tree with header and search
+
+Tree with header and search
+
+20
+
+Group 014
+
+Group 026
+
+Group 0310
+
+#### Summary
+
+Tree with header and search
+
+20
+
+Group 014
+
+Group 026
+
+Group 0310
+
+#### React (tsx)
+
+```tsx
+import { useState } from 'react';
+import { random } from 'es-toolkit/compat';
+import { faker } from '@faker-js/faker';
+
+import Tree, { type TreeItem, type TreeGroup, type SelectionChangeResponse } from '@rio-cloud/rio-uikit/Tree';
+import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
+
+const groups: TreeGroup[] = [
+    {
+        id: '1',
+        name: 'Group 01',
+        icon: 'https://cdn.rio.cloud/images/uikit/react_logo.svg',
+    },
+    {
+        id: '2',
+        name: 'Group 02',
+        icon: 'https://cdn.rio.cloud/images/uikit/react_logo.svg',
+    },
+    {
+        id: '3',
+        name: 'Group 03',
+        icon: 'https://cdn.rio.cloud/svg/common/ico_rio_colored.svg',
+    },
+];
+
+const treeItems: TreeItem[] = Array.from({ length: 20 }, (_, index) => ({
+    id: `${index}`,
+    name: `${faker.lorem.words()} ${random(100, 999)}`,
+    type: 'files',
+    icon: 'https://cdn.rio.cloud/svg/common/ico_rio_colored.svg',
+    groupIds: [faker.helpers.arrayElement(groups).id],
+}));
+
+export default () => {
+    const [selectedItemIds, setSelectedItemIds] = useState<string[]>([]);
+    const [expandedGroups, setExpandedGroups] = useState<string[]>([]);
+
+    const handleSelection = ({ items }: SelectionChangeResponse) => {
+        setSelectedItemIds(items);
+    };
+
+    const handleExpandGroups = (newExpandedGroups: string[]) => setExpandedGroups(newExpandedGroups);
+
+    return (
+        <div className='display-flex flex-wrap gap-25 overflow-auto'>
+            <LabeledElement label='Tree with header and search'>
+                <div className='width-500 border border-color-lighter border-bottom-none'>
+                    <Tree
+                        groups={groups}
+                        items={treeItems}
+                        expandedGroups={expandedGroups}
+                        onExpandGroupsChange={handleExpandGroups}
+                        selectedItems={selectedItemIds}
+                        onSelectionChange={handleSelection}
+                        searchPlaceholder='Find items'
+                        scrollHeight={300}
+                        hasMultiselect={false}
+                    />
+                </div>
+            </LabeledElement>
+        </div>
+    );
+};
+```
+
+#### HTML (html)
+
+```html
+<div class="display-flex flex-wrap gap-25 overflow-auto">
+    <div class="LabeledElement display-flex flex-column">
+        <div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Tree with header and search</div>
+        <div class="width-500 border border-color-lighter border-bottom-none">
+            <div class="Tree">
+                <div class="TreeHeader">
+                    <div class="TreeSearch">
+                        <div class="input-group flex-1-0">
+                            <span class="input-group-addon">
+                                <span class="rioglyph rioglyph-search" aria-hidden="true">
+                                </span>
+                            </span>
+                            <div class="ClearableInput input-group">
+                                <input placeholder="Find items" class="form-control" type="text" tabindex="0" value="">
+                                <span class="clearButton hide">
+                                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                    </span>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="TreeHead display-flex gap-5 padding-15">
+                        <div class="border border-right-only hidden-empty padding-right-10 margin-right-2">
+                        </div>
+                        <div class="display-flex justify-content-between align-items-start width-100pct">
+                            <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
+                                <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none">
+                                    <span class="rioglyph rioglyph-files text-size-16 margin-right-2">
+                                    </span>
+                                    <span class="TreeLabelCount label label-condensed label-muted label-filled">20</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="TreeRoot user-select-none overflow-auto" style="max-height: 300px; position: relative;">
+                    <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="1">
+                        <div class="TreeNode from-group" data-key="1">
+                            <span class="TreeLabel TreeLabelName">
+                                <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
+                                    <img src="https://cdn.rio.cloud/images/uikit/react_logo.svg" style="max-width: 100%; max-height: 100%;">
+                                </div>
+                                <span class="TreeLabelNameText">
+                                    <span class="TreeLabelNameTextHeadline">Group 01</span>
+                                </span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
+                                <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="2">
+                        <div class="TreeNode from-group" data-key="2">
+                            <span class="TreeLabel TreeLabelName">
+                                <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
+                                    <img src="https://cdn.rio.cloud/images/uikit/react_logo.svg" style="max-width: 100%; max-height: 100%;">
+                                </div>
+                                <span class="TreeLabelNameText">
+                                    <span class="TreeLabelNameTextHeadline">Group 02</span>
+                                </span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
+                                <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="3">
+                        <div class="TreeNode from-group" data-key="3">
+                            <span class="TreeLabel TreeLabelName">
+                                <div class="display-grid place-items-center margin-right-5" style="width: 18px; height: 18px;">
+                                    <img src="https://cdn.rio.cloud/svg/common/ico_rio_colored.svg" style="max-width: 100%; max-height: 100%;">
+                                </div>
+                                <span class="TreeLabelNameText">
+                                    <span class="TreeLabelNameTextHeadline">Group 03</span>
+                                </span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">10</span>
+                                <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
+                                </span>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: AssetTree
+
+### AssetTree
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| fly | boolean | false | Defines if the component will overlap the body content. |
+| resizable | boolean | true | Defines whether or not the sidebar is resizable. |
+| bordered | boolean | false | Defines whether the component has a border or not. |
+| width | number | 350 | Defines the width of the component. The value is set as inline style. Note: when component is resizable it will take the provided width in px only and convert it to number in case. |
+| minWidth | number | 100 | Defines the minimum width of the component in px that will take effect when resizing. |
+| maxWidth | number | 0 | Defines the maximum width of the component in px that will take effect when resizing. |
+| height | number | — | Defines the height of the component in px. |
+| isOpen | boolean | true | Defines whether the component is open or not. |
+| onToggleTree | (isOpen: boolean) => void | () => {} | Callback for when the tree visibility is toggled. |
+| currentCategoryId | string | — | The id of the category which is currently active and shall be shown. |
+| onCategoryChange | (selectedCategoryId: string) => void | () => {} | Callback for handling change of category. |
+| onResizeEnd | VoidFunction | () => {} | Callback for when the resize is done. |
+| useOffscreen | boolean | false | Defines whether the tree components are rendered offscreen and kept mounted in the DOM. |
+| className | string | — | Additional classes added on the wrapper element. |
+
+#### Props: TreeCategory
+
+### TreeCategory
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| id | string | — | A unique identifier for that category. |
+| icon | string | — | The rioglyph icon name for that category. |
+| label | string \| React.ReactNode | — | The optional label for the category which will be shown in a tooltip. |
+| hasSelection | boolean | — | Defines whether or not a selection indicator should be shown. |
+
+#### Props: Tree
+
+### Tree
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
+| └className | string | — | Additional classes added to the item element. |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
+| showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
+| hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
+| searchPlaceholder | string | — | The text used as placeholder for the search input. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
 | hideSummary | boolean | false | Defines whether a summary is shown. |
+| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
 | hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
-| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
-| scrollHeight | Number | — | Defines the max-height of the scrollable list |
-| expandedGroups | Array of String | — | List of group ids which are expanded. |
-| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
 | showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
-| treeOptions | ReactNode | — | Component to offer customization options for the tree. |
-| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
 | virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
 | overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
-| className | String | — | Additional classes added to the wrapping element. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSearch
 
@@ -2470,10 +2730,10 @@ export default AssetTreeWithCustomSummaryExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| value | String | — | The search value to be shown and used for the search. |
-| onChange | Function | () => {} | Callback for when the search value changes. |
-| placeholder | String | — | The placeholder text used for the input field. |
-| className | String | — | Additional classes added to the wrapping element. |
+| value | string | — | The search value to be shown and used for the search. |
+| onChange | (newValue: string, event: React.ChangeEvent \| React.MouseEvent) => void | () => {} | Callback for when the search value changes. |
+| placeholder | string | — | The placeholder text used for the input field. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummary
 
@@ -2481,13 +2741,14 @@ export default AssetTreeWithCustomSummaryExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| assetCounts | object | — | The object containing various asset type counter. |
-| └truck | number | — | The amount of trucks. |
-| └trailer | number | — | The amount of trailers. |
-| └bus | number | — | The amount of buses. |
-| └van | number | — | The amount of vans. |
-| └driver | number | — | The amount of drivers. |
-| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TreeSummaryRow
@@ -2506,12 +2767,12 @@ export default AssetTreeWithCustomSummaryExample;
 | --- | --- | --- | --- |
 | type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
 | icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
-| isActive | Boolean | — | Sets the active styling if active. |
-| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |
-| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
 | hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
-| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the "type" prop is defined to receive the value in the callback and the flag "enableActivity" is set to true otherwise the callback is not triggered. |
-| value | String / Number / Node | — | A custom value to be shown in the counter. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |
 
 #### Props: TreeOption
 
@@ -2519,9 +2780,9 @@ export default AssetTreeWithCustomSummaryExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| isChecked | boolean | — | Defines whether the option is set. |
-| label | string / node | — | The label for the option. |
-| onChange | Function | — | Callback triggered when option is selected. |
+| isChecked | boolean | false | Defines whether the option is set. |
+| onChange | (event: React.MouseEvent<HTMLDivElement>) => void | — | Callback triggered when option is selected. |
+| label | string \| React.ReactNode | — | The label for the option. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 ## Tree
@@ -2532,13 +2793,13 @@ Tree with header and search
 
 20
 
-Folder 015
+Folder 017
 
 Folder 024
 
-Folder 034
+Folder 035
 
-Folder 047
+Folder 044
 
 Selected items:
 
@@ -2550,13 +2811,13 @@ Tree with header and search
 
 20
 
-Folder 015
+Folder 017
 
 Folder 024
 
-Folder 034
+Folder 035
 
-Folder 047
+Folder 044
 
 Selected items:
 
@@ -2567,7 +2828,7 @@ Expanded folders:
 ```tsx
 import { useState } from 'react';
 import { random } from 'es-toolkit/compat';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 
 import Tree, { type TreeItem, type TreeGroup, type SelectionChangeResponse } from '@rio-cloud/rio-uikit/Tree';
 import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
@@ -2597,11 +2858,11 @@ const folders: TreeGroup[] = [
 
 const treeItems: TreeItem[] = Array.from({ length: 20 }, (_, index) => ({
     id: `${index}`,
-    name: `${faker.random.words()} ${random(100, 999)}`,
+    name: `${faker.lorem.words()} ${random(100, 999)}`,
     type: 'files',
     icon: 'files',
     // icon: null,  // Set to "null" to omit the icon
-    groupIds: [faker.random.arrayElement(folders).id],
+    groupIds: [faker.helpers.arrayElement(folders).id],
 }));
 
 const TreeOnlyExample = () => {
@@ -2701,7 +2962,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 01</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -2729,7 +2990,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 03</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -2743,7 +3004,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 04</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -2764,61 +3025,66 @@ export default TreeOnlyExample;
 </div>
 ```
 
-#### Props
+#### Props: Tree
+
+### Tree
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
-| └id | String | — | A unique identifier of a group. |
-| └name | String | — | The name of a group. |
-| └position | string | — | Can be set to "last" to enforce the last position in the tree. |
-| └disabled | Boolean | — | Disallows the selection of the group itself. |
-| └className | String | — | Additional classes added to the group element. |
-| items | Array of Objects | [] | The list of items. |
-| └id | String | — | A unique identifier of an item. |
-| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |
-| └info | String \| Node | — | The subline of an item. |
-| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix). |
-| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |
-| └icon | string | — | The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted. |
-| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |
-| └groupIds | Array of strings | [] | List of group ids the items is associated with. |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
 | └className | string | — | Additional classes added to the item element. |
-| selectedGroups | Array of strings | — | List of selected group ids. |
-| selectedItems | Array of strings | — | List of selected item ids. |
-| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
 | hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
 | showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
 | hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
 | searchPlaceholder | string | — | The text used as placeholder for the search input. |
-| onSearchChange | Function | — | Callback for when the search value changes. |
-| search | node | — | Used to define custom custom search component which replaces the built-in search. |
-| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
-| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
 | hideSummary | boolean | false | Defines whether a summary is shown. |
+| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
 | hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
-| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
-| scrollHeight | Number | — | Defines the max-height of the scrollable list |
-| expandedGroups | Array of String | — | List of group ids which are expanded. |
-| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
 | showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
-| treeOptions | ReactNode | — | Component to offer customization options for the tree. |
-| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
 | virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
 | overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
-| className | String | — | Additional classes added to the wrapping element. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 ### Example: Tree without header and search
 
 Tree without header and search
 
-Folder 017
+Folder 012
 
-Folder 024
+Folder 028
 
-Folder 036
+Folder 034
 
-Folder 043
+Folder 046
 
 Selected items:
 
@@ -2828,13 +3094,13 @@ Expanded folders:
 
 Tree without header and search
 
-Folder 017
+Folder 012
 
-Folder 024
+Folder 028
 
-Folder 036
+Folder 034
 
-Folder 043
+Folder 046
 
 Selected items:
 
@@ -2845,7 +3111,7 @@ Expanded folders:
 ```tsx
 import { useState } from 'react';
 import { random } from 'es-toolkit/compat';
-import faker from 'faker';
+import { faker } from '@faker-js/faker';
 
 import Tree, { type TreeItem, type TreeGroup, type SelectionChangeResponse } from '@rio-cloud/rio-uikit/Tree';
 import LabeledElement from '@rio-cloud/rio-uikit/LabeledElement';
@@ -2879,10 +3145,10 @@ const folders2: TreeGroup[] = [
 
 const treeItems2: TreeItem[] = Array.from({ length: 20 }, (_, index) => ({
     id: `${index}`,
-    name: `${faker.random.words()} ${random(100, 999)}`,
+    name: `${faker.lorem.words()} ${random(100, 999)}`,
     type: 'files',
     icon: null, // Set to "null" to omit the icon
-    groupIds: [faker.random.arrayElement(folders2).id],
+    groupIds: [faker.helpers.arrayElement(folders2).id],
 }));
 
 const TreeOnlyExample = () => {
@@ -2955,7 +3221,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 01</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">7</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">2</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -2969,7 +3235,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 02</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -2983,7 +3249,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 03</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">4</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -2997,7 +3263,7 @@ export default TreeOnlyExample;
                                 <span class="TreeLabelNameText">
                                     <span class="TreeLabelNameTextHeadline">Folder 04</span>
                                 </span>
-                                <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
+                                <span class="TreeLabelCount label label-muted label-filled label-condensed">6</span>
                                 <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                 </span>
                             </span>
@@ -3018,53 +3284,58 @@ export default TreeOnlyExample;
 </div>
 ```
 
-#### Props
+#### Props: Tree
+
+### Tree
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| groups | Array of objects | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
-| └id | String | — | A unique identifier of a group. |
-| └name | String | — | The name of a group. |
-| └position | string | — | Can be set to "last" to enforce the last position in the tree. |
-| └disabled | Boolean | — | Disallows the selection of the group itself. |
-| └className | String | — | Additional classes added to the group element. |
-| items | Array of Objects | [] | The list of items. |
-| └id | String | — | A unique identifier of an item. |
-| └name | string / object | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory |
-| └info | String \| Node | — | The subline of an item. |
-| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the `rioglyph-` prefix). |
-| └subType | string | — | The sub type of an item which is also the name of the respective rioglyph icon without the prefix. This could be used to show a secondary paired icon like for fuel type. |
-| └icon | string | — | The rioglyph icon name for a group. The prefix `rioglyph-` can be omitted. |
-| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. `'truck'`), this icon will be used explicitly. If set to `undefined`, the `type` property will be used as the fallback icon. If set to `null`, no icon will be rendered, even if `type` is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. |
-| └groupIds | Array of strings | [] | List of group ids the items is associated with. |
+| groups | TreeGroup[] | [] | The list of groups of the items. If no groups are provided all items are rendered as flat list. |
+| └id | string | — | A unique identifier of a group. |
+| └name | string \| React.ReactNode | — | The name of a group. |
+| └position | 'last' | — | Can be set to "last" to enforce the last position in the tree. |
+| └disabled | boolean | — | Disallows the selection of the group itself. |
+| └icon | string | — | The rioglyph icon name for a group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └expandedIcon | string | — | The rioglyph icon name for a expanded group. The prefix rioglyph- can be omitted. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └className | string | — | Additional classes added to the group element. |
+| items | TreeItem[] | [] | The list of items. |
+| └id | string | — | A unique identifier of an item. |
+| └name | string \| TreeItemName | — | The name of an item. Either it is a plain string or an object composed of: firstName and lastName where lastName is mandatory. |
+| └info | string \| React.ReactNode | — | The subline of an item. This can e used to show additional information for that item. |
+| └type | string | — | The primary type of the item. This is also used as the fallback icon name and refers to the name of the respective rioglyph icon (excluding the rioglyph- prefix). |
+| └icon | string \| null | — | Optional icon override for the item. If set to a string (e.g. 'truck'), this icon will be used explicitly. If set to undefined, the type property will be used as the fallback icon. If set to null, no icon will be rendered, even if type is defined. This allows full control over the icon behavior while maintaining backward compatibility with type-based icons. For custom icons and logos, provide an image URL with one of these extensions: .png, .webp, .jpg, .jpeg, .svg. In this case, an img tag is rendered instead of the rioglyph. |
+| └subType | string | — | Optional sub-type of the item. This refers to the name of an additional rioglyph icon (excluding the rioglyph- prefix), typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop). |
+| └pairIcon | string \| null \| undefined | — | Optional pair icon override for the subType. If set to a string (e.g. 'fuel-gas'), this icon will be used explicitly. If set to undefined, the subType property will be used as the fallback icon. If set to null, no icon will be rendered, even if subType is defined. This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons. |
+| └groupIds | string[] | [] | List of group ids the items is associated with. |
 | └className | string | — | Additional classes added to the item element. |
-| selectedGroups | Array of strings | — | List of selected group ids. |
-| selectedItems | Array of strings | — | List of selected item ids. |
-| onSelectionChange | Function | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
+| selectedGroups | string[] | [] | List of selected group ids. |
+| selectedItems | string[] | [] | List of selected item ids. |
+| onSelectionChange | ({ items, groups }: SelectionChangeResponse) => void | — | Merged Callback for item and group selection changes. It responds with a selection object that contains the selected itemIds and groupIds: { items: [], groups: [] } |
 | hasMultiselect | boolean | true | Defines the selection behavior of the tree. |
 | showRadioButtons | boolean | false | Defines if the single selection should also show radios. |
 | hideSearch | boolean | false | Defines whether or not the built-in Search is shown. |
 | searchPlaceholder | string | — | The text used as placeholder for the search input. |
-| onSearchChange | Function | — | Callback for when the search value changes. |
-| search | node | — | Used to define custom custom search component which replaces the built-in search. |
-| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
-| summary | node | — | Used to define custom asset type counter component which replaces the built-in summary. |
+| onSearchChange | (value: string) => void | — | Callback for when the search value changes. |
+| search | React.ReactNode | — | Used to define custom search component which replaces the built-in search. |
+| summary | React.ReactNode | — | Used to define custom asset type counter component which replaces the built-in summary. |
 | hideSummary | boolean | false | Defines whether a summary is shown. |
+| onTypeFilterChange | (currentTypes: string[]) => void | — | Callback triggered when the built-in asset type filter changes. This is only available when the default summary is used. |
 | hideTreeHead | boolean | false | Defines whether the entire area below the search field is shown or not. Note: Disabling the tree head will hide the select all checkbox and the tree options as well as the tree summary. |
-| treeHeaderContent | ReactNode | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
-| scrollHeight | Number | — | Defines the max-height of the scrollable list |
-| expandedGroups | Array of String | — | List of group ids which are expanded. |
-| onExpandGroupsChange | Function | — | Callback function triggered when a group expands or collapses. |
+| treeHeaderContent | React.ReactElement | — | Additional custom content that is rendered at the top of the tree component. This can be used for nav pills. |
+| scrollHeight | number | — | Defines the max-height of the scrollable list. |
+| expandedGroups | string[] | — | List of group ids which are expanded. |
+| onExpandGroupsChange | (newExpandedGroups: string[]) => void | — | Callback function triggered when a group expands or collapses. |
 | showEmptyGroups | boolean | true | Defines whether empty groups are shown or not. |
-| treeOptions | ReactNode | — | Component to offer customization options for the tree. |
-| treeOptionsTooltip | ReactNode | — | Tooltip content for the tree options dropdown. |
+| treeOptions | React.ReactNode[] | — | Component to offer customization options for the tree. |
+| treeOptionsTooltip | React.ReactNode | — | Tooltip content for the tree options dropdown. |
+| disableAnimation | boolean | false | Disables animation when filtering or using search |
 | virtualizeThreshold | number | 50 | The number of items (including groups and children) used for virtualizing the tree. |
 | overscan | number | 5 | The number of items rendered beyond the visible area of a virtualized tree. |
-| className | String | — | Additional classes added to the wrapping element. |
+| className | string | — | Additional classes added to the wrapping element. |
 
 ## TreeSummary with assetCounts
 
-### Example: Example 7
+### Example: Example 8
 
 12
 7
@@ -3138,13 +3409,14 @@ export default TreeSummaryExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| assetCounts | object | — | The object containing various asset type counter. |
-| └truck | number | — | The amount of trucks. |
-| └trailer | number | — | The amount of trailers. |
-| └bus | number | — | The amount of buses. |
-| └van | number | — | The amount of vans. |
-| └driver | number | — | The amount of drivers. |
-| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TypeCounter
@@ -3155,16 +3427,16 @@ export default TreeSummaryExample;
 | --- | --- | --- | --- |
 | type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
 | icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
-| isActive | Boolean | — | Sets the active styling if active. |
-| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |
-| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
 | hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
-| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the "type" prop is defined to receive the value in the callback and the flag "enableActivity" is set to true otherwise the callback is not triggered. |
-| value | String / Number / Node | — | A custom value to be shown in the counter. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |
 
 ## TreeSummary with TypeCounter
 
-### Example: Example 8
+### Example: Example 9
 
 9
 15
@@ -3213,13 +3485,14 @@ export default TreeSummaryCustomExample;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| assetCounts | object | — | The object containing various asset type counter. |
-| └truck | number | — | The amount of trucks. |
-| └trailer | number | — | The amount of trailers. |
-| └bus | number | — | The amount of buses. |
-| └van | number | — | The amount of vans. |
-| └driver | number | — | The amount of drivers. |
-| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow |
+| assetCounts | TreeSummaryCounts | — | The object containing various asset type counter. |
+| └truck | number | — | The amount of trucks |
+| └trailer | number | — | The amount of trailers |
+| └bus | number | — | The amount of buses |
+| └van | number | — | The amount of vans |
+| └car | number | — | The amount of cars |
+| └driver | number | — | The amount of drivers |
+| gridCols | number | 4 | The number of grid columns used for the built-in TreeSummaryRow. |
 | className | string | — | Additional classes added to the wrapping element. |
 
 #### Props: TypeCounter
@@ -3230,9 +3503,9 @@ export default TreeSummaryCustomExample;
 | --- | --- | --- | --- |
 | type | string | — | The item type for that counter. This will be used as a return value for the onClick callback. |
 | icon | string | — | The icon name. Note, when using the built-in generic type counter, the icon name will the same as the item type. So make sure there is a corresponding icon for the defined type. |
-| isActive | Boolean | — | Sets the active styling if active. |
-| hasFilter | boolean | — | Should be set when there is a type filter set in the tree to style the counter accordingly. |
-| enableActivity | boolean | — | Allows for interactivity. Use this prop when you allow clicking on the counter. |
+| isActive | boolean | — | Sets the active styling if active |
+| hasFilter | boolean | false | Should be set when there is a type filter set in the tree to style the counter accordingly. |
+| enableActivity | boolean | false | Allows for interactivity. Use this prop when you allow clicking on the counter. |
 | hideOnZero | boolean | false | Defines if the counter is rendered at all when the value is not defined ot 0. |
-| onClick | Function | — | Callback function when the counter is clicked. It returns the type value.Make sure the "type" prop is defined to receive the value in the callback and the flag "enableActivity" is set to true otherwise the callback is not triggered. |
-| value | String / Number / Node | — | A custom value to be shown in the counter. |
+| onClick | (type: string) => void | — | Callback function when the counter is clicked. It returns the type value. Make sure the "type" prop is defined to receive the value in the callback. |
+| value | string \| React.ReactNode \| number | — | A custom value to be shown in the counter. |