@rio-cloud/rio-uikit 1.7.0 → 1.8.0

package/components/dropdown/ButtonDropdown.js

@@ -25,71 +25,86 @@ const getPlacement = (pullRight, dropup) => {
     }
     return 'bottom-start';
 };
-const ButtonDropdown = forwardRef((props, ref) => {
-    const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleClassName = '', dropdownClassName, className = '', ...remainingProps } = props;
-    const [internalOpen, setInternalOpen] = useState(open);
-    const [refDropdownToggle, setRefDropdownToggle] = useState(null);
-    const [refDropdownMenu, setRefDropdownMenu] = useState(null);
-    const [refSplitButtonToggle, setRefSplitButtonToggle] = useState(null);
-    const defaultPopperConfig = {
-        placement: getPlacement(pullRight, dropup),
-        modifiers: [],
-    };
-    const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
-    const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
-    const isUncontrolled = isNil(open);
-    const isOpen = isUncontrolled ? internalOpen : open;
-    const wrapperRef = useClickOutside(event => {
-        if (usePortal) {
-            // In case the dropdown is rendered via portal the clickOutside the toggle button element is
-            // triggered since the dropdown is not a child of the wrapper element.
-            // In this case we need to check if the event target is inside the dropdown-menu and prevent closing
-            // the dropdown
-            if (!refDropdownMenu?.contains(event.target)) {
+const createButtonDropdown = () => {
+    return forwardRef((props, ref) => {
+        const { id = Math.random().toString(36).slice(2, 16), items = [], bsSize = 'md', bsStyle = 'default', variant, disabled = false, iconOnly = false, title, splitButton = false, customDropdown, open, dropup = false, pullRight = false, noCaret = false, onOpen = noop, onClose = noop, onLabelButtonClick = noop, usePortal = false, popperConfig, toggleButtonType = 'button', toggleClassName = '', dropdownClassName, className = '', ...remainingProps } = props;
+        const [internalOpen, setInternalOpen] = useState(open);
+        const [refDropdownToggle, setRefDropdownToggle] = useState(null);
+        const [refDropdownMenu, setRefDropdownMenu] = useState(null);
+        const [refSplitButtonToggle, setRefSplitButtonToggle] = useState(null);
+        const defaultPopperConfig = {
+            placement: getPlacement(pullRight, dropup),
+            modifiers: [],
+        };
+        const popperParentRef = splitButton && pullRight ? refSplitButtonToggle : refDropdownToggle;
+        const { styles, attributes } = usePopper(popperParentRef, refDropdownMenu, popperConfig || defaultPopperConfig);
+        const isUncontrolled = isNil(open);
+        const isOpen = isUncontrolled ? internalOpen : open;
+        const wrapperRef = useClickOutside(event => {
+            if (usePortal) {
+                // In case the dropdown is rendered via portal the clickOutside the toggle button element is
+                // triggered since the dropdown is not a child of the wrapper element.
+                // In this case we need to check if the event target is inside the dropdown-menu and prevent closing
+                // the dropdown
+                if (!refDropdownMenu?.contains(event.target)) {
+                    closeMenu();
+                }
+            }
+            else {
                 closeMenu();
             }
-        }
-        else {
-            closeMenu();
-        }
-    }, DEFAULT_EVENT_TYPES, Boolean(isOpen) // only listen to clicks outside when the dropdown is open
-    );
-    const dropdownRoot = getOrCreatePortalRoot();
-    const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
-    useEffect(() => {
-        if (!isUncontrolled) {
-            setInternalOpen(open);
-        }
-    }, [isUncontrolled, open]);
-    const toggleOpen = (event) => {
-        const isDropdownOpen = isUncontrolled ? internalOpen : open;
-        if (isDropdownOpen) {
+        }, DEFAULT_EVENT_TYPES, Boolean(isOpen) // only listen to clicks outside when the dropdown is open
+        );
+        const dropdownRoot = getOrCreatePortalRoot();
+        const shouldShowCaret = !noCaret && !splitButton && !iconOnly;
+        useEffect(() => {
+            if (!isUncontrolled) {
+                setInternalOpen(open);
+            }
+        }, [isUncontrolled, open]);
+        const toggleOpen = (event) => {
+            const isDropdownOpen = isUncontrolled ? internalOpen : open;
+            if (isDropdownOpen) {
+                closeMenu();
+            }
+            else {
+                openMenu(event);
+            }
+        };
+        const openMenu = (event) => {
+            if (isUncontrolled) {
+                setInternalOpen(true);
+            }
+            if (event) {
+                onOpen(event);
+            }
+        };
+        const closeMenu = () => {
+            if (isUncontrolled) {
+                setInternalOpen(false);
+            }
+            onClose();
+        };
+        const handleSplitLabelButtonClick = () => {
             closeMenu();
-        }
-        else {
-            openMenu(event);
-        }
-    };
-    const openMenu = (event) => {
-        if (isUncontrolled) {
-            setInternalOpen(true);
-        }
-        onOpen(event);
-    };
-    const closeMenu = () => {
-        if (isUncontrolled) {
-            setInternalOpen(false);
-        }
-        onClose();
-    };
-    const handleSplitLabelButtonClick = () => {
-        closeMenu();
-        onLabelButtonClick();
-    };
-    const handleDropdownButtonClick = splitButton ? handleSplitLabelButtonClick : toggleOpen;
-    const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
-    const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
-    const dropdownMenu = (_jsx(MenuItemList, { className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper, ...attributes.popper, children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) }));
-    return (_jsxs("div", { ...remainingProps, className: wrapperClasses, ref: wrapperRef, children: [_jsx(DropdownToggleButton, { id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, className: toggleClassName, children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) }), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: toggleOpen, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] }));
-});
+            onLabelButtonClick();
+        };
+        const handleSplitCaretButtonClick = (event) => {
+            toggleOpen(event);
+        };
+        const handleDropdownButtonClick = (event) => {
+            if (splitButton) {
+                handleSplitLabelButtonClick();
+            }
+            else {
+                toggleOpen(event);
+            }
+        };
+        const wrapperClasses = classNames('dropdown', 'btn-group', isOpen && 'open', className);
+        const dropdownClasses = classNames(usePortal && 'dropdown-portal', splitButton && pullRight && 'pull-right', dropdownClassName);
+        const dropdownMenu = (_jsx(MenuItemList, { className: dropdownClasses, ref: setRefDropdownMenu, style: styles.popper, ...attributes.popper, children: customDropdown ? customDropdown : _jsx(MenuItems, { items: items, closeMenu: toggleOpen }) }));
+        return (_jsxs("div", { ...remainingProps, className: wrapperClasses, ref: wrapperRef, children: [_jsx(DropdownToggleButton, { id: id, splitButton: splitButton, bsStyle: bsStyle, bsSize: bsSize, variant: variant, iconOnly: iconOnly, disabled: disabled, ref: setRefDropdownToggle, onClick: handleDropdownButtonClick, outerRef: ref, toggleButtonType: toggleButtonType, className: toggleClassName, children: _jsxs(_Fragment, { children: [title, shouldShowCaret && _jsx(Caret, {})] }) }), splitButton && (_jsx(SplitCaretButton, { id: id, bsStyle: bsStyle, bsSize: bsSize, disabled: disabled, className: toggleClassName, onClick: handleSplitCaretButtonClick, ref: setRefSplitButtonToggle })), isOpen && usePortal && ReactDOM.createPortal(dropdownMenu, dropdownRoot), isOpen && !usePortal && dropdownMenu] }));
+    });
+};
+const ButtonDropdown = createButtonDropdown();
 export default ButtonDropdown;

