@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/components/assetTree/Tree.d.ts

@@ -73,10 +73,19 @@ export type TreeItem = {
      * Optional sub-type of the item.
      *
      * This refers to the name of an additional rioglyph icon (excluding the `rioglyph-` prefix),
-     * typically used to render a secondary icon next to the primary one (e.g. for fuel type or
-     * equipment variations).
+     * typically used to render a secondary icon next to the primary one (Note: for fuel types better use the pairIcon prop).
      */
     subType?: string;
+    /**
+     * Optional pair icon override for the subType.
+     *
+     * - If set to a string (e.g. `'fuel-gas'`), this icon will be used explicitly.
+     * - If set to `undefined`, the `subType` property will be used as the fallback icon.
+     * - If set to `null`, no icon will be rendered, even if `subType` is defined.
+     *
+     * This allows full control over the icon behavior while maintaining backward compatibility with subType-based icons.
+     */
+    pairIcon?: string | null;
     /**
      * List of group ids the items is associated with.
      *

package/components/assetTree/TreeLeaf.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 import React from 'react';
 import classNames from 'classnames';
 import isObject from 'lodash/fp/isObject';
 import Checkbox from '../checkbox/Checkbox';
 import RadioButton from '../radiobutton/RadioButton';
+import { withRioglyphPrefix } from './treeUtils';
 const getIconRenderInfo = (item) => {
     if (item.icon === null) {
         // explicit opt-out
@@ -12,14 +12,14 @@ const getIconRenderInfo = (item) => {
     }
     // fallback to type
     const primaryIcon = item.icon ?? item.type;
-    // treat subType as pair icon name
-    const subIcon = item.subType ?? null;
-    return { primaryIcon, subIcon };
+    // pairIcon with fallback to subType
+    const subIcon = item.pairIcon === null ? null : (item.pairIcon ?? item.subType ?? null);
+    return { primaryIcon: withRioglyphPrefix(primaryIcon), subIcon: withRioglyphPrefix(subIcon) };
 };
 const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
     const { primaryIcon, subIcon } = getIconRenderInfo(item);
-    return (_jsxs("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && _jsx("span", { className: `rioglyph rioglyph-${primaryIcon}` }), primaryIcon && subIcon && (_jsxs("span", { className: 'rioglyph-icon-pair', children: [_jsx("span", { className: `rioglyph rioglyph-${primaryIcon}` }), _jsx("span", { className: `rioglyph rioglyph-${subIcon}` })] })), _jsxs("span", { className: 'TreeLabelNameText', children: [_jsx("span", { className: 'TreeLabelNameTextHeadline', children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'text-light margin-right-3', children: item.name.firstName }), _jsx("span", { children: item.name.lastName })] })) : (item.name) }), item.info && _jsx("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsxs("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && _jsx("span", { className: `rioglyph ${primaryIcon}` }), primaryIcon && subIcon && (_jsxs("span", { className: 'rioglyph-icon-pair', children: [_jsx("span", { className: `rioglyph ${primaryIcon}` }), _jsx("span", { className: `rioglyph ${subIcon}` })] })), _jsxs("span", { className: 'TreeLabelNameText', children: [_jsx("span", { className: 'TreeLabelNameTextHeadline', children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", { className: 'text-light margin-right-3', children: item.name.firstName }), _jsx("span", { children: item.name.lastName })] })) : (item.name) }), item.info && _jsx("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
 });
 export default TreeLeaf;

package/components/assetTree/TreeNode.js

@@ -2,19 +2,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import classNames from 'classnames';
 import Checkbox from '../checkbox/Checkbox';
-// Add prefix `rioglyph-` if icon is given and does not start with the prefix
-const withRioglyphPrefix = (name) => {
-    if (!name) {
-        return null;
-    }
-    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
-};
+import { withRioglyphPrefix } from './treeUtils';
 const TreeNode = React.memo((props) => {
     const { node, hasMultiselect = false, isSelected = false, isOpen = false, isIndeterminate = false, onToggleNode, onSelect, } = props;
     const treeNodeClassNames = classNames('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
     const hasChildren = !!node.items.length;
     const expandedIcon = node.expandedIcon || node.icon;
     const iconName = isOpen ? withRioglyphPrefix(expandedIcon) : withRioglyphPrefix(node.icon);
-    return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: () => hasChildren && onToggleNode(node.id), children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: () => onSelect(node, isIndeterminate) })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), _jsx("span", { className: 'TreeLabelNameText', children: _jsx("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), _jsx("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
+    const handleNodeSelection = () => {
+        onSelect(node, isIndeterminate);
+    };
+    const handleContainerClick = (event) => {
+        // Ignore clicks on checkboxes and don't expand or collapse on checkbox clicks
+        const isCheckbox = event.target.closest('.TreeCheckbox');
+        if (isCheckbox) {
+            return;
+        }
+        if (hasChildren) {
+            onToggleNode(node.id);
+        }
+    };
+    return (_jsxs("div", { className: treeNodeClassNames, "data-key": node.id, onClick: handleContainerClick, children: [hasMultiselect && (_jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: handleNodeSelection })), _jsxs("span", { className: 'TreeLabel TreeLabelName', children: [iconName && _jsx("span", { className: `rioglyph ${iconName}` }), _jsx("span", { className: 'TreeLabelNameText', children: _jsx("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), _jsx("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), _jsx("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
 });
 export default TreeNode;

package/components/assetTree/TreeSearch.js

@@ -1,5 +1,4 @@
 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 React from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';

package/components/assetTree/TypeCounter.js

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import useHover from '../../hooks/useHover';
 import mergeRefs from '../../utils/mergeRefs';
+import { withRioglyphPrefix } from './treeUtils';
 const TypeCounter = forwardRef((props, ref) => {
     const { icon, value, isActive, hasFilter = false, enableActivity = false, onClick = noop, type, hideOnZero = false, ...remainingProps } = props;
     const internalRef = useRef(null);
@@ -16,6 +17,7 @@ const TypeCounter = forwardRef((props, ref) => {
     if (hideOnZero && !value) {
         return null;
     }
-    return (_jsxs("div", { ref: mergedRef, ...remainingProps, className: wrapperClassName, onClick: handleClick, children: [_jsx("span", { className: `rioglyph rioglyph-${icon} text-size-16 margin-right-2` }), _jsx("span", { className: counterClassNames, children: value || 0 })] }));
+    const iconName = withRioglyphPrefix(icon);
+    return (_jsxs("div", { ref: mergedRef, ...remainingProps, className: wrapperClassName, onClick: handleClick, children: [_jsx("span", { className: `rioglyph ${iconName} text-size-16 margin-right-2` }), _jsx("span", { className: counterClassNames, children: value || 0 })] }));
 });
 export default TypeCounter;

package/components/assetTree/treeUtils.d.ts

@@ -16,3 +16,4 @@ export declare const sortGroupsByName: (groups: GroupedItems) => TreeItem[];
 export declare const sortGroupItemsByName: (groups: GroupedItems) => GroupedItems;
 export declare const getMappedItemsToGroups: (groups: TreeGroup[], items: TreeItem[]) => GroupedItems;
 export declare const addOrRemoveFromList: <T>(list: T[], item: T) => T[];
+export declare const withRioglyphPrefix: (name?: string | null) => string | null;

package/components/assetTree/treeUtils.js

@@ -89,3 +89,10 @@ export const addOrRemoveFromList = (list, item) => {
     }
     return [...listSet];
 };
+// Add prefix `rioglyph-` if icon is given and does not start with the prefix
+export const withRioglyphPrefix = (name) => {
+    if (!name) {
+        return null;
+    }
+    return name.startsWith('rioglyph-') ? name : `rioglyph-${name}`;
+};

package/components/assetTree/useTreeVirtualization.js

@@ -53,7 +53,7 @@ export const useTreeVirtualization = (groupedItems, flatItems, hasSearchValue, h
                 // SmoothScrollbars exposes the scroll container through its view
                 const scrollbarsInstance = scrollElementRef.current;
                 // Access the internal scroll container
-                // This depends on how react-custom-scrollbars-2 exposes its internals
+                // This depends on how react-custom-scrollbars-4 exposes its internals
                 return scrollbarsInstance?.view;
             }
             return null;

package/components/clearableInput/ClearableInput.d.ts

@@ -1,7 +1,14 @@
+/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
 import React from 'react';
 export declare const DEFAULT_TYPE = "text";
 export declare const SUPPORTED_TYPES: string[];
 export type MaskVisibility = 'always' | 'onFocus' | 'never';
+export type MaskDefinition = {
+    mask: string;
+    definitions?: Record<string, string | RegExp>;
+    startsWith?: string;
+    [key: string]: any;
+};
 export type ClearableInputProps = {
     /**
      * Gives the input element the id.
@@ -100,24 +107,30 @@ export type ClearableInputProps = {
      *
      * The following characters will define mask format:
      *
-     * Character: "0" = allowed input: "0-9" (digit)
+     * "0" = allowed input: "0-9" (digit)
      *
-     * Character: "a" = allowed input: "a-z, A-Z" (letter)
+     * "a" = allowed input: "a-z, A-Z" (letter)
      *
-     * Character: "*" = allowed input: any character
+     * "*" = allowed input: any character
      *
-     * Character: "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
+     * "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
      *
-     * Any other character in the mask is considered a fixed value.
+     * Other chars which is not in custom definitions supposed to be fixed:
      *
-     * @example
-     * '-- ### ### ###' or '+49 00 000 00'
+     * [] - make input optional
      *
-     * @example
-     * ['0', '0', /[0-9]/, ' ', /[a-zA-Z]/]
+     * {} - include fixed part in unmasked value
+     *
+     * ` - prevent symbols shift back
+     *
+     * If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).
+     *
+     * Additionally you can provide custom definitions.
      *
+     * @example
+     * '-- ### ### ###' or '+49 00 000 00'
      */
-    mask?: string | (string | RegExp)[];
+    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];
     /**
      * Placeholder to cover unfilled parts of the mask.
      *
@@ -125,11 +138,16 @@ export type ClearableInputProps = {
      */
     maskPlaceholder?: string | null;
     /**
-     * Disabled the input component.
+     * Enable characters overwriting
      *
-     * @default false
+     * @default true
      */
