@rio-cloud/rio-uikit 1.4.1 → 1.5.0

package/components/map/components/features/basics/polygonColors.js

@@ -0,0 +1,252 @@
+export const colorMapColdplay = {
+    'color-coldplay-wine': {
+        stroke: 'rgba(82, 13, 78, 0.65)',
+        fill: 'rgba(82, 13, 78, 0.25)',
+    },
+    'color-coldplay-aubergine': {
+        stroke: 'rgba(90, 72, 118, 0.65)',
+        fill: 'rgba(90, 72, 118, 0.25)',
+    },
+    'color-coldplay-kashmir': {
+        stroke: 'rgba(83, 110, 139, 0.65)',
+        fill: 'rgba(83, 110, 139, 0.25)',
+    },
+    'color-coldplay-fountain': {
+        stroke: 'rgba(103, 171, 197, 0.65)',
+        fill: 'rgba(103, 171, 197, 0.25)',
+    },
+    'color-coldplay-turquoise': {
+        stroke: 'rgba(78, 204, 193, 0.65)',
+        fill: 'rgba(78, 204, 193, 0.25)',
+    },
+    'color-coldplay-bermuda': {
+        stroke: 'rgba(121, 212, 179, 0.65)',
+        fill: 'rgba(121, 212, 179, 0.25)',
+    },
+    'color-coldplay-moos': {
+        stroke: 'rgba(161, 218, 163, 0.65)',
+        fill: 'rgba(161, 218, 163, 0.25)',
+    },
+    'color-coldplay-primrose': {
+        stroke: 'rgba(199, 226, 145, 0.65)',
+        fill: 'rgba(199, 226, 145, 0.25)',
+    },
+    'color-coldplay-khaki': {
+        stroke: 'rgba(240, 235, 131, 0.65)',
+        fill: 'rgba(240, 235, 131, 0.25)',
+    },
+};
+export const colorMapWarmup = {
+    'color-warmup-crimson': {
+        stroke: 'rgba(49, 20, 79, 0.65)',
+        fill: 'rgba(49, 20, 79, 0.25)',
+    },
+    'color-warmup-victoria': {
+        stroke: 'rgba(73, 61, 109, 0.65)',
+        fill: 'rgba(73, 61, 109, 0.25)',
+    },
+    'color-warmup-cadillac': {
+        stroke: 'rgba(126, 62, 114, 0.65)',
+        fill: 'rgba(126, 62, 114, 0.25)',
+    },
+    'color-warmup-raspberry': {
+        stroke: 'rgba(178, 54, 114, 0.65)',
+        fill: 'rgba(178, 54, 114, 0.25)',
+    },
+    'color-warmup-cerise': {
+        stroke: 'rgba(231, 36, 114, 0.65)',
+        fill: 'rgba(231, 36, 114, 0.25)',
+    },
+    'color-warmup-charm': {
+        stroke: 'rgba(201, 119, 141, 0.65)',
+        fill: 'rgba(201, 119, 141, 0.25)',
+    },
+    'color-warmup-salmon': {
+        stroke: 'rgba(241, 149, 136, 0.65)',
+        fill: 'rgba(241, 149, 136, 0.25)',
+    },
+    'color-warmup-cherokee': {
+        stroke: 'rgba(245, 187, 137, 0.65)',
+        fill: 'rgba(245, 187, 137, 0.25)',
+    },
+    'color-warmup-corn': {
+        stroke: 'rgba(253, 224, 130, 0.65)',
+        fill: 'rgba(253, 224, 130, 0.25)',
+    },
+};
+export const colorMapGray = {
+    'gray-darkest': {
+        stroke: 'rgba(42, 55, 64, 0.65)',
+        fill: 'rgba(42, 55, 64, 0.25)',
+    },
+    'gray-darker': {
+        stroke: 'rgba(76, 86, 103, 0.65)',
+        fill: 'rgba(76, 86, 103, 0.25)',
+    },
+    'gray-dark': {
+        stroke: 'rgba(105, 122, 139, 0.65)',
+        fill: 'rgba(105, 122, 139, 0.25)',
+    },
+    gray: {
+        stroke: 'rgba(167, 175, 187, 0.65)',
+        fill: 'rgba(167, 175, 187, 0.25)',
+    },
+    'gray-light': {
+        stroke: 'rgba(208, 216, 222, 0.65)',
+        fill: 'rgba(208, 216, 222, 0.25)',
+    },
+    'gray-lighter': {
+        stroke: 'rgba(229, 235, 240, 0.65)',
+        fill: 'rgba(229, 235, 240, 0.25)',
+    },
+    'gray-lightest': {
+        stroke: 'rgba(246, 248, 249, 0.65)',
+        fill: 'rgba(246, 248, 249, 0.25)',
+    },
+    'gray-decent': {
+        stroke: 'rgba(253, 253, 253, 0.65)',
+        fill: 'rgba(253, 253, 253, 0.25)',
+    },
+};
+export const colorMapBrand = {
+    'brand-primary': {
+        stroke: 'rgba(48, 180, 192, 0.65)',
+        fill: 'rgba(48, 180, 192, 0.25)',
+    },
+    'brand-secondary': {
+        stroke: 'rgba(178, 54, 114, 0.65)',
+        fill: 'rgba(178, 54, 114, 0.25)',
+    },
+    'brand-info': {
+        stroke: 'rgba(75, 128, 166, 0.65)',
+        fill: 'rgba(75, 128, 166, 0.25)',
+    },
+    'brand-success': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'brand-warning': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'brand-danger': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+};
+export const colorMapStatus = {
+    'color-status-available': {
+        stroke: 'rgba(35, 155, 125, 0.65)',
+        fill: 'rgba(35, 155, 125, 0.25)',
+    },
+    'color-status-driving': {
+        stroke: 'rgba(54, 144, 174, 0.65)',
+        fill: 'rgba(54, 144, 174, 0.25)',
+    },
+    'color-status-resting': {
+        stroke: 'rgba(98, 107, 114, 0.65)',
+        fill: 'rgba(98, 107, 114, 0.25)',
+    },
+    'color-status-working': {
+        stroke: 'rgba(148, 72, 139, 0.65)',
+        fill: 'rgba(148, 72, 139, 0.25)',
+    },
+};
+export const colorMapMarker = {
+    'color-map-marker-text': {
+        stroke: 'rgba(255, 255, 255, 0.65)',
+        fill: 'rgba(255, 255, 255, 0.25)',
+    },
+    'color-map-marker-active': {
+        stroke: 'rgba(255, 255, 255, 0.65)',
+        fill: 'rgba(255, 255, 255, 0.25)',
+    },
+    'color-map-marker-asset': {
+        stroke: 'rgba(42, 55, 64, 0.65)',
+        fill: 'rgba(42, 55, 64, 0.25)',
+    },
+    'color-map-marker-poi': {
+        stroke: 'rgba(203, 57, 149, 0.65)',
+        fill: 'rgba(203, 57, 149, 0.25)',
+    },
+    'color-map-marker-geofence': {
+        stroke: 'rgba(242, 84, 95, 0.65)',
+        fill: 'rgba(242, 84, 95, 0.25)',
+    },
+    'color-map-marker-route': {
+        stroke: 'rgba(54, 175, 215, 0.65)',
+        fill: 'rgba(54, 175, 215, 0.25)',
+    },
+    'color-map-marker-info': {
+        stroke: 'rgba(63, 117, 155, 0.65)',
+        fill: 'rgba(63, 117, 155, 0.25)',
+    },
+    'color-map-marker-success': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'color-map-marker-warning': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'color-map-marker-danger': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+};
+export const colorMapRating = {
+    'color-rating-1': {
+        stroke: 'rgba(226, 40, 55, 0.65)',
+        fill: 'rgba(226, 40, 55, 0.25)',
+    },
+    'color-rating-2': {
+        stroke: 'rgba(255, 142, 60, 0.65)',
+        fill: 'rgba(255, 142, 60, 0.25)',
+    },
+    'color-rating-3': {
+        stroke: 'rgba(248, 197, 117, 0.65)',
+        fill: 'rgba(248, 197, 117, 0.25)',
+    },
+    'color-rating-4': {
+        stroke: 'rgba(92, 184, 92, 0.65)',
+        fill: 'rgba(92, 184, 92, 0.25)',
+    },
+    'color-rating-5': {
+        stroke: 'rgba(75, 146, 76, 0.65)',
+        fill: 'rgba(75, 146, 76, 0.25)',
+    },
+};
+export const colorMapHighlight = {
+    'color-highlight-darkest': {
+        stroke: 'rgba(21, 75, 86, 0.65)',
+        fill: 'rgba(21, 75, 86, 0.25)',
+    },
+    'color-highlight-darker': {
+        stroke: 'rgba(32, 110, 126, 0.65)',
+        fill: 'rgba(32, 110, 126, 0.25)',
+    },
+    'color-highlight-dark': {
+        stroke: 'rgba(38, 136, 151, 0.65)',
+        fill: 'rgba(38, 136, 151, 0.25)',
+    },
+    'color-highlight': {
+        stroke: 'rgba(48, 180, 192, 0.65)',
+        fill: 'rgba(48, 180, 192, 0.25)',
+    },
+    'color-highlight-light': {
+        stroke: 'rgba(141, 219, 227, 0.65)',
+        fill: 'rgba(141, 219, 227, 0.25)',
+    },
+    'color-highlight-lighter': {
+        stroke: 'rgba(206, 240, 243, 0.65)',
+        fill: 'rgba(206, 240, 243, 0.25)',
+    },
+    'color-highlight-lightest': {
+        stroke: 'rgba(235, 249, 250, 0.65)',
+        fill: 'rgba(235, 249, 250, 0.25)',
+    },
+    'color-highlight-decent': {
+        stroke: 'rgba(243, 251, 252, 0.65)',
+        fill: 'rgba(243, 251, 252, 0.25)',
+    },
+};

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