package/components/dropdown/DropdownToggleButton.d.ts

@@ -1,16 +1,19 @@
-import React, { type HTMLProps } from 'react';
+import { type HTMLProps, type PropsWithChildren } from 'react';
 import { type BUTTON_VARIANT, type BUTTON_SIZE, type BUTTON_STYLE } from '../button/Button';
+export type DropdownToggleButtonType = 'button' | 'tag' | 'label';
+export type DropdownToggleEvent<T extends DropdownToggleButtonType = 'button'> = T extends 'button' ? React.MouseEvent<HTMLButtonElement> : React.MouseEvent<HTMLDivElement>;
 export type DropdownToggleButtonProps = HTMLProps<HTMLButtonElement> & {
     id?: string;
     disabled?: boolean;
     splitButton?: boolean;
     iconOnly?: boolean;
-    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     bsSize: BUTTON_SIZE;
     bsStyle: BUTTON_STYLE;
     variant?: BUTTON_VARIANT;
-    outerRef?: React.Ref<HTMLButtonElement>;
+    toggleButtonType?: DropdownToggleButtonType;
+    outerRef?: React.Ref<HTMLButtonElement | HTMLDivElement>;
     className?: string;
 };
-declare const DropdownToggleButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownToggleButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownToggleButton: import("react").ForwardRefExoticComponent<Omit<PropsWithChildren<DropdownToggleButtonProps>, "ref"> & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>>;
 export default DropdownToggleButton;