-    disabled?: boolean;
+    maskOverwrite?: boolean | 'shift' | undefined;
+    /**
+     * Chooses the mask for dynamic masking depending on input value.
+     * Note, this function may not be an empty function, otherwise the mask selection won't work
+     */
+    maskDispatch?: (appended: string, dynamicMasked: any) => any;
     /**
      * Controls when the mask pattern is visible.
      * - 'always': Mask is always visible
@@ -139,6 +157,24 @@ export type ClearableInputProps = {
      * @default 'always'
      */
     maskVisibility?: MaskVisibility;
+    /**
+     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.
+     *
+     * @example
+     * mask='AAA AAA.AA'
+     * maskDefinitions={{ A: /[A-Z0-9]/ }}
+     */
+    maskDefinitions?: Record<string, string | RegExp>;
+    /**
+     * Minimum value to be entered. This prop is extended to accept a Date
+     * when used with an input mask.
+     */
+    min?: string | number | undefined | Date;
+    /**
+     * Maximum value to be entered. This prop is extended to accept a Date
+     * when used with an input mask.
+     */
+    max?: string | number | undefined | Date;
     /**
      * Whether mask prefix and placeholder should be displayed when input is empty and
      * has no focus.
@@ -147,6 +183,12 @@ export type ClearableInputProps = {
      * @deprecated please use maskVisibility='always' instead
      */
     alwaysShowMask?: boolean;