@@ -161,6 +161,6 @@ export type IncidentDataPoint = {
     roadClosed: boolean;
     position: Position;
 };
-export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger"];
+export declare const markerColorOptions: readonly ["bg-map-marker-asset", "bg-map-marker-poi", "bg-map-marker-geofence", "bg-map-marker-route", "bg-map-marker-info", "bg-map-marker-success", "bg-map-marker-warning", "bg-map-marker-danger", "bg-map-marker-restrictions"];
 export type MarkerColor = (typeof markerColorOptions)[number];
 export declare const markerColorMapping: Record<MarkerColor, string>;

package/components/map/utils/mapTypes.js

@@ -19,6 +19,7 @@ export const markerColorOptions = [
     'bg-map-marker-success',
     'bg-map-marker-warning',
     'bg-map-marker-danger',
+    'bg-map-marker-restrictions',
 ];
 export const markerColorMapping = {
     'bg-map-marker-asset': '--color-map-marker-asset',
@@ -29,4 +30,5 @@ export const markerColorMapping = {
     'bg-map-marker-success': '--color-map-marker-success',
     'bg-map-marker-warning': '--color-map-marker-warning',
     'bg-map-marker-danger': '--color-map-marker-danger',
+    'bg-map-marker-restrictions': '--color-map-marker-restrictions',
 };

package/components/mapMarker/SingleMapMarker.d.ts

@@ -1,6 +1,6 @@
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type MarkerColor } from '../map/utils/mapTypes';
-export type SingleMapMarkerProps = {
+export type SingleMapMarkerProps = ComponentProps<'div'> & {
     /**
      * Defines the rotation of the arrow in deg.
      *
@@ -73,6 +73,7 @@ export type SingleMapMarkerProps = {
      * - `bg-map-marker-success`
      * - `bg-map-marker-warning`
      * - `bg-map-marker-danger`
+     * - `bg-map-marker-restrictions`
      *
      * @default 'bg-map-marker-asset'
      */

package/components/mapMarker/SingleMapMarker.js

@@ -16,12 +16,12 @@ const MapStateIndicator = (props) => {
 };
 const getIcons = (iconNames = []) => iconNames.map((name, index) => (_jsx("div", { className: `rio-map-icon rioglyph rioglyph-${name}` }, `rio-map-icon-${name}-${index}`)));
 const SingleMapMarker = (props) => {
-    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', } = props;
+    const { bearing = DEFAULT_BEARING, name, warningCount = 0, exceptionCount = 0, active = false, clickable = true, fixed = false, moving = false, pinging = false, anchorIconName, stateIconName, iconNames, markerColor = 'bg-map-marker-asset', textColor, anchorSize, markerOnHover = false, anchorOnly = !name && !iconNames, cursor = 'cursor-pointer', className, style, } = props;
     const largeAnchor = anchorSize === 'lg';
-    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable');
+    const classes = classNames(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable', className);
     const anchorClasses = classNames('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
     const singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
-    return (_jsx("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
+    return (_jsx("div", Object.assign({ className: classes, style: Object.assign(Object.assign({}, style), { color: markerBackgroundColor }), "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: _jsxs("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", Object.assign({ className: singleClasses }, { children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && _jsx("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
 };
 export default SingleMapMarker;

package/components/selects/BaseSelectDropdown.d.ts

@@ -48,7 +48,6 @@ export type BaseSelectDropdownProps<T extends SelectOption> = {
     noItemMessage?: string | React.ReactNode;
     focusedItemIndex?: number;
     dropdownClassName?: string;
-    requestItemDOMValues?: boolean;
     keyboardUsed?: boolean;
     useActiveClass?: boolean;
 };

package/components/selects/BaseSelectDropdown.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import { useLayoutEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 import noop from 'lodash/fp/noop';
@@ -40,6 +40,12 @@ const BaseSelectDropdown = (props) => {
             }
         }
     }, [dropDirection, dropdownMenuRef]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => {
+        if (dropdownMenuRef.current) {
+            updateDOMValues(updateItemDOMValues());
+        }
+    }, [dropdownMenuRef.current]);
     // update internal state for isOpen
     const [previousIsOpen, setPreviousIsOpen] = useState(isOpen);
     if (isOpen && !previousIsOpen) {

package/components/selects/Multiselect.js

@@ -24,7 +24,6 @@ const Multiselect = (props) => {
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [itemDOMValues, setItemDOMValues] = useState([]);
     const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [requestItemDOMValues, setRequestItemDOMValues] = useState(false);
     const [keyboardUsed, setKeyboardUsed] = useState(false);
     const refToggle = useRef(null);
     const refMultiSelectWrapper = useRef(null);
@@ -57,12 +56,10 @@ const Multiselect = (props) => {
     if (!isEqual(options, previousOptions)) {
         updateSelectedItems(options, value);
         setFilteredOptions(options);
-        setRequestItemDOMValues(true);
         setPreviousOptions(options);
     }
     const updateDOMValues = (updatedItemDOMValues = []) => {
         setItemDOMValues(updatedItemDOMValues);
-        setRequestItemDOMValues(false);
     };
     const renderFilter = () => (_jsx(MultiselectToggleFilter, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange, multiline: multiline }));
     const renderSelection = () => {
@@ -86,7 +83,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/components/selects/Select.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type SelectOption } from './BaseSelectDropdown';
-import { WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
+import { type WithFeedbackAndAddonProps } from './WithFeedbackAndAddon';
 export type { SelectOption } from './BaseSelectDropdown';
 export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps, 'bsSize'> & {
     /**

package/components/selects/Select.js

@@ -23,7 +23,6 @@ const Select = (props) => {
     const [filteredOptions, setFilteredOptions] = useState(options);
     const [itemDOMValues, setItemDOMValues] = useState([]);
     const [focusedItemIndex, setFocusedItemIndex] = useState(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [requestItemDOMValues, setRequestItemDOMValues] = useState(false);
     const [keyboardUsed, setKeyboardUsed] = useState(false);
     const refSelect = useRef();
     const refToggle = useRef(null);
@@ -44,7 +43,6 @@ const Select = (props) => {
     if (!isEqual(options, previousOptions)) {
         updateSelectedItem(options, value);
         setFilteredOptions(options);
-        setRequestItemDOMValues(true);
         setPreviousOptions(options);
     }
     const [previousValue, setPreviousValue] = useState(value);
@@ -54,7 +52,6 @@ const Select = (props) => {
     }
     const updateDOMValues = (itemDOMValuesToUpdated = []) => {
         setItemDOMValues(itemDOMValuesToUpdated);
-        setRequestItemDOMValues(false);
     };
     const handleClearSelectedItem = () => {
         setSelectedItem(null);
@@ -82,7 +79,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
+        return (_jsx(BaseSelectDropdown, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,17 +1,42 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
+import debounce from 'lodash/fp/debounce';
+const RESIZE_THROTTLING = 100;
 const SmoothScrollbars = forwardRef((componentProps, ref) => {
     const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, } = componentProps;
+    const scrollbarsRef = useRef(null);
+    const contentRef = useRef(null);
+    useImperativeHandle(ref, () => scrollbarsRef.current);
+    useEffect(() => {
+        if (!contentRef.current || !scrollbarsRef.current) {
+            return;
+        }
+        const updateScrollbars = debounce(RESIZE_THROTTLING)(() => {
+            if (scrollbarsRef.current) {
+                // Trigger a update for the scrollbars.
+                // This is needed since the lib does not automatically update on content height changes
+                // See: https://github.com/RobPethick/react-custom-scrollbars-2/issues/12
+                // Use type assertion to tell TypeScript that 'update' exists
+                scrollbarsRef.current.update();
+            }
+        });
+        const resizeObserver = new ResizeObserver(updateScrollbars);
+        resizeObserver.observe(contentRef.current);
+        return () => {
+            resizeObserver.disconnect();
+            updateScrollbars.cancel();
+        };
+    }, []);
     const wrapperClassNames = classNames(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');
     const renderTrackVerticalNames = classNames('scrollbar-track-vertical', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbVerticalNames = classNames('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
     const renderTrackHorizontalNames = classNames('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbHorizontalNames = classNames('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return (_jsx(Scrollbars, Object.assign({ ref: ref, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+    return (_jsx(Scrollbars, Object.assign({ ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
             return _jsx("div", Object.assign({}, props, { className: 'scrollbar-view' }));
         }, renderTrackVertical: props => {
             return _jsx("div", Object.assign({}, props, { className: renderTrackVerticalNames }));
@@ -21,6 +46,6 @@ const SmoothScrollbars = forwardRef((componentProps, ref) => {
             return _jsx("div", Object.assign({}, props, { className: renderTrackHorizontalNames }));
         }, renderThumbHorizontal: props => {
             return _jsx("div", Object.assign({}, props, { className: renderThumbHorizontalNames }));
-        } }, { children: children })));
+        } }, { children: _jsx("div", Object.assign({ className: 'scrollbar-content-wrapper', ref: contentRef }, { children: children })) })));
 });
 export default SmoothScrollbars;

package/hooks/useSorting.d.ts

@@ -0,0 +1,29 @@
+import { type SortDirectionType } from '../utils/SortUtils';
+type SortKey<T> = keyof T | [keyof T, keyof T];
+type UseSortingResult<T> = {
+    /**
+     * The sorted data
+     */
+    sortedItems: T[];
+    /**
+     * The key(s) to sort the data for
+     */
+    sortKey: SortKey<T>;
+    /**
+     * The current direction that the data is sorted
+     */
+    sortDirection: SortDirectionType;
+    /**
+     * Function to change the sorting key(s) afterwards
+     * @param newKey the new sorting key(s)
+     * @returns
+     */
+    setSortKey: (newKey: SortKey<T>) => void;
+    /**
+     * Function to toggle the sorting between ascending and descending order
+     * @returns
+     */
+    toggleDirection: () => void;
+};
+declare const useSorting: <T>(items: T[], initialKey: SortKey<T>, initialDirection?: SortDirectionType, enableNaturalSort?: boolean, isCaseSensitive?: boolean) => UseSortingResult<T>;
+export default useSorting;

package/hooks/useSorting.js

@@ -0,0 +1,41 @@
+import { useState, useMemo } from 'react';
+import { naturalSortByProperty, SortDirection } from '../utils/SortUtils';
+const useSorting = (items, initialKey, initialDirection = SortDirection.ASCENDING, enableNaturalSort = true, isCaseSensitive = false) => {
+    const [sortKey, setSortKey] = useState(initialKey);
+    const [sortDirection, setSortDirection] = useState(initialDirection);
+    const sortedItems = useMemo(() => {
+        const sortByKey = (arr, key) => {
+            return enableNaturalSort
+                ? naturalSortByProperty(arr, key, sortDirection, isCaseSensitive)
+                : arr.sort((a, b) => {
+                    const aVal = a[key];
+                    const bVal = b[key];
+                    if (aVal < bVal)
+                        return sortDirection === SortDirection.ASCENDING ? -1 : 1;
+                    if (aVal > bVal)
+                        return sortDirection === SortDirection.ASCENDING ? 1 : -1;
+                    return 0;
+                });
+        };
+        if (Array.isArray(sortKey)) {
+            const [primaryKey, secondaryKey] = sortKey;
+            const primarySorted = sortByKey(items, primaryKey);
+            // Group items with the same primary key value
+            const groups = primarySorted.reduce((acc, item) => {
+                const key = String(item[primaryKey]);
+                if (!acc[key])
+                    acc[key] = [];
+                acc[key].push(item);
+                return acc;
+            }, {});
+            // Sort each group by the secondary key and flatten the result
+            return Object.values(groups).flatMap(group => sortByKey(group, secondaryKey));
+        }
+        return sortByKey(items, sortKey);
+    }, [items, sortKey, sortDirection, enableNaturalSort, isCaseSensitive]);
+    const toggleDirection = () => {
+        setSortDirection(prev => prev === SortDirection.ASCENDING ? SortDirection.DESCENDING : SortDirection.ASCENDING);
+    };
+    return { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection };
+};
+export default useSorting;

package/lib/es/FadeExpander.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeExpander';
+export * from './components/fade/FadeExpander';

package/lib/es/FadeExpander.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FadeExpander_1 = require("./components/fade/FadeExpander");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FadeExpander_1).default; } });
+tslib_1.__exportStar(require("./components/fade/FadeExpander"), exports);

package/lib/es/FadeUp.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/fade/FadeUp';
+export * from './components/fade/FadeUp';

package/lib/es/FadeUp.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var FadeUp_1 = require("./components/fade/FadeUp");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(FadeUp_1).default; } });
+tslib_1.__exportStar(require("./components/fade/FadeUp"), exports);

package/lib/es/XAxis.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/XAxis';
+export * from './components/charts/XAxis';

package/lib/es/XAxis.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var XAxis_1 = require("./components/charts/XAxis");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(XAxis_1).default; } });
+tslib_1.__exportStar(require("./components/charts/XAxis"), exports);

package/lib/es/YAxis.d.ts

@@ -0,0 +1,2 @@
+export { default } from './components/charts/YAxis';
+export * from './components/charts/YAxis';

package/lib/es/YAxis.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var YAxis_1 = require("./components/charts/YAxis");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(YAxis_1).default; } });
+tslib_1.__exportStar(require("./components/charts/YAxis"), exports);

