@rio-cloud/rio-uikit 1.4.0 → 1.5.0

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/components/switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 import { type CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
@@ -46,9 +46,10 @@ export type SwitchProps = {
      */
     labelPosition?: 'left' | 'right';
 };
-declare const Switch: {
-    (props: PropsWithChildren<SwitchProps>): import("react/jsx-runtime").JSX.Element;
-    LABEL_POSITION_LEFT: "left";
-    LABEL_POSITION_RIGHT: "right";
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    LABEL_POSITION_LEFT: 'left';
+    LABEL_POSITION_RIGHT: 'right';
 };
 export default Switch;

package/lib/es/components/switch/Switch.js

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
-require("react");
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const currentColors_1 = require("../../utils/currentColors");
-const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
+const Switch = (0, react_1.forwardRef)((props, ref) => {
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -19,8 +19,8 @@ const Switch = (props) => {
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
     const switchBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
-};
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
+});
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';
 exports.default = Switch;

package/lib/es/components/tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import { type PropsWithChildren } from 'react';
+import React from 'react';
 export type TagProps = {
     /**
      * Defines if the tag is active.
@@ -65,5 +65,5 @@ export type TagProps = {
      */
     className?: string;
 };
-declare const Tag: (props: PropsWithChildren<TagProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Tag: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<TagProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Tag;

package/lib/es/components/tag/Tag.js

@@ -3,12 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
-require("react");
+const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const Tag = (props) => {
+const Tag = (0, react_1.forwardRef)((props, ref) => {
     const { children, icon, active = false, disabled = false, clickable = false, selectable = false, deletable = false, revertable = false, multiline = false, muted = false, round = true, size, className } = props, remainingProps = tslib_1.__rest(props, ["children", "icon", "active", "disabled", "clickable", "selectable", "deletable", "revertable", "multiline", "muted", "round", "size", "className"]);
-    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', // sounds wrong, but is right
-    props.className);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: tagClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
-};
+    const tagClasses = (0, classnames_1.default)('tag', size === 'small' && 'tag-small', icon && `rioglyph ${icon}`, active && 'active clickable rioglyph rioglyph-ok', disabled && 'disabled', clickable && 'clickable', selectable && 'selectable clickable rioglyph rioglyph-checkbox', deletable && 'deletable clickable rioglyph rioglyph-remove', revertable && 'revertable clickable rioglyph rioglyph-revert', multiline && 'multiline', muted && 'tag-muted', !round && 'rounded', className);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref }, remainingProps, { className: tagClasses }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tag-inner' }, { children: children })) })));
+});
 exports.default = Tag;

package/lib/es/hooks/useDOMNodeCount.d.ts

@@ -0,0 +1,2 @@
+declare const useDOMNodeCount: () => number;
+export default useDOMNodeCount;

package/lib/es/hooks/useDOMNodeCount.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const useDOMNodeCount = () => {
+    const [nodeCount, setNodeCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const countNodes = () => {
+            const body = document.body;
+            if (body) {
+                setNodeCount(body.getElementsByTagName('*').length);
+            }
+        };
+        // Initial count
+        countNodes();
+        // Create a MutationObserver to watch for changes in the DOM
+        const observer = new MutationObserver(() => {
+            countNodes();
+        });
+        // Observe the body element for changes in the child list or subtree
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        // Cleanup on unmount
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+    return nodeCount;
+};
+exports.default = useDOMNodeCount;

package/lib/es/hooks/useEventListenerCount.d.ts

@@ -0,0 +1,5 @@
+declare const useEventListenerCount: () => {
+    counts: Record<string, number>;
+    total: number;
+};
+export default useEventListenerCount;

package/lib/es/hooks/useEventListenerCount.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
+const useEventListenerCount = () => {
+    const [listenerCounts, setListenerCounts] = (0, react_1.useState)({});
+    const [totalCount, setTotalCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        console.log('init useEventListener interceptor');
+        const eventListeners = new Set();
+        const originalAddEventListener = EventTarget.prototype.addEventListener;
+        const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
+        const updateListeners = (0, throttle_1.default)(1000)(() => {
+            const counts = Array.from(eventListeners).reduce((acc, { type }) => {
+                acc[type] = (acc[type] || 0) + 1;
+                return acc;
+            }, {});
+            setListenerCounts(counts);
+            setTotalCount(eventListeners.size);
+        });
+        EventTarget.prototype.addEventListener = function (type, listener, options) {
+            if (listener) {
+                eventListeners.add({ type, listener });
+                updateListeners();
+            }
+            originalAddEventListener.call(this, type, listener, options);
+        };
+        EventTarget.prototype.removeEventListener = function (type, listener, options) {
+            eventListeners.forEach(item => {
+                if (item.type === type && item.listener === listener) {
+                    eventListeners.delete(item);
+                }
+            });
+            updateListeners();
+            originalRemoveEventListener.call(this, type, listener, options);
+        };
+        return () => {
+            EventTarget.prototype.addEventListener = originalAddEventListener;
+            EventTarget.prototype.removeEventListener = originalRemoveEventListener;
+        };
+    }, []);
+    return { counts: listenerCounts, total: totalCount };
+};
+exports.default = useEventListenerCount;

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/useDOMNodeCount.d.ts

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

package/lib/es/useDOMNodeCount.js

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

package/lib/es/useEventListenerCount.d.ts

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

package/lib/es/useEventListenerCount.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const tslib_1 = require("tslib");
+var useEventListenerCount_1 = require("./hooks/useEventListenerCount");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(useEventListenerCount_1).default; } });
+tslib_1.__exportStar(require("./hooks/useEventListenerCount"), 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>;