+    /**
+     * Disabled the input component.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Additional classes to be set on the input element.
      */

package/components/clearableInput/ClearableInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// biome-ignore lint/style/useImportType: <explanation>
+/** biome-ignore-all lint/complexity/noBannedTypes: <explanation> */
 import { useState, forwardRef, useRef } from 'react';
 import omit from 'lodash/fp/omit';
 import isNil from 'lodash/fp/isNil';
@@ -14,7 +14,7 @@ export const DEFAULT_TYPE = 'text';
 export const SUPPORTED_TYPES = ['text', 'password', 'email'];
 const hasValue = (value) => !isEmpty(`${value}`);
 const ClearableInput = forwardRef((props, ref) => {
-    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
+    const { type = DEFAULT_TYPE, defaultValue, value, maxLength, tabIndex = 0, hasError = false, inputRef, autoComplete, onChange = noop, onBlur = noop, onFocus = noop, onClear = noop, onKeyPress = noop, onClick = noop, mask, maskPlaceholder = '_', maskVisibility = 'always', maskOverwrite = true, maskDefinitions, maskDispatch, alwaysShowMask = false, inputClassName = '', disabled = false, className = '', children, ...remainingProps } = props;
     const initialValue = value || defaultValue || '';
     const [inputValue, setInputValue] = useState(initialValue);
     const [showClear, setShowClear] = useState(hasValue(initialValue));
@@ -136,7 +136,13 @@ const ClearableInput = forwardRef((props, ref) => {
         maxLength: hasMask ? undefined : maxLength,
         tabIndex,
     };
-    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: true })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
+    // The dispatch function may not be an empty function. Specify it when
+    // using dynamic masking and need more control over which mask gets selected
+    const maskDispatchObj = {};
+    if (maskDispatch) {
+        maskDispatchObj.dispatch = maskDispatch;
+    }
+    const input = hasMask ? (_jsx(IMaskInput, { ...inputProps, inputRef: mergedInternalMaskRef, mask: mask, definitions: maskDefinitions, ...maskDispatchObj, placeholderChar: maskPlaceholder, onAccept: handleAccept, lazy: !shouldShowMask(), overwrite: maskOverwrite })) : (_jsx("input", { ...inputProps, ref: inputRef || ref }));
     return (_jsxs("div", { className: classes, children: [children && isFunction(children) ? children(inputProps) : input, _jsx("span", { className: clearButtonClassNames, onClick: clearInputValue, children: _jsx("span", { className: 'clearButtonIcon rioglyph rioglyph-remove-sign' }) })] }));
 });
 export default ClearableInput;