package/components/dropdown/DropdownToggleButton.js

@@ -4,9 +4,17 @@ import classNames from 'classnames';
 import Button from '../button/Button';
 import useMergeRefs from '../../hooks/useMergeRefs';
 const DropdownToggleButton = forwardRef((props, ref) => {
-    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, className = '', children, outerRef, ...remainingProps } = props;
+    const { id, disabled, bsSize, bsStyle, variant, splitButton = false, onClick, toggleButtonType = 'button', className = '', children, outerRef, iconOnly, ...remainingProps } = props;
     const toggleRef = useMergeRefs(outerRef, ref);
-    const labelButtonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
-    return (_jsx(Button, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, className: labelButtonClasses, children: children }));
+    const buttonClasses = classNames(!splitButton && 'dropdown-toggle', !splitButton && className);
+    const labelClasses = classNames('dropdown-toggle', 'label', `label-${bsStyle}`, 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
+    const tagClasses = classNames('dropdown-toggle', 'tag', 'clickable height-auto', bsSize === 'sm' && 'tag-small', 'display-flex align-items-center', 'user-select-none cursor-pointer', disabled && 'pointer-events-none', className);
+    if (toggleButtonType === 'tag') {
+        return (_jsx("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: tagClasses, children: children }));
+    }
+    if (toggleButtonType === 'label') {
+        return (_jsx("div", { ...remainingProps, id: id, ref: toggleRef, onClick: onClick, className: labelClasses, children: children }));
+    }
+    return (_jsx(Button, { ...remainingProps, id: splitButton ? `button-${id}` : id, type: 'button', ref: toggleRef, disabled: disabled, bsStyle: bsStyle, bsSize: bsSize, variant: variant, onClick: onClick, iconOnly: iconOnly, className: buttonClasses, children: children }));
 });
 export default DropdownToggleButton;

package/components/formLabel/FormLabel.js

@@ -1,17 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
+import { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 const FormLabel = (props) => {
     const { className = '', children, supportingText, ...remainingProps } = props;
+    const elementRef = useRef(null);
+    const [parentSize, setParentSize] = useState(null);
     const isLabel = 'htmlFor' in remainingProps;
+    useEffect(() => {
+        if (!elementRef.current) {
+            return;
+        }
+        const parent = elementRef.current.parentElement;
+        if (!parent) {
+            return;
+        }
+        if (parent.classList.contains('form-group-lg')) {
+            setParentSize('lg');
+        }
+        else if (parent.classList.contains('form-group-sm')) {
+            setParentSize('sm');
+        }
+    }, []);
+    const supportingTextClasses = classNames('text-color-gray', 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
     if (isLabel) {
-        const labelClasses = classNames('display-inline-flex flex-wrap justify-content-between width-100pct', className);
+        const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
         return (
         // biome-ignore lint/a11y/noLabelWithoutControl: <explanation>
-        _jsxs("label", { ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+        _jsxs("label", { ref: elementRef, ...remainingProps, className: labelClasses, children: [_jsx("span", { children: children }), supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
     }
-    const classes = classNames('text-size-12 text-color-dark', 'max-width-100pct', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
+    const classes = classNames('text-color-dark', 'max-width-100pct', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12', !supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', !className.includes('margin-bottom') && 'margin-bottom-5', className);
     return (
     // @ts-ignore
-    _jsxs("div", { ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: 'text-italic text-size-12 text-color-gray', children: supportingText })] }));
+    _jsxs("div", { ref: elementRef, ...remainingProps, className: classes, children: [children, supportingText && _jsx("span", { className: supportingTextClasses, children: supportingText })] }));
 };
 export default FormLabel;

package/components/listMenu/ListMenu.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from 'react';
+// biome-ignore lint/style/useImportType: <explanation>
+import { useEffect, useRef, useState } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import debounce from 'lodash/fp/debounce';
 import classNames from 'classnames';
@@ -38,11 +39,13 @@ const ListMenu = (props) => {
         }
     });
     // Convert the menu to an expandable panel for smaller screens
-    const handleResize = debounce(RESIZE_THROTTLING)(() => {
+    const handleMobileSize = debounce(RESIZE_THROTTLING)(() => {
         buildMobileHeader();
         setIsMobileMode(window.innerWidth < MOBILE_MAX_WIDTH);
     });
-    useWindowResize(handleResize);
+    // Render a dropdown menu on mobile on mount
+    useEffect(handleMobileSize, []);
+    useWindowResize(handleMobileSize);
     const focusInput = () => {
         inputRef.current?.focus();
     };
@@ -56,7 +59,8 @@ const ListMenu = (props) => {
     useEffectOnce(() => {
         focusFilter && focusInput();
     });
-    useLayoutEffect(() => buildMobileHeader, [menuItems]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+    useEffect(() => buildMobileHeader, [menuItems]);
     const handleClear = () => focusFilter && focusInput();
     const handleFilterChange = (value) => {
         setFilterValue(value);

package/components/map/components/Map.js

@@ -25,7 +25,7 @@ const Map = (props) => {
     const [showCluster, setShowCluster] = useState(externalShowCluster);
     const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
     // Only short locale is supported by HERE Map
-    const language = lang.split('-')[0];
+    const language = (locale => (locale === 'nb' ? 'no' : locale))(lang.split('-')[0].toLowerCase());
     useEffect(() => {
         let allMapObjects = [];
         if (api?.map) {

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

@@ -1,4 +1,4 @@
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React, { useEffect } from 'react';
 import ReactDomServer from 'react-dom/server';
 import noop from 'lodash/fp/noop';

package/components/map/components/features/layers/overlayLayers/IncidentsLayer.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useEffect, useState } from 'react';
 import { useMapContext } from '../../../MapContext';
 import { MAP_LAYER_INCIDENTS } from '../../../constants';

package/components/mapMarker/SingleMapMarker.js

@@ -17,7 +17,7 @@ const SingleMapMarker = (props) => {
     const largeAnchor = anchorSize === 'lg';
     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 singleClasses = classNames('rio-map-single', fixed && 'fixed', moving && 'moving', textColor, markerOnHover && 'visible-on-hover', active && 'active', pinging && 'pinging', typeof name === 'string' && name.length === 1 && 'single-letter', cursor);
     const markerBackgroundColor = `var(${markerColorMapping[markerColor]})`;
     return (_jsx("div", { className: classes, style: { ...style, color: markerBackgroundColor }, "data-marker-type": markerColor.replace('bg-', 'single-'), children: _jsxs("div", { className: 'rio-map-marker-translate', children: [!anchorOnly && (_jsxs(_Fragment, { children: [_jsxs("div", { className: singleClasses, children: [_jsx(MapStateIndicator, { moving: moving, bearing: bearing, stateIconName: stateIconName }), getIcons(iconNames), name && _jsx("div", { className: 'rio-map-name', children: name }), exceptionCount > 0 && _jsx("div", { className: 'rio-map-bubble exception', children: exceptionCount }), warningCount > 0 && _jsx("div", { className: 'rio-map-bubble warning', children: warningCount })] }), _jsx("div", { className: 'rio-map-anchor-arrow' })] })), _jsx("div", { className: anchorClasses, children: anchorIconName && largeAnchor && _jsx("span", { className: `rioglyph rioglyph-${anchorIconName}` }) })] }) }));
 };

package/components/menuItems/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/notification/Notification.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import { toast, Slide } from 'react-toastify';
 export const DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;

package/components/overlay/OverlayTrigger.js

@@ -1,5 +1,5 @@
 import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';

package/components/selects/BaseSelectDropdown.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';

package/components/selects/Multiselect.d.ts

@@ -146,6 +146,14 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
      * @default false
      */
     showUnselectedItemIcons?: boolean;
+    /**
+     * Additional classes to be set to the dropdown.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes to be set to the select/input.
+     */
+    btnClassName?: string;
     /**
      * Additional classes to be set to the select wrapper
      */

package/components/selects/Multiselect.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { useRef, useState } from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';
@@ -15,7 +15,7 @@ import useMergeRefs from '../../hooks/useMergeRefs';
 import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', ...remainingProps } = props;
+    const { name, id = name, options = [], value, onChange = noop, placeholder, isLoading = false, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, multiline = false, noItemMessage, counterMessage, renderCounterMessage, showSelectedItemIcon = false, showUnselectedItemIcons = false, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal', btnClassName, dropdownClassName, ...remainingProps } = props;
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItemIds, setSelectedItemIds] = useState(value || []);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -73,7 +73,7 @@ const Multiselect = (props) => {
         return (_jsx(MultiselectToggleSelection, { options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter, children: multiline && renderFilter() }));
     };
     const renderToggle = () => {
-        const wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
+        const wrapperClassNames = classNames('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = isEmpty(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
         const toggleButton = (_jsxs("button", { type: 'button', id: id, name: name, className: wrapperClassNames, "data-toggle": 'dropdown', tabIndex: tabIndex, "aria-haspopup": 'true', "aria-expanded": isOpen, onClick: onToggle, onKeyDown: handleToggleKeyDown, ref: refToggle, children: [showPlaceholder ? (_jsxs(_Fragment, { children: [_jsx(MultiselectTogglePlaceholder, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), _jsx("span", { className: 'caret' })] }));
@@ -87,7 +87,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 }));
+        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, dropdownClassName: dropdownClassName }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/components/smoothScrollbars/SmoothScrollbars.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
 import { Scrollbars } from 'react-custom-scrollbars-2';
 import classNames from 'classnames';

package/components/svgImage/SvgElement.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type ColorOverridesMap } from './svgConverter';
+type SvgElementProps = {
+    node: Element;
+    colorMap: ColorOverridesMap;
+};
+declare const SvgElement: ({ node, colorMap }: SvgElementProps) => React.DOMElement<React.DOMAttributes<Element>, Element>;
+export default SvgElement;

package/components/svgImage/SvgElement.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { convertAttributes } from './svgConverter';
+const SvgElement = ({ node, colorMap }) => {
+    const attributes = convertAttributes(node, colorMap);
+    return React.createElement(node.tagName.toLowerCase(), {
+        ...attributes,
+        key: attributes.id || Math.random(),
+    }, Array.from(node.childNodes).map((child, idx) => child.nodeType === 1 ? _jsx(SvgElement, { node: child, colorMap: colorMap }, idx) : null));
+};
+export default SvgElement;

package/components/svgImage/SvgImage.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { ColorOverridesMap } from './svgConverter';
+type SvgImageProps = {
+    /**
+     * The name of the image file without extension.
+     */
+    name: string;
+    /**
+     * The height and width of the SVG image in pixels.
+     *
+     * @default 150
+     */
+    size?: number;
+    /**
+     * The CDN base URL where the images are located.
+     *
+     * @default 'https://cdn.rio.cloud/riosvg'
+     */
+    baseUrl?: string;
+    /**
+     * Customize color using the color map and define the CSS variable name that shall be used.
+     */
+    colorMap?: ColorOverridesMap;
+    /**
+     * Additional class names added to the SVG element.
+     */
+    className?: string;
+};
+export declare const SvgImage: (props: SvgImageProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default SvgImage;

package/components/svgImage/SvgImage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSvgLoader } from './useSvgLoader';
+const BASE_CDN_URL = 'https://cdn.rio.cloud/riosvg';
+export const SvgImage = (props) => {
+    const { name, className = '', size = 150, baseUrl = BASE_CDN_URL, colorMap } = props;
+    const { svgElement, error } = useSvgLoader(name, baseUrl, colorMap);
+    if (error) {
+        console.error(`Icon "${name}" not found`);
+        return null;
+    }
+    if (!svgElement) {
+        return null;
+    }
+    return React.cloneElement(svgElement, {
+        width: size,
+        height: size,
+        className,
+    });
+};
+export default SvgImage;

package/components/svgImage/svgConverter.d.ts

@@ -0,0 +1,17 @@
+export type CSSColorVar = 'color-white' | 'color-black' | 'always-color-white' | 'always-color-black' | 'gray-darkest' | 'gray-darker' | 'gray-dark' | 'gray' | 'gray-light' | 'gray-lighter' | 'gray-lightest' | 'gray-decent' | 'brand-primary' | 'brand-secondary' | 'brand-primary-decent' | 'brand-secondary-decent' | 'brand-info' | 'brand-success' | 'brand-warning' | 'brand-danger' | 'brand-info-decent' | 'brand-success-decent' | 'brand-warning-decent' | 'brand-danger-decent' | 'color-code' | 'color-status-available' | 'color-status-driving' | 'color-status-resting' | 'color-status-working' | 'color-map-marker-asset' | 'color-map-marker-poi' | 'color-map-marker-geofence' | 'color-map-marker-route' | 'color-map-marker-info' | 'color-map-marker-success' | 'color-map-marker-warning' | 'color-map-marker-danger' | 'color-map-marker-restrictions' | 'color-map-marker-text' | 'color-map-marker-active' | 'color-highlight-darkest' | 'color-highlight-darker' | 'color-highlight-dark' | 'color-highlight' | 'color-highlight-light' | 'color-highlight-lighter' | 'color-highlight-lightest' | 'color-highlight-decent' | 'color-rating-1' | 'color-rating-2' | 'color-rating-3' | 'color-rating-4' | 'color-rating-5' | 'color-coldplay-wine' | 'color-coldplay-aubergine' | 'color-coldplay-kashmir' | 'color-coldplay-fountain' | 'color-coldplay-turquoise' | 'color-coldplay-bermuda' | 'color-coldplay-moos' | 'color-coldplay-primrose' | 'color-coldplay-khaki' | 'color-warmup-crimson' | 'color-warmup-victoria' | 'color-warmup-cadillac' | 'color-warmup-raspberry' | 'color-warmup-cerise' | 'color-warmup-charm' | 'color-warmup-salmon' | 'color-warmup-cherokee' | 'color-warmup-corn' | 'color-spectrum-indigo' | 'color-spectrum-violet' | 'color-spectrum-purple' | 'color-spectrum-fuchsia' | 'color-spectrum-pink' | 'color-spectrum-rose';
+export type ColorOverridesMap = {
+    mainStrokeColor?: CSSColorVar;
+    mainFillColor?: CSSColorVar;
+    secondaryStrokeColor?: CSSColorVar;
+    backgroundFillColor?: CSSColorVar;
+};
+export declare const defaultColorMap: ColorOverridesMap;
+type StyleObject = Record<string, string>;
+export declare const parseStyleString: (style: string) => StyleObject;
+export declare const camelCase: (str: string) => string;
+type ConvertedAttributes = {
+    style?: React.CSSProperties;
+    [key: string]: string | React.CSSProperties | undefined;
+};
+export declare const convertAttributes: (node: Element, colorOverrides: ColorOverridesMap) => ConvertedAttributes;
+export {};

package/components/svgImage/svgConverter.js

@@ -0,0 +1,78 @@
+// Define the color replacements - handle hex colors and fallbacks
+// const svgColorReplacement: Record<string, string> = {
+//     'rgb(255, 255, 255)': 'var(--color-white)',
+//     '#fff': 'var(--color-white)',
+//     '#ffffff': 'var(--color-white)',
+export const defaultColorMap = {
+    mainStrokeColor: 'brand-info',
+    mainFillColor: 'color-highlight-lighter',
+    secondaryStrokeColor: 'gray',
+    backgroundFillColor: 'gray-lighter',
+};
+// Utility function to normalize RGB values (removes spaces, converts case)
+const normalizeColor = (color) => color.replace(/\s+/g, '').toLowerCase();
+export const parseStyleString = (style) => {
+    return style.split(';').reduce((acc, rule) => {
+        const [key, value] = rule.split(':').map(s => s.trim());
+        if (key && value) {
+            acc[camelCase(key)] = value;
+        }
+        return acc;
+    }, {});
+};
+export const camelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+const REACT_ATTRIBUTE_MAP = {
+    'xml:space': 'xmlSpace',
+    'xmlns:xlink': 'xmlnsXlink',
+    'stroke-width': 'strokeWidth',
+    'fill-opacity': 'fillOpacity',
+    'stroke-opacity': 'strokeOpacity',
+    'clip-path': 'clipPath',
+};
+export const convertAttributes = (node, colorOverrides) => {
+    const attributes = {};
+    const attrs = node.attributes;
+    // Create a dynamic color map based on the overrides
+    const colorMap = {
+        // Main fill color
+        'rgb(207, 240, 243)': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,
+        '#cff0f3': `var(--${colorOverrides.mainFillColor || defaultColorMap.mainFillColor})`,
+        // Main stroke color
+        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,
+        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || defaultColorMap.mainStrokeColor})`,
+        // Secondary stroke color (gray elements)
+        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,
+        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || defaultColorMap.secondaryStrokeColor})`,
+        // Background fill color
+        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,
+        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || defaultColorMap.backgroundFillColor})`,
+        // Static colors that don't change
+        'rgb(255, 255, 255)': 'var(--color-white)',
+        '#fff': 'var(--color-white)',
+        '#ffffff': 'var(--color-white)',
+    };
+    for (const attr of attrs) {
+        const attrName = REACT_ATTRIBUTE_MAP[attr.name] || attr.name;
+        let value = attr.value;
+        if (attrName === 'style') {
+            const parsedStyle = parseStyleString(value);
+            if (parsedStyle.fill) {
+                const normalizedFill = normalizeColor(parsedStyle.fill);
+                parsedStyle.fill = colorMap[normalizedFill] || parsedStyle.fill;
+            }
+            if (parsedStyle.stroke) {
+                const normalizedStroke = normalizeColor(parsedStyle.stroke);
+                parsedStyle.stroke = colorMap[normalizedStroke] || parsedStyle.stroke;
+            }
+            attributes.style = parsedStyle;
+        }
+        else {
+            if (attrName === 'fill' || attrName === 'stroke') {
+                const normalizedColor = normalizeColor(value);
+                value = colorMap[normalizedColor] || value;
+            }
+            attributes[attrName] = value;
+        }
+    }
+    return attributes;
+};

package/components/svgImage/useSvgLoader.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import { type ColorOverridesMap } from './svgConverter';
+type UseSvgLoaderResult = {
+    svgElement: ReactNode | null;
+    error: boolean;
+    colorMap?: ColorOverridesMap;
+};
+export declare const useSvgLoader: (name: string, baseUrl: string, colorMap?: ColorOverridesMap) => UseSvgLoaderResult;
+export {};