@rio-cloud/rio-uikit 1.10.0 → 1.11.0

package/components/assetTree/AssetTree.js

@@ -54,7 +54,7 @@ const AssetTree = memo(forwardRef((props, ref) => {
     const childrenArray = React.Children.toArray(children);
     // check for children type of TreeCategory and throw error in case
     invariant(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
-    const classes = classNames('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
+    const classes = classNames('AssetTree', className, !isOpen && 'closed', bordered && 'border', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
     const resizeLimitClasses = classNames('AssetTreeResizeLimit', isResize && 'display-block');
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = { left: resizeIndicatorPosition };

package/components/assetTree/Tree.d.ts

@@ -27,6 +27,12 @@ export type TreeGroup = {
      * The prefix `rioglyph-` can be omitted.
      */
     icon?: string;
+    /**
+     * The rioglyph icon name for a expanded group.
+     *
+     * The prefix `rioglyph-` can be omitted.
+     */
+    expandedIcon?: string;
     /**
      * Additional classes added to the group element.
      */

package/components/assetTree/Tree.js

@@ -242,7 +242,7 @@ const Tree = React.memo((props) => {
                             width: '100%',
                             height: `${virtualItem.size}px`,
                             transform: `translateY(${virtualItem.start}px)`,
-                        }, children: item.type === 'group' ? (_jsx(TreeNodeContainer, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: _jsx(TreeNode, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: !isGroupSelected &&
+                        }, children: item.type === 'group' ? (_jsx(TreeNodeContainer, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: _jsx(TreeNode, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isOpen: item.isExpanded, isIndeterminate: !isGroupSelected &&
                                     item.data.items.some(groupItem => selectedItems.includes(groupItem.id)) }) }, item.id)) : (
                         // Render individual leaf item with proper styling
                         _jsx(TreeNodeContainer, { isOpen: true, disableAnimation: disableAnimation, children: _jsx(TreeLeafList, { leafList: [item.data], hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }) }, item.id)) }, `${item.type}-${item.id}-${virtualItem.index}`));
@@ -263,7 +263,7 @@ const Tree = React.memo((props) => {
             const numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
             const isGroupSelected = selectedGroups.includes(groupId);
             const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), isOpen && (_jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
+            return (_jsxs(TreeNodeContainer, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate, isOpen: isOpen }), isOpen && (_jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
         })(groupedItems);
         return result;
     };

package/components/assetTree/TreeNode.d.ts

@@ -4,6 +4,7 @@ export type TreeNodeProps = {
     node: GroupedItem;
     hasMultiselect?: boolean;
     isSelected?: boolean;
+    isOpen?: boolean;
     isIndeterminate?: boolean;
     onToggleNode: (nodeId: string) => void;
     onSelect: (node: GroupedItem, isIndeterminate: boolean) => void;

package/components/assetTree/TreeNode.js

@@ -10,10 +10,11 @@ const withRioglyphPrefix = (name) => {
     return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
 };
 const TreeNode = React.memo((props) => {
-    const { node, hasMultiselect = false, isSelected = false, isIndeterminate = false, onToggleNode, onSelect } = props;
+    const { node, hasMultiselect = false, isSelected = false, isOpen = false, isIndeterminate = false, onToggleNode, onSelect, } = props;
     const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
-    const iconName = withRioglyphPrefix(node.icon);
+    const expandedIcon = node.expandedIcon || node.icon;
+    const iconName = isOpen ? withRioglyphPrefix(expandedIcon) : withRioglyphPrefix(node.icon);
     return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), _jsx("span", { className: 'TreeLabelNameText', children: _jsx("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), _jsx("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
 });
 export default TreeNode;

package/components/dialog/SplitDialog.d.ts

@@ -37,6 +37,12 @@ export type SplitDialogProps = Omit<BaseDialogProps, 'useOverflow'> & {
      * @default true
      */
     useOverflow?: boolean;
+    /**
+     * Allows to disable the divider.
+     *
+     * @default true
+     */
+    showDivider?: boolean;
 };
 declare const SplitDialog: (props: SplitDialogProps) => import("react/jsx-runtime").JSX.Element;
 export default SplitDialog;

package/components/dialog/SplitDialog.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import Dialog from './Dialog';
 const SplitDialog = (props) => {
-    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true, ...remainingProps } = props;
+    const { leftContent, rightContent, leftContentClassName = '', rightContentClassName = '', className = '', useOverflow = true, showDivider = true, ...remainingProps } = props;
     const dialogClassName = `split-dialog ${className}`;
     const dividerClasses = classNames('split-divider', 'bg-lighter');
-    const body = (_jsxs("div", { className: 'split-wrapper', children: [_jsxs("div", { className: `split-left ${leftContentClassName}`, children: [leftContent, _jsx("div", { className: dividerClasses })] }), _jsx("div", { className: `split-right ${rightContentClassName}`, children: rightContent })] }));
+    const body = (_jsxs("div", { className: 'split-wrapper', children: [_jsxs("div", { className: `split-left ${leftContentClassName}`, children: [leftContent, showDivider && _jsx("div", { className: dividerClasses })] }), _jsx("div", { className: `split-right ${rightContentClassName}`, children: rightContent })] }));
     return _jsx(Dialog, { ...remainingProps, body: body, className: dialogClassName, useOverflow: useOverflow });
 };
 export default SplitDialog;

package/components/filepicker/FilePicker.d.ts

@@ -25,7 +25,7 @@ export type FilePickerProps = {
      */
     label?: string | ReactNode;
     /**
-     * Maximum file size.
+     * Maximum file size in byte. 5 MB = 5,242,880 byte
      */
     maxSize?: number;
     /**

package/components/formLabel/FormLabel.js

@@ -23,7 +23,7 @@ const FormLabel = (props) => {
         }
     }, []);
     const supportingTextClasses = classNames('text-color-gray', 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
-    if (isLabel) {
+    if (isLabel && remainingProps.htmlFor) {
         const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
         return (
         // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>

package/components/map/components/Map.js

@@ -41,6 +41,15 @@ const Map = (props) => {
         else {
             console.debug('initialize here map');
         }
+        if (api?.map) {
+            // Cleanup any previously initialized map before doing anything else
+            console.debug('disposing previous map');
+            removeEventListenerMap(api.map);
+            if (api.mapEvents) {
+                api.mapEvents.dispose();
+            }
+            api.map.dispose();
+        }
         const bounds = boundingBox && getMapBounds(boundingBox);
         // Initialize communication with the platform
         const platform = getPlatform(credentials);
@@ -53,7 +62,7 @@ const Map = (props) => {
         // @ts-ignore-next-line: according to the Here docs, the engine type exists
         // see https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/harp-migrate.html
         const defaultLayers = platform.createDefaultLayers({ engineType, lg: language, pois: true });
-        const defaultLayerMap = getBaseLayer({
+        getBaseLayer({
             baseLayerName: baseLayer,
             defaultLayers,
             enableWebGL,
@@ -63,76 +72,69 @@ const Map = (props) => {
             language,
             minZoom,
             maxZoom: safeMaxZoom,
-        });
-        // Initialize the map
-        const hereMap = new H.Map(mapRef.current, defaultLayerMap.baseLayer, {
-            zoom,
-            center,
-            bounds,
-            engineType,
-            pixelRatio: devicePixelRatio,
-            fixedCenter: true,
-        });
-        if (defaultLayerMap.overlayLayer) {
-            // Special case for satellite map where we render street labels and road signs as well as additional pois as vector data
-            hereMap.addLayer(defaultLayerMap.overlayLayer);
-        }
-        setMapInitialized(true);
-        let hereMapEvents = false;
-        let hereBehavior;
-        // Enable the map event system
-        if (!disableMapEvents) {
-            hereMapEvents = new H.mapevents.MapEvents(hereMap);
-        }
-        if (!(disableMapEvents || disableBehavior)) {
-            hereBehavior = new H.mapevents.Behavior(hereMapEvents);
-            // @ts-ignore-next-line
-            hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
-            if (disableZoomMomentum) {
-                // Disable the inertia that occurs on WebGL maps when scrolling/zooming.
-                // This resulted in a very high scroll sensitivity.
-                // @ts-ignore-next-line
-                hereBehavior.disable(H.mapevents.Behavior.Feature.ZOOM_MOMENTUM);
+        }).then(defaultLayerMap => {
+            // Initialize the map
+            const hereMap = new H.Map(mapRef.current, defaultLayerMap.baseLayer, {
+                zoom,
+                center,
+                bounds,
+                engineType,
+                pixelRatio: devicePixelRatio,
+                fixedCenter: true,
+            });
+            if (defaultLayerMap.overlayLayer) {
+                // Special case for satellite map where we render street labels and road signs as well as additional pois as vector data
+                // hereMap.setBaseLayer(defaultLayerMap.baseLayer);
+                hereMap.addLayer(defaultLayerMap.overlayLayer);
             }
-        }
-        addEventListenerMap(hereMap, eventListenerMap, hereMap);
-        const hereUi = getHereUi(hereMap, defaultLayers, showScaleBar, language);
-        // The api will be passed to services when using a render function.
-        // This allows the service to access the map internals
-        setApi({
-            credentials,
-            defaultLayers,
-            map: hereMap,
-            mapEvents: hereMapEvents,
-            behavior: hereBehavior,
-            platform,
-            ui: hereUi,
-            utils: createUtils(hereMap),
-            // Put settings back into the map API object so the invoking service
-            // can check on these settings for instance inside a test
-            settings: {
-                enableWebGL,
-                baseLayer,
-                activeLayers,
-                showCluster,
-                minZoom,
-                maxZoom: safeMaxZoom,
-            },
-        });
-        // If the base layer changed, re-add all previous objects again,
-        // otherwise the map would be empty
-        if (allMapObjects) {
-            hereMap.addObjects(allMapObjects);
-        }
-        return () => {
-            if (hereMap) {
-                removeEventListenerMap(hereMap);
-                if (hereMapEvents) {
-                    hereMapEvents.dispose();
+            setMapInitialized(true);
+            let hereMapEvents = false;
+            let hereBehavior;
+            if (!disableMapEvents) {
+                // Enable the map event system
+                hereMapEvents = new H.mapevents.MapEvents(hereMap);
+            }
+            if (!(disableMapEvents || disableBehavior)) {
+                hereBehavior = new H.mapevents.Behavior(hereMapEvents);
+                // @ts-ignore-next-line
+                hereBehavior.disable(H.mapevents.Behavior.Feature.FRACTIONAL_ZOOM);
+                if (disableZoomMomentum) {
+                    // Disable the inertia that occurs on WebGL maps when scrolling/zooming.
+                    // This resulted in a very high scroll sensitivity.
+                    // @ts-ignore-next-line
+                    hereBehavior.disable(H.mapevents.Behavior.Feature.ZOOM_MOMENTUM);
                 }
-                hereMap.dispose();
             }
-        };
+            addEventListenerMap(hereMap, eventListenerMap, hereMap);
+            const hereUi = getHereUi(hereMap, defaultLayers, showScaleBar, language);
+            // The api will be passed to services when using a render function.
+            // This allows the service to access the map internals
+            setApi({
+                credentials,
+                defaultLayers,
+                map: hereMap,
+                mapEvents: hereMapEvents,
+                behavior: hereBehavior,
+                platform,
+                ui: hereUi,
+                utils: createUtils(hereMap),
+                // Put settings back into the map API object so the invoking service
+                // can check on these settings for instance inside a test
+                settings: {
+                    enableWebGL,
+                    baseLayer,
+                    activeLayers,
+                    showCluster,
+                    minZoom,
+                    maxZoom: safeMaxZoom,
+                },
+            });
+            if (allMapObjects) {
+                // If the base layer changed, re-add all previous objects again,
+                // otherwise the map would be empty
+                hereMap.addObjects(allMapObjects);
+            }
+        });
     }, [enableWebGL, enableDevicePixelRatio, language, baseLayer, minZoom, maxZoom]);
     const isDarkMode = useDarkMode();
     useEffect(() => {

package/components/map/components/features/settings/builtinSettings/MapTypeSettings.d.ts

@@ -3,7 +3,7 @@ import type { MapType } from '../../../../utils/mapTypes';
 export type MapTypeSettingsProps = {
     mapType?: string;
     enableNightMap?: boolean;
-    onMapTypeChange?: () => MapType;
+    onMapTypeChange?: (type: MapType) => void;
     defaultTypeLabel?: string | JSX.Element;
     truckTypeLabel?: string | JSX.Element;
     terrainTypeLabel?: string | JSX.Element;

package/components/map/utils/rendering.d.ts

@@ -20,4 +20,4 @@ export type BaseLayerResponse = {
     baseLayer: H.map.layer.Layer;
     overlayLayer?: H.map.layer.Layer;
 };
-export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }: BaseLayer) => BaseLayerResponse;
+export declare const getBaseLayer: ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }: BaseLayer) => Promise<BaseLayerResponse>;

package/components/map/utils/rendering.js

@@ -46,7 +46,7 @@ export const getEngineType = (baseLayerName, enableWebGL) => {
             return enableWebGL ? ENGINE_TYPE_HARP : ENGINE_TYPE_P2D;
     }
 };
-export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }) => {
+export const getBaseLayer = async ({ baseLayerName, defaultLayers, enableWebGL, platform, engineType, language, vehicleRestrictions, minZoom, maxZoom, }) => {
     const restriction = 'disabled'; // vehicleRestrictions ? 'active_and_inactive' : 'disabled';
     const features = `pois:all,environmental_zones:all,congestion_zones:all,vehicle_restrictions:${restriction}`;
     if (enableWebGL && baseLayerName === MAP_TYPE_DEFAULT) {
@@ -61,7 +61,7 @@ export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platfo
             if (enableWebGL) {
                 // This is a workaround for setting the min and max zoom limit for satellite map
                 // since the setMin/setMax cannot be set on the "defaultLayers.hybrid.liteday.raster".
-                // The HERE support suggests to create a hybrid layer for that and set the zoom limits
+                // The HERE support suggested to create a hybrid layer for that and set the zoom limits
                 // on the two layers.
                 const hybridStyleConfig = {
                     base: {
@@ -69,24 +69,20 @@ export const getBaseLayer = ({ baseLayerName, defaultLayers, enableWebGL, platfo
                         scheme: 'hybrid.day',
                     },
                 };
-                let baseLayer;
-                let overlayLayer;
                 // This method creates hybrid map layers. A hybrid map consists of raster satellite base layer and vector layers on top.
                 // Layers created by this method can be used only when the Map is instantiated with H.Map.EngineType.HARP engineType.
                 // See https://www.here.com/docs/bundle/maps-api-for-javascript-api-reference/page/H.service.Platform_4.html#createHybridLayers
                 // @ts-ignore-next-line
-                platform.createHybridLayers(hybridStyleConfig, (layers) => {
+                await platform.createHybridLayers(hybridStyleConfig, (layers) => {
                     layers.raster.setMin(minZoom);
                     layers.raster.setMax(maxZoom);
                     layers.vector.setMin(minZoom);
                     layers.vector.setMax(maxZoom);
-                    baseLayer = layers.raster;
-                    overlayLayer = layers.vector;
+                    return {
+                        baseLayer: layers.raster,
+                        overlayLayer: layers.vector,
+                    };
                 }, console.error);
-                return {
-                    baseLayer,
-                    overlayLayer,
-                };
             }
             return {
                 baseLayer: getBaseTileLayer(getBaseRasterTileService(platform, 'explore.satellite.day', features, language), engineType, minZoom, maxZoom),

package/hooks/useAverage.d.ts

@@ -0,0 +1,18 @@
+export type UseAverageOptions = {
+    /**
+     * The locale used to parse localized number formats (e.g. "de-DE", "en-GB").
+     * @default "en-GB".
+     */
+    locale?: string;
+};
+/**
+ * Calculates the average of numeric values from a list of objects.
+ * Values are extracted using a dot-separated path and parsed with locale awareness.
+ *
+ * @param items - The list of objects to aggregate.
+ * @param path - Dot-separated path to the value in each object.
+ * @param options - Optional configuration (e.g. locale for number parsing).
+ * @returns The average of all valid values as a number. Returns 0 if no values are valid.
+ */
+declare const useAverage: (items: unknown[], path: string, options?: UseAverageOptions) => number;
+export default useAverage;

package/hooks/useAverage.js

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { parseNumberFromValue, getValueByPath } from '../utils/formatUtils';
+/**
+ * Calculates the average of numeric values from a list of objects.
+ * Values are extracted using a dot-separated path and parsed with locale awareness.
+ *
+ * @param items - The list of objects to aggregate.
+ * @param path - Dot-separated path to the value in each object.
+ * @param options - Optional configuration (e.g. locale for number parsing).
+ * @returns The average of all valid values as a number. Returns 0 if no values are valid.
+ */
+const useAverage = (items, path, options = {}) => {
+    const { locale = 'en-GB' } = options;
+    return useMemo(() => {
+        const values = items
+            .map(item => {
+            const raw = getValueByPath(item, path);
+            return parseNumberFromValue(raw, locale);
+        })
+            .filter(num => !Number.isNaN(num) && num !== 0);
+        if (values.length === 0) {
+            return 0;
+        }
+        const sum = values.reduce((total, value) => total + value, 0);
+        return sum / values.length;
+    }, [items, path, locale]);
+};
+export default useAverage;

package/hooks/useCount.d.ts

@@ -0,0 +1,22 @@
+export type UseCountOptions = {
+    /**
+     * Count only values that strictly equal this value.
+     * If omitted and no `match` is provided, any value that is not null or undefined will be counted.
+     */
+    equals?: unknown;
+    /**
+     * A custom matcher function. If provided, it overrides the `equals` option.
+     */
+    match?: (value: unknown) => boolean;
+};
+/**
+ * Counts how many items in a list match a specific condition at a given path.
+ * Supports exact value comparison or custom predicate logic.
+ *
+ * @param items - The list of objects to evaluate.
+ * @param path - Dot-separated path to the target property.
+ * @param options - Optional config with `equals` or a custom `match` function.
+ * @returns Number of items that satisfy the condition.
+ */
+declare const useCount: (items: unknown[], path: string, options?: UseCountOptions) => number;
+export default useCount;

package/hooks/useCount.js

@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import { getValueByPath } from '../utils/formatUtils';
+/**
+ * Counts how many items in a list match a specific condition at a given path.
+ * Supports exact value comparison or custom predicate logic.
+ *
+ * @param items - The list of objects to evaluate.
+ * @param path - Dot-separated path to the target property.
+ * @param options - Optional config with `equals` or a custom `match` function.
+ * @returns Number of items that satisfy the condition.
+ */
+const useCount = (items, path, options = {}) => {
+    const { equals, match } = options;
+    return useMemo(() => {
+        return items.reduce((count, item) => {
+            const value = getValueByPath(item, path);
+            let shouldCount = false;
+            if (typeof match === 'function') {
+                shouldCount = match(value);
+            }
+            else if (equals !== undefined) {
+                shouldCount = value === equals;
+            }
+            else {
+                shouldCount = value != null; // fallback: count all defined values
+            }
+            return shouldCount ? count + 1 : count;
+        }, 0);
+    }, [items, path, equals, match]);
+};
+export default useCount;

package/hooks/useMax.d.ts

@@ -0,0 +1,18 @@
+export type UseMaxOptions = {
+    /**
+     * The locale used to parse localized number formats (e.g. "de-DE", "en-GB").
+     * @default "en-GB".
+     */
+    locale?: string;
+};
+/**
+ * Finds the maximum numeric value from a list of objects.
+ * Values are extracted using a dot-separated path and parsed with locale awareness.
+ *
+ * @param items - The list of objects to evaluate.
+ * @param path - Dot-separated path to the value in each object.
+ * @param options - Optional configuration (e.g. locale for number parsing).
+ * @returns The largest of all valid values, or 0 if none are valid.
+ */
+declare const useMax: (items: unknown[], path: string, options?: UseMaxOptions) => number;
+export default useMax;

package/hooks/useMax.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { parseNumberFromValue, getValueByPath } from '../utils/formatUtils';
+/**
+ * Finds the maximum numeric value from a list of objects.
+ * Values are extracted using a dot-separated path and parsed with locale awareness.
+ *
+ * @param items - The list of objects to evaluate.
+ * @param path - Dot-separated path to the value in each object.
+ * @param options - Optional configuration (e.g. locale for number parsing).
+ * @returns The largest of all valid values, or 0 if none are valid.
+ */
+const useMax = (items, path, options = {}) => {
+    const { locale = 'en-GB' } = options;
+    return useMemo(() => {
+        const values = items
+            .map(item => {
+            const valueFromPath = getValueByPath(item, path);
+            return parseNumberFromValue(valueFromPath, locale);
+        })
+            .filter(num => !Number.isNaN(num));
+        return values.length > 0 ? Math.max(...values) : 0;
+    }, [items, path, locale]);
+};
+export default useMax;

package/hooks/useMin.d.ts

@@ -0,0 +1,18 @@
+export type UseMinOptions = {
+    /**
+     * The locale used to parse localized number formats (e.g. "de-DE", "en-GB").
+     * @default "en-GB".
+     */
+    locale?: string;
+};
+/**
+ * Finds the minimum numeric value from a list of objects.
+ * Values are extracted using a dot-separated path and parsed with locale awareness.
+ *
+ * @param items - The list of objects to evaluate.
+ * @param path - Dot-separated path to the value in each object.
+ * @param options - Optional configuration (e.g. locale for number parsing).
+ * @returns The smallest of all valid values, or 0 if none are valid.
+ */
+declare const useMin: (items: unknown[], path: string, options?: UseMinOptions) => number;
+export default useMin;

package/hooks/useMin.js

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { parseNumberFromValue, getValueByPath } from '../utils/formatUtils';
+/**
+ * Finds the minimum numeric value from a list of objects.
+ * Values are extracted using a dot-separated path and parsed with locale awareness.
+ *
+ * @param items - The list of objects to evaluate.
+ * @param path - Dot-separated path to the value in each object.
+ * @param options - Optional configuration (e.g. locale for number parsing).
+ * @returns The smallest of all valid values, or 0 if none are valid.
+ */
+const useMin = (items, path, options = {}) => {
+    const { locale = 'en-GB' } = options;
+    return useMemo(() => {
+        const values = items
+            .map(item => {
+            const valueFromPath = getValueByPath(item, path);
+            return parseNumberFromValue(valueFromPath, locale);
+        })
+            .filter(num => !Number.isNaN(num));
+        return values.length > 0 ? Math.min(...values) : 0;
+    }, [items, path, locale]);
+};
+export default useMin;

package/hooks/useSum.d.ts

@@ -0,0 +1,18 @@
+export type UseSumOptions = {
+    /**
+     * The locale used to parse localized number formats (e.g. "de-DE", "en-GB").
+     * @default "en-GB".
+     */
+    locale?: string;
+};
+/**
+ * Calculates the sum of numeric values from a list of objects, using a defined property path.
+ * Supports localized number strings (e.g. "1.234,56 €", "1,000.75").
+ *
+ * @param items - The list of objects to sum values from.
+ * @param path - The dot-separated path to the target value in each object.
+ * @param options - Optional configuration such as locale for parsing.
+ * @returns The total sum of all valid parsed values as a number.
+ */
+declare const useSum: (items: unknown[], path: string, options?: UseSumOptions) => number;
+export default useSum;

package/hooks/useSum.js

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { parseNumberFromValue, getValueByPath } from '../utils/formatUtils';
+/**
+ * Calculates the sum of numeric values from a list of objects, using a defined property path.
+ * Supports localized number strings (e.g. "1.234,56 €", "1,000.75").
+ *
+ * @param items - The list of objects to sum values from.
+ * @param path - The dot-separated path to the target value in each object.
+ * @param options - Optional configuration such as locale for parsing.
+ * @returns The total sum of all valid parsed values as a number.
+ */
+const useSum = (items, path, options = {}) => {
+    const { locale = 'en-GB' } = options;
+    const sum = useMemo(() => {
+        return items.reduce((total, item) => {
+            const raw = getValueByPath(item, path);
+            const value = parseNumberFromValue(raw, locale);
+            return total + value;
+        }, 0);
+    }, [items, path, locale]);
+    return sum;
+};
+export default useSum;

package/lib/es/components/assetTree/AssetTree.js

@@ -57,7 +57,7 @@ const AssetTree = (0, react_1.memo)((0, react_1.forwardRef)((props, ref) => {
     const childrenArray = react_1.default.Children.toArray(children);
     // check for children type of TreeCategory and throw error in case
     (0, tiny_invariant_1.default)(childrenArray.every(isTreeCategory), 'AssetTree only excepts children of type "TreeCategory"');
-    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
+    const classes = (0, classnames_1.default)('AssetTree', className, !isOpen && 'closed', bordered && 'border', sidebarMode === TreeMode.MODE_FLY ? 'fly' : 'fluid');
     const resizeLimitClasses = (0, classnames_1.default)('AssetTreeResizeLimit', isResize && 'display-block');
     const resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
     const resizeLimitStyle = { left: resizeIndicatorPosition };

package/lib/es/components/assetTree/Tree.d.ts

@@ -27,6 +27,12 @@ export type TreeGroup = {
      * The prefix `rioglyph-` can be omitted.
      */
     icon?: string;
+    /**
+     * The rioglyph icon name for a expanded group.
+     *
+     * The prefix `rioglyph-` can be omitted.
+     */
+    expandedIcon?: string;
     /**
      * Additional classes added to the group element.
      */

package/lib/es/components/assetTree/Tree.js

@@ -248,7 +248,7 @@ const Tree = react_1.default.memo((props) => {
                             width: '100%',
                             height: `${virtualItem.size}px`,
                             transform: `translateY(${virtualItem.start}px)`,
-                        }, children: item.type === 'group' ? ((0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: (0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: !isGroupSelected &&
+                        }, children: item.type === 'group' ? ((0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: (0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isOpen: item.isExpanded, isIndeterminate: !isGroupSelected &&
                                     item.data.items.some(groupItem => selectedItems.includes(groupItem.id)) }) }, item.id)) : (
                         // Render individual leaf item with proper styling
                         (0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, { isOpen: true, disableAnimation: disableAnimation, children: (0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: [item.data], hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }) }, item.id)) }, `${item.type}-${item.id}-${virtualItem.index}`));
@@ -269,7 +269,7 @@ const Tree = react_1.default.memo((props) => {
             const numSelectedGroupItems = (0, filter_1.default)((0, treeUtils_1.containsItemById)(selectedItems))(groupItems).length;
             const isGroupSelected = selectedGroups.includes(groupId);
             const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return ((0, jsx_runtime_1.jsxs)(TreeNodeContainer_1.default, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [(0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), isOpen && ((0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
+            return ((0, jsx_runtime_1.jsxs)(TreeNodeContainer_1.default, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [(0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate, isOpen: isOpen }), isOpen && ((0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
         })(groupedItems);
         return result;
     };