package/{src/components → components}/datepicker/DayPicker.js

@@ -81,8 +81,14 @@ const DayPicker = (props) => {
         setInternalInputValue(rawValue); // always update input state
         debouncedParseInput(rawValue); // defer parsing & callback execution
     };
-    const handleInputBlur = () => {
-        closePopper();
+    const keyboardRef = useRef(false);
+    const handleInputBlur = (event) => {
+        // Do not close the dropdown on input blur when the user selects something inside the dropdown itself
+        const nextFocused = event.relatedTarget;
+        const focusInsideDropdown = nextFocused && popperElementRef.current?.contains(nextFocused);
+        if (isDropdownOpen && !focusInsideDropdown) {
+            closePopper();
+        }
         if (!isSingleMode) {
             return;
         }
@@ -93,6 +99,30 @@ const DayPicker = (props) => {
             setInternalInputValue(formatDate(parsed, locale, dateFormat));
         }
     };
+    const handleOnInputFocus = () => {
+        if (!isDropdownOpen) {
+            openPopper();
+        }
+    };
+    const handleInputKeyPress = (event) => {
+        // Workaround to figure out if the user navigates via keyboard
+        if (event.key === 'Tab') {
+            keyboardRef.current = true;
+        }
+        if (event.key !== 'Enter') {
+            return;
+        }
+        // In case the dropdown is not open but the input is focused, open the dropdown on enter
+        if (!isDropdownOpen) {
+            handleInputClick();
+            return;
+        }
+        // In case the dropdown is open, the input is focused and the prop allows it, close the dropdown
+        if (isDropdownOpen && closeOnSelect) {
+            onSelectChange(narrowedSelected, {});
+            closePopper();
+        }
+    };
     const handleSelectedChange = (newValue) => {
         if (!isControlled) {
             setInternalSelected(newValue);
@@ -119,17 +149,28 @@ const DayPicker = (props) => {
             // should be the only place formatting is applied to the input
             setInternalInputValue(formatDate(selected, locale, dateFormat));
         }
+        if (keyboardRef.current) {
+            // Note: When the date is selected via enter key, assume the user uses keyboard navigation.
+            // In this case the input should be focused to allow to tab to another element in his form.
+            // However, it is not possible to detect according to the event since the event.type is alway "click".
+            // Instead we check if the user used the tab key to focus the day picker.
+            inputRef?.current?.focus();
+        }
         if (closeOnSelect) {
             closePopper();
+            keyboardRef.current = false;
         }
     };
-    const { isOpen: isPopperOpen, open: openPopper, close: closePopper, referenceRef: popperRef, popperElementRef: setPopperElement, popperStyles, popperAttributes, } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });
+    const { isOpen: isDropdownOpen, open: openPopper, close: closePopper, referenceRef: popperRef, popperElementRef: setPopperElement, popperStyles, popperAttributes, } = usePopperDropdown({ placement: alignRight ? 'bottom-end' : 'bottom-start' });
     const inputRef = useRef(null);
     const popperElementRef = useRef(null);
     const assignPopperElement = (element) => {
         popperElementRef.current = element;
         setPopperElement(element);
     };
