@rio-cloud/rio-uikit 1.4.1 → 1.5.0

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

@@ -0,0 +1,255 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorMapHighlight = exports.colorMapRating = exports.colorMapMarker = exports.colorMapStatus = exports.colorMapBrand = exports.colorMapGray = exports.colorMapWarmup = exports.colorMapColdplay = void 0;
+exports.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)',
+    },
+};
+exports.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)',
+    },
+};
+exports.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)',
+    },
+};
+exports.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)',
+    },
+};
+exports.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)',
+    },
+};
+exports.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)',
+    },
+};
+exports.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)',
+    },
+};
+exports.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/lib/es/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/lib/es/components/map/utils/mapTypes.js

@@ -22,6 +22,7 @@ exports.markerColorOptions = [
     'bg-map-marker-success',
     'bg-map-marker-warning',
     'bg-map-marker-danger',
+    'bg-map-marker-restrictions',
 ];
 exports.markerColorMapping = {
     'bg-map-marker-asset': '--color-map-marker-asset',
@@ -32,4 +33,5 @@ exports.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/lib/es/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/lib/es/components/mapMarker/SingleMapMarker.js

@@ -19,12 +19,12 @@ const MapStateIndicator = (props) => {
 };
 const getIcons = (iconNames = []) => iconNames.map((name, index) => ((0, jsx_runtime_1.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 = (0, classnames_1.default)(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable');
+    const classes = (0, classnames_1.default)(active && 'active', 'rio-map-marker', 'rio-map-marker-bottom-center', !clickable && 'not-clickable', className);
     const anchorClasses = (0, classnames_1.default)('rio-map-anchor', largeAnchor ? 'rio-map-anchor-lg' : '', cursor);
     const singleClasses = (0, classnames_1.default)('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', cursor);
     const markerBackgroundColor = `var(${mapTypes_1.markerColorMapping[markerColor]})`;
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: { color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: singleClasses }, { children: [(0, jsx_runtime_1.jsx)(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-anchor-arrow' })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, style: Object.assign(Object.assign({}, style), { color: markerBackgroundColor }), "data-marker-type": markerColor.replace('bg-', 'single-') }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'rio-map-marker-translate' }, { children: [!anchorOnly && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: singleClasses }, { children: [(0, jsx_runtime_1.jsx)(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-name' }, { children: name })), exceptionCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble exception' }, { children: exceptionCount })), warningCount > 0 && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'rio-map-bubble warning' }, { children: warningCount }))] })), (0, jsx_runtime_1.jsx)("div", { className: 'rio-map-anchor-arrow' })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: anchorClasses }, { children: anchorIconName && largeAnchor && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${anchorIconName}` }) }))] })) })));
 };
 exports.default = SingleMapMarker;

package/lib/es/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/lib/es/components/selects/BaseSelectDropdown.js

@@ -44,6 +44,12 @@ const BaseSelectDropdown = (props) => {
             }
         }
     }, [dropDirection, dropdownMenuRef]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    (0, react_1.useEffect)(() => {
+        if (dropdownMenuRef.current) {
+            updateDOMValues(updateItemDOMValues());
+        }
+    }, [dropdownMenuRef.current]);
     // update internal state for isOpen
     const [previousIsOpen, setPreviousIsOpen] = (0, react_1.useState)(isOpen);
     if (isOpen && !previousIsOpen) {

package/lib/es/components/selects/Multiselect.js

@@ -26,7 +26,6 @@ const Multiselect = (props) => {
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
     const [itemDOMValues, setItemDOMValues] = (0, react_1.useState)([]);
     const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [requestItemDOMValues, setRequestItemDOMValues] = (0, react_1.useState)(false);
     const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(false);
     const refToggle = (0, react_1.useRef)(null);
     const refMultiSelectWrapper = (0, react_1.useRef)(null);
@@ -59,12 +58,10 @@ const Multiselect = (props) => {
     if (!(0, isEqual_1.default)(options, previousOptions)) {
         updateSelectedItems(options, value);
         setFilteredOptions(options);
-        setRequestItemDOMValues(true);
         setPreviousOptions(options);
     }
     const updateDOMValues = (updatedItemDOMValues = []) => {
         setItemDOMValues(updatedItemDOMValues);
-        setRequestItemDOMValues(false);
     };
     const renderFilter = () => ((0, jsx_runtime_1.jsx)(MultiselectToggleFilter_1.default, { isActive: isFilterActive || !!filterValue, selectedItemIds: selectedItemIds, filterValue: filterValue, onFilterChange: handleFilterChange, multiline: multiline }));
     const renderSelection = () => {
@@ -88,7 +85,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { 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 ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { 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/lib/es/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/lib/es/components/selects/Select.js

@@ -25,7 +25,6 @@ const Select = (props) => {
     const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
     const [itemDOMValues, setItemDOMValues] = (0, react_1.useState)([]);
     const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(DEFAULT_FOCUSED_ITEM_INDEX);
-    const [requestItemDOMValues, setRequestItemDOMValues] = (0, react_1.useState)(false);
     const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(false);
     const refSelect = (0, react_1.useRef)();
     const refToggle = (0, react_1.useRef)(null);
@@ -46,7 +45,6 @@ const Select = (props) => {
     if (!(0, isEqual_1.default)(options, previousOptions)) {
         updateSelectedItem(options, value);
         setFilteredOptions(options);
-        setRequestItemDOMValues(true);
         setPreviousOptions(options);
     }
     const [previousValue, setPreviousValue] = (0, react_1.useState)(value);
@@ -56,7 +54,6 @@ const Select = (props) => {
     }
     const updateDOMValues = (itemDOMValuesToUpdated = []) => {
         setItemDOMValues(itemDOMValuesToUpdated);
-        setRequestItemDOMValues(false);
     };
     const handleClearSelectedItem = () => {
         setSelectedItem(null);
@@ -84,7 +81,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { 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 ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { 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/lib/es/components/smoothScrollbars/SmoothScrollbars.js

@@ -7,14 +7,39 @@ const react_1 = require("react");
 const react_custom_scrollbars_2_1 = require("react-custom-scrollbars-2");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
+const RESIZE_THROTTLING = 100;
 const SmoothScrollbars = (0, react_1.forwardRef)((componentProps, ref) => {
     const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop_1.default, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, } = componentProps;
+    const scrollbarsRef = (0, react_1.useRef)(null);
+    const contentRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => scrollbarsRef.current);
+    (0, react_1.useEffect)(() => {
+        if (!contentRef.current || !scrollbarsRef.current) {
+            return;
+        }
+        const updateScrollbars = (0, debounce_1.default)(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 = (0, classnames_1.default)(className, slideIn && 'scrollbar-fly-in', 'smooth-scrollbar-wrapper');
     const renderTrackVerticalNames = (0, classnames_1.default)('scrollbar-track-vertical', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbVerticalNames = (0, classnames_1.default)('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
     const renderTrackHorizontalNames = (0, classnames_1.default)('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbHorizontalNames = (0, classnames_1.default)('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, Object.assign({ ref: ref, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+    return ((0, jsx_runtime_1.jsx)(react_custom_scrollbars_2_1.Scrollbars, Object.assign({ ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
             return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: 'scrollbar-view' }));
         }, renderTrackVertical: props => {
             return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderTrackVerticalNames }));
@@ -24,6 +49,6 @@ const SmoothScrollbars = (0, react_1.forwardRef)((componentProps, ref) => {
             return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderTrackHorizontalNames }));
         }, renderThumbHorizontal: props => {
             return (0, jsx_runtime_1.jsx)("div", Object.assign({}, props, { className: renderThumbHorizontalNames }));
-        } }, { children: children })));
+        } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'scrollbar-content-wrapper', ref: contentRef }, { children: children })) })));
 });
 exports.default = SmoothScrollbars;

package/lib/es/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/lib/es/hooks/useSorting.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const SortUtils_1 = require("../utils/SortUtils");
+const useSorting = (items, initialKey, initialDirection = SortUtils_1.SortDirection.ASCENDING, enableNaturalSort = true, isCaseSensitive = false) => {
+    const [sortKey, setSortKey] = (0, react_1.useState)(initialKey);
+    const [sortDirection, setSortDirection] = (0, react_1.useState)(initialDirection);
+    const sortedItems = (0, react_1.useMemo)(() => {
+        const sortByKey = (arr, key) => {
+            return enableNaturalSort
+                ? (0, SortUtils_1.naturalSortByProperty)(arr, key, sortDirection, isCaseSensitive)
+                : arr.sort((a, b) => {
+                    const aVal = a[key];
+                    const bVal = b[key];
+                    if (aVal < bVal)
+                        return sortDirection === SortUtils_1.SortDirection.ASCENDING ? -1 : 1;
+                    if (aVal > bVal)
+                        return sortDirection === SortUtils_1.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 === SortUtils_1.SortDirection.ASCENDING ? SortUtils_1.SortDirection.DESCENDING : SortUtils_1.SortDirection.ASCENDING);
+    };
+    return { sortedItems, sortKey, sortDirection, setSortKey, toggleDirection };
+};
+exports.default = useSorting;

package/lib/es/storageUtils.d.ts

@@ -0,0 +1 @@
+export * from './utils/storageUtils';

package/lib/es/storageUtils.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./utils/storageUtils"), exports);

package/lib/es/styles/variables/colors/colors.json

@@ -10,7 +10,7 @@
     "gray-light": "#D0D8DE",
     "gray-lighter": "#E5EBF0",
     "gray-lightest": "#f6f8f9",
-    "gray-decent": "#fdfdfd",
+    "gray-decent": "#fcfcfd",
     "brand-primary": "#30b4c0",
     "brand-secondary": "#b23672",
     "brand-primary-decent": "#f4fbfc",
@@ -31,13 +31,14 @@
     "color-map-marker-text": "#ffffff",
     "color-map-marker-active": "#ffffff",
     "color-map-marker-asset": "#2a3740",
-    "color-map-marker-poi": "#cb3995",
-    "color-map-marker-geofence": "#8c63b9",
+    "color-map-marker-poi": "#d5429f",
+    "color-map-marker-geofence": "#f9636e",
     "color-map-marker-route": "#36afd7",
     "color-map-marker-info": "#3f759b",
     "color-map-marker-success": "#5cb85c",
     "color-map-marker-warning": "#ff8e3c",
     "color-map-marker-danger": "#e22837",
+    "color-map-marker-restrictions": "#8F68ED",
     "color-rating-1": "#e22837",
     "color-rating-2": "#ff8e3c",
     "color-rating-3": "#f8c575",

package/lib/es/urlFeatureToggles.d.ts

@@ -0,0 +1 @@
+export * from './utils/urlFeatureToggles';

package/lib/es/urlFeatureToggles.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./utils/urlFeatureToggles"), exports);

package/lib/es/useSorting.d.ts

@@ -0,0 +1,2 @@
+export { default } from './hooks/useSorting';
+export * from './hooks/useSorting';

package/lib/es/useSorting.js

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

package/lib/es/utils/storageUtils.d.ts

@@ -0,0 +1,5 @@
+export declare const storage: {
+    save: (key: string, value: string | boolean, prefix?: string) => string | boolean | undefined;
+    load: (key: string, prefix?: string) => string | undefined;
+    removeItem: (key: string, prefix?: string) => void;
+};

package/lib/es/utils/storageUtils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.storage = void 0;
+const localStorage = window.localStorage;
+const STORAGE_PREFIX = '';
+const save = (key, value, prefix = STORAGE_PREFIX) => {
+    try {
+        localStorage.setItem(`${prefix}${key}`, JSON.stringify(value));
+        return value;
+    }
+    catch (_) {
+        // Intentionally left blank
+    }
+};
+const removeItem = (key, prefix = STORAGE_PREFIX) => {
+    try {
+        localStorage.removeItem(`${prefix}${key}`);
+    }
+    catch (_) {
+        // Intentionally left blank
+    }
+};
+const load = (key, prefix = STORAGE_PREFIX) => {
+    try {
+        const item = localStorage.getItem(`${prefix}${key}`);
+        return item && JSON.parse(item);
+    }
+    catch (_) {
+        // Intentionally left blank
+    }
+};
+exports.storage = { save, load, removeItem };

package/lib/es/utils/urlFeatureToggles.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="lodash" />
+export declare const DEFAULT_PREFIX = "featureToggle.";
+export type ToggleType = string | boolean | number;
+export declare const cleanupOldToggles: (oldToggles: string[], prefix: string) => void;
+export declare const asBoolean: (urlParamName: string) => (prefix: string) => ToggleType | undefined;
+export declare const asString: (urlParamName: string) => (prefix: string) => ToggleType | undefined;
+export declare const asNumber: (urlParamName: string) => (prefix: string) => ToggleType | undefined;
+export declare const detectFeatureToggles: (toggleDefinitions: {
+    [key: string]: (paramName: string) => ToggleType | undefined;
+}, oldToggles?: string[], prefix?: string) => import("lodash").Dictionary<ToggleType | undefined>;