package/lib/es/components/applicationLayout/ApplicationLayoutBody.d.ts

@@ -12,6 +12,11 @@ export type ApplicationLayoutBodyProps = {
      * @default true
      */
     forceScrollbar?: boolean;
+    /**
+     * Prop to trigger scroll reset from outside. This comes in handy when changing the body content
+     * and to reset the scrolling like when the pathname changes from an body internal menu.
+     */
+    scrollResetTrigger?: any;
     /**
      * The ApplicationLayoutBodyBanner component.
      */

package/lib/es/components/applicationLayout/ApplicationLayoutBody.js

@@ -9,11 +9,20 @@ const SmoothScrollbars_1 = tslib_1.__importDefault(require("../smoothScrollbars/
 const RESIZE_THROTTLING = 200;
 const DEFAULT_BOTTOM_BAR_HEIGHT = 54;
 const ApplicationLayoutBody = (0, react_1.forwardRef)((props, ref) => {
-    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "children"]);
+    const { className, innerClassName, forceScrollbar = true, enableScrollToTop = true, banner, navigation, bottomBar, bottomBarHeight = DEFAULT_BOTTOM_BAR_HEIGHT, scrollResetTrigger, children } = props, remainingProps = tslib_1.__rest(props, ["className", "innerClassName", "forceScrollbar", "enableScrollToTop", "banner", "navigation", "bottomBar", "bottomBarHeight", "scrollResetTrigger", "children"]);
     const [offset, setOffset] = (0, react_1.useState)(0);
     const moduleContentRef = (0, react_1.useRef)(null);
     const layoutBodyRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(ref, () => layoutBodyRef, []);
+    // Reset scroll position when children are different. This fixes the issue of
+    // changing body content (like in another route) and still having the same scroll position
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => {
+        if (moduleContentRef.current) {
+            moduleContentRef.current.scrollTop(0);
+            setOffset(0);
+        }
+    }, [scrollResetTrigger]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (((_a = layoutBodyRef.current) === null || _a === void 0 ? void 0 : _a.parentNode) instanceof HTMLElement) {