+    // Close the dropdown when clicking outside the dropdown wrapper.
+    // It also checks if the click happened into the input, in which case the
+    // dropdown will remain open.
     const outsideRef = useClickOutside(event => {
         const target = event.target;
         if (!target) {
@@ -142,36 +183,56 @@ const DayPicker = (props) => {
             return;
         }
         closePopper();
-    }, undefined, isPopperOpen);
+    }, undefined, isDropdownOpen);
     const handleInputClick = () => {
         openPopper();
         inputRef.current?.focus();
     };
-    useKey('Enter', event => {
+    // Needed to select all tabbable elements inside the dropdown calendar and to disable the
+    // focus on tab for all of these. This allows the user to tab between multiple inputs on the page
+    // or when having two day pickers side by side. Tabbing from one day picker input to the other will
+    // open and close the dropdown respectively and achieving the same usability as the old DatePicker.
+    // useEffect(() => {
+    //     if (isDropdownOpen && outsideRef.current) {
+    //         // get all buttons to disable the tab on them
+    //         const tabbableElements = (outsideRef.current as HTMLElement).querySelectorAll<HTMLElement>(
+    //             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    //         );
+    //         tabbableElements.forEach((element: Element) => {
+    //             element.setAttribute('tabindex', '-1');
+    //         });
+    //     }
+    // }, [isDropdownOpen, outsideRef]);
+    // Close the dropdown when it is open and when the user presses the "escape" key
+    useKey('Escape', event => {
         const target = event.target;
-        const isWithinReference = !!(target && popperRef.current?.contains(target));
-        const isWithinPopper = !!(target && popperElementRef.current?.contains(target));
-        if (!isWithinReference && !isWithinPopper) {
-            return;
-        }
-        event.preventDefault();
-        if (!isPopperOpen) {
-            handleInputClick();
-            return;
-        }
-        if (isPopperOpen && closeOnSelect) {
-            onSelectChange(narrowedSelected, {});
-            closePopper();
-        }
-    });
-    useKey('Escape', () => {
-        if (isPopperOpen) {
+        const isInput = inputRef.current && inputRef.current === target;
+        if (isInput && isDropdownOpen) {
             closePopper();
         }
     });
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            if (!isDropdownOpen || !outsideRef.current) {
+                return;
+            }
+            if (event.key === 'Tab') {
+                const focusedInside = outsideRef.current.contains(document.activeElement);
+                if (focusedInside) {
+                    keyboardRef.current = true;
+                    console.log('User tabbed into dropdown');
+                    // Optional: closePopper(); or focus inputRef.current
+                }
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isDropdownOpen]);
     const dayPickerClassName = `DayPicker ${bsSize === 'sm' ? 'margin-10' : 'margin-15'} ${bsSize}`;
-    // Render day picker inline without a dropdown
     if (inline) {
+        // Render day picker inline without a dropdown and an input
         return (_jsxs("div", { className: `display-flex flex-column justify-content-between ${className}`, children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }));
     }
     const clearableInputProps = {
@@ -182,9 +243,9 @@ const DayPicker = (props) => {
             ...(inputProps?.style ?? {}),
         },
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: popperRef, className: `form-group ${className}`, children: _jsxs("div", { className: 'input-group', children: [_jsx("span", { className: 'input-group-addon', onClick: handleInputClick, children: _jsx("span", { className: 'rioglyph rioglyph-calendar', "aria-hidden": 'true' }) }), isClearable && (_jsx(ClearableInput, { id: id, autoComplete: 'off', placeholder: placeholder, ...clearableInputProps, type: 'text', value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onClear: handleClearSelection, onBlur: handleInputBlur, 
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: popperRef, className: `form-group ${className}`, children: _jsxs("div", { className: 'input-group', children: [_jsx("span", { className: 'input-group-addon', onClick: handleInputClick, children: _jsx("span", { className: 'rioglyph rioglyph-calendar', "aria-hidden": 'true' }) }), isClearable && (_jsx(ClearableInput, { id: id, autoComplete: 'off', placeholder: placeholder, ...clearableInputProps, type: 'text', value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onClear: handleClearSelection, onBlur: handleInputBlur, onFocus: handleOnInputFocus, onKeyPress: handleInputKeyPress, 
                             // hasError={hasError}
-                            ref: inputRef, inputClassName: inputClassName })), !isClearable && (_jsx("input", { id: id, size: 12, type: 'text', autoComplete: 'off', placeholder: placeholder, ...inputProps, value: inputValue, onChange: handleInputChangeNative, onClick: handleInputClick, onBlur: handleInputBlur, ref: inputRef, readOnly: !isSingleMode, className: classNames('ClearableInput form-control bg-white', inputClassName) }))] }) }), isPopperOpen && (_jsx("div", { style: popperStyles, className: 'DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border', ...popperAttributes, ref: assignPopperElement, role: 'dialog', "aria-label": 'DayPicker calendar', children: _jsxs("div", { ref: outsideRef, className: 'display-flex flex-column justify-content-between', children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }) }))] }));
+                            ref: inputRef, inputClassName: inputClassName })), !isClearable && (_jsx("input", { id: id, size: 12, type: 'text', autoComplete: 'off', placeholder: placeholder, ...inputProps, value: inputValue, onChange: handleInputChangeNative, onClick: handleInputClick, onBlur: handleInputBlur, onFocus: handleOnInputFocus, onKeyDown: handleInputKeyPress, ref: inputRef, readOnly: !isSingleMode, className: classNames('ClearableInput form-control bg-white', inputClassName) }))] }) }), isDropdownOpen && (_jsx("div", { style: popperStyles, className: 'DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border', ...popperAttributes, ref: assignPopperElement, role: 'dialog', "aria-label": 'DayPicker calendar', children: _jsxs("div", { ref: outsideRef, className: 'display-flex flex-column justify-content-between', children: [_jsx(ReactDayPicker, { ...selectionProps, mode: mode, defaultMonth: defaultMonth, locale: resolvedLocale, onSelect: handleDaySelect, captionLayout: 'dropdown', animate: true, navLayout: 'around', startMonth: startMonth, endMonth: endMonth, showOutsideDays: showOutsideDays, fixedWeeks: fixedWeeks, className: dayPickerClassName }), footer ? _jsx("div", { className: 'padding-15', children: footer }) : _jsx("div", {})] }) }))] }));
 };
 const isDateRange = (value) => {
     if (!value || typeof value !== 'object') {

package/components/filepicker/FilePicker.d.ts

@@ -38,6 +38,14 @@ export type FilePickerProps = {
      * @default ''
      */
     className?: string;
+    /**
+     * Flag to set the dropzone wrapper element to 100% height.
+     *
+     * This comes in handy, when the dropzone should have 100 % height so it can grow.
+     *
+     * @default false
+     */
+    fullHeight?: boolean;
     /**
      * Object list of accepted Mime Types as keys and file extensions array as value.
      */

package/components/filepicker/FilePicker.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import Dropzone from 'react-dropzone';
 import noop from 'lodash/noop';
 import Button from '../button/Button';
 const FilePicker = (props) => {
-    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, children, ...remainingProps } = props;
+    const { displayMode = 'button', multiple = true, label = 'Select files', maxSize, onPick = noop, className = '', accept, fullHeight = false, children, ...remainingProps } = props;
     const dropzoneRef = useRef(null);
+    const wrapperRef = useRef(null);
     const isFull = displayMode === 'full';
     const showButton = isFull || displayMode === 'button';
     const showDropzone = isFull || displayMode === 'dropzone';
@@ -17,7 +18,14 @@ const FilePicker = (props) => {
         onPick(files, rejectedFiles);
     }, [onPick, accept]);
     const handleClick = () => dropzoneRef.current?.open();
-    return (_jsxs("div", { className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
+    useEffect(() => {
+        // Set height to dropzones inner presentation div where there is no other access to this DOM element.
+        // This comes in handy, when the dropzone should have 100 % height so it can grow.
+        if (wrapperRef.current && fullHeight) {
+            wrapperRef.current.querySelector('.FilePicker > div')?.setAttribute('class', 'height-100pct');
+        }
+    }, [fullHeight, wrapperRef.current]);
+    return (_jsxs("div", { ref: wrapperRef, className: 'FilePicker', children: [showButton && (_jsx(Button, { onClick: handleClick, className: className, children: label })), _jsx(Dropzone, { ...remainingProps, onDrop: handleDrop, accept: accept, multiple: multiple, maxSize: maxSize, ref: dropzoneRef, children: ({ getRootProps, getInputProps, isDragActive }) => {
                     return (_jsxs("div", { ...getRootProps(), children: [_jsx("input", { ...getInputProps() }), showDropzone && children && children({ isDragActive })] }));
                 } })] }));
 };

package/components/formLabel/FormLabel.js

@@ -22,7 +22,7 @@ const FormLabel = (props) => {
             setParentSize('sm');
         }
     }, []);
-    const supportingTextClasses = classNames('text-color-gray', 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
+    const supportingTextClasses = classNames('text-color-gray', typeof supportingText === 'string' && 'text-italic', parentSize === 'sm' && 'text-size-10', parentSize === 'lg' && 'text-size-14', !parentSize && 'text-size-12');
     if (isLabel && remainingProps.htmlFor) {
         const labelClasses = classNames(!supportingText && 'display-inline-block', supportingText && 'display-inline-flex flex-wrap justify-content-between width-100pct', className);
         return (

package/components/map/components/Map.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from 'react';
 import isEmpty from 'lodash/fp/isEmpty';
 import isEqual from 'lodash/fp/isEqual';
-import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, DEFAULT_MIN_ZOOM, DEFAULT_MAX_ZOOM, } from './constants';
+import { MAP_TYPE_DEFAULT, MAP_TYPE_FLEET_STYLE, MAP_TYPE_SATELLITE, MAP_TYPE_TERRAIN, MAP_TYPE_NIGHT, MAP_LAYER_INCIDENTS, MAP_LAYER_TRAFFIC, MAP_LAYER_ROAD_RESTRICTIONS, DEFAULT_MIN_ZOOM, DEFAULT_MAX_ZOOM, DEFAULT_PIXEL_RATIO, } from './constants';
 import { addEventListenerMap, removeEventListenerMap } from '../utils/eventHandling';
 import { MapContext } from './MapContext';
 import { createUtils, getMapBounds } from '../utils/mapUtils';
@@ -16,7 +16,7 @@ import MapElements from './MapElements';
 import { getPlatform, getEngineType, getBaseLayer } from '../utils/rendering';
 // biome-ignore lint/suspicious/noShadowRestrictedNames: <explanation>
 const Map = (props) => {
-    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, disableZoomMomentum = true, eventListenerMap, mapType = MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, minZoom = DEFAULT_MIN_ZOOM, maxZoom = DEFAULT_MAX_ZOOM, } = props;
+    const { children, credentials, width, height, language: lang = 'en', center, zoom, zoomAnimation = false, boundingBox, hideClusterSettings = false, hideMapLayerSettings = false, disableMapEvents, disableBehavior = false, disableZoomMomentum = true, eventListenerMap, mapType = MAP_TYPE_DEFAULT, mapLayer = [], showCluster: externalShowCluster = true, showScaleBar = false, onMapLayerChange = () => { }, onMapTypeChange = () => { }, onShowClusterChange = () => { }, onZoomIn = () => { }, onZoomOut = () => { }, onIncidentsChange = () => { }, mapSettingsTooltip, mapSettings, enableWebGL = true, enableDevicePixelRatio = true, pixelRatio = DEFAULT_PIXEL_RATIO, minZoom = DEFAULT_MIN_ZOOM, maxZoom = DEFAULT_MAX_ZOOM, } = props;
     let safeMaxZoom = maxZoom;
     if (minZoom > maxZoom) {
         // Avoid crashing the map for invalid zoom limits
@@ -29,7 +29,7 @@ const Map = (props) => {
     const [baseLayer, setBaseLayer] = useState(mapType);
     const [activeLayers, setActiveLayers] = useState(mapLayer);
     const [showCluster, setShowCluster] = useState(externalShowCluster);
-    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || 1 : 1;
+    const devicePixelRatio = enableDevicePixelRatio ? window.devicePixelRatio || pixelRatio : pixelRatio;
     // Only short locale is supported by HERE Map
     const language = (locale => (locale === 'nb' ? 'no' : locale))(lang.split('-')[0].toLowerCase());
     useEffect(() => {

package/components/map/components/constants.d.ts

@@ -17,3 +17,4 @@ export declare const DEFAULT_TILE_SIZE = 512;
 export declare const DEFAULT_RASTER_LAYER_FORMAT = "png";
 export declare const DEFAULT_MIN_ZOOM = 3;
 export declare const DEFAULT_MAX_ZOOM = 20;
+export declare const DEFAULT_PIXEL_RATIO = 2;

package/components/map/components/constants.js

@@ -19,3 +19,4 @@ export const DEFAULT_TILE_SIZE = 512;
 export const DEFAULT_RASTER_LAYER_FORMAT = 'png'; // 'jpeg';
 export const DEFAULT_MIN_ZOOM = 3;
 export const DEFAULT_MAX_ZOOM = 20;
+export const DEFAULT_PIXEL_RATIO = 2;

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

@@ -77,6 +77,7 @@ export type MapProps = {
     zoomAnimation?: boolean;
     enableWebGL?: boolean;
     enableDevicePixelRatio?: boolean;
+    pixelRatio?: number;
     minZoom?: number;
     maxZoom?: number;
     children?: React.ReactNode | ((api: MapApi, incidents?: MapIncidents) => React.ReactNode);

package/{src/components → components}/rioglyph/Rioglyph.d.ts

@@ -4,7 +4,7 @@ export type RioglyphProps = {
     /**
      * The icon class to display.
      */
-    icon: IconType;
+    icon: IconType | string;
     /**
      * Additional classes set to the icon span.
      */
@@ -24,7 +24,7 @@ export type RioglyphProps = {
     /**
      * The icon class to display as a pair (optional).
      */
-    pairIcon?: IconType;
+    pairIcon?: IconType | string;
     /**
      * Additional classes set to the pairIcon span.
      */

package/components/rioglyph/Rioglyph.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+const Rioglyph = (props) => {
+    const { icon, iconClassName = '', pairIcon, pairIconClassName = '', size, spinning = false, pulsing = false, } = props;
+    const spinningClass = spinning ? 'spinning' : '';
+    const pulsingClass = pulsing ? 'pulsing' : '';
+    let iconStyle;
+    if (icon.includes('.svg')) {
+        iconStyle = { '--i': `url(${icon})` };
+    }
+    if (pairIcon) {
+        const wrapperClasses = classNames('rioglyph-icon-pair', size && `text-size-${size}`);
+        const iconClasses = classNames('rioglyph', !icon.includes('.svg') && icon, iconClassName);
+        const pairIconClasses = classNames('rioglyph', !pairIcon.includes('.svg') && pairIcon, pairIconClassName, spinningClass, pulsingClass);
+        let pairIconStyle;
+        if (pairIcon?.includes('.svg')) {
+            pairIconStyle = { '--i': `url(${pairIcon})` };
+        }
+        return (_jsxs("span", { className: wrapperClasses, children: [_jsx("span", { className: iconClasses, style: iconStyle }), _jsx("span", { className: pairIconClasses, style: pairIconStyle })] }));
+    }
+    const iconClasses = classNames('rioglyph', !icon.includes('.svg') && icon, size && `text-size-${size}`, iconClassName, spinningClass, pulsingClass);
+    return _jsx("span", { className: iconClasses, style: iconStyle });
+};
+export default Rioglyph;