@rio-cloud/rio-uikit 1.7.0 → 1.8.0

package/lib/es/components/notification/Notification.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NOTIFICATION_TIMEOUT_INFINITE = exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = tslib_1.__importDefault(require("react"));
 const react_toastify_1 = require("react-toastify");
 exports.DEFAULT_NOTIFICATION_TIMEOUT_IN_MS = 5_000;

package/lib/es/components/overlay/OverlayTrigger.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = tslib_1.__importStar(require("react"));
 const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
 const react_popper_1 = require("react-popper");

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.filterOptions = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
@@ -18,7 +18,7 @@ const useMergeRefs_1 = tslib_1.__importDefault(require("../../hooks/useMergeRefs
 const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Multiselect = (props) => {
-    const { name, id = name, options = [], value, onChange = noop_1.default, 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_1.default, 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] = (0, react_1.useState)(false);
     const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)(value || []);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -76,7 +76,7 @@ const Multiselect = (props) => {
         return ((0, jsx_runtime_1.jsx)(MultiselectToggleSelection_1.default, { options: options, selectedItemIds: selectedItemIds, showSelectedItemIcon: showSelectedItemIcon, showUnselectedItemIcons: showUnselectedItemIcons, onRemoveItem: handleRemoveSelectedItem, multiline: multiline, hasInputAddon: !!inputAddon, hasFilter: useFilter, children: multiline && renderFilter() }));
     };
     const renderToggle = () => {
-        const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
+        const wrapperClassNames = (0, classnames_1.default)('dropdown-toggle', 'form-control', 'text-left', btnClassName && btnClassName, bsSize === 'sm' && 'input-sm', bsSize === 'lg' && 'input-lg', multiline && 'height-auto', disabled && 'disabled');
         const showPlaceholder = (0, isEmpty_1.default)(selectedItemIds) && !showUnselectedItemIcons;
         const showFilter = useFilter && isOpen && !counterMessage && !renderCounterMessage;
         const toggleButton = ((0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MultiselectTogglePlaceholder_1.default, { placeholder: placeholder }), showFilter && renderFilter()] })) : (renderSelection()), showFilter && !multiline && renderFilter(), (0, jsx_runtime_1.jsx)("span", { className: 'caret' })] }));
@@ -90,7 +90,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 }));
+        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, dropdownClassName: dropdownClassName }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/lib/es/components/smoothScrollbars/SmoothScrollbars.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const react_custom_scrollbars_2_1 = require("react-custom-scrollbars-2");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));

package/lib/es/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/lib/es/components/svgImage/SvgElement.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const svgConverter_1 = require("./svgConverter");
+const SvgElement = ({ node, colorMap }) => {
+    const attributes = (0, svgConverter_1.convertAttributes)(node, colorMap);
+    return react_1.default.createElement(node.tagName.toLowerCase(), {
+        ...attributes,
+        key: attributes.id || Math.random(),
+    }, Array.from(node.childNodes).map((child, idx) => child.nodeType === 1 ? (0, jsx_runtime_1.jsx)(SvgElement, { node: child, colorMap: colorMap }, idx) : null));
+};
+exports.default = SvgElement;

package/lib/es/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/lib/es/components/svgImage/SvgImage.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SvgImage = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const useSvgLoader_1 = require("./useSvgLoader");
+const BASE_CDN_URL = 'https://cdn.rio.cloud/riosvg';
+const SvgImage = (props) => {
+    const { name, className = '', size = 150, baseUrl = BASE_CDN_URL, colorMap } = props;
+    const { svgElement, error } = (0, useSvgLoader_1.useSvgLoader)(name, baseUrl, colorMap);
+    if (error) {
+        console.error(`Icon "${name}" not found`);
+        return null;
+    }
+    if (!svgElement) {
+        return null;
+    }
+    return react_1.default.cloneElement(svgElement, {
+        width: size,
+        height: size,
+        className,
+    });
+};
+exports.SvgImage = SvgImage;
+exports.default = exports.SvgImage;

package/lib/es/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/lib/es/components/svgImage/svgConverter.js

@@ -0,0 +1,84 @@
+"use strict";
+// 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)',
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertAttributes = exports.camelCase = exports.parseStyleString = exports.defaultColorMap = void 0;
+exports.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();
+const parseStyleString = (style) => {
+    return style.split(';').reduce((acc, rule) => {
+        const [key, value] = rule.split(':').map(s => s.trim());
+        if (key && value) {
+            acc[(0, exports.camelCase)(key)] = value;
+        }
+        return acc;
+    }, {});
+};
+exports.parseStyleString = parseStyleString;
+const camelCase = (str) => str.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+exports.camelCase = camelCase;
+const REACT_ATTRIBUTE_MAP = {
+    'xml:space': 'xmlSpace',
+    'xmlns:xlink': 'xmlnsXlink',
+    'stroke-width': 'strokeWidth',
+    'fill-opacity': 'fillOpacity',
+    'stroke-opacity': 'strokeOpacity',
+    'clip-path': 'clipPath',
+};
+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 || exports.defaultColorMap.mainFillColor})`,
+        '#cff0f3': `var(--${colorOverrides.mainFillColor || exports.defaultColorMap.mainFillColor})`,
+        // Main stroke color
+        'rgb(75, 128, 166)': `var(--${colorOverrides.mainStrokeColor || exports.defaultColorMap.mainStrokeColor})`,
+        '#4b80a6': `var(--${colorOverrides.mainStrokeColor || exports.defaultColorMap.mainStrokeColor})`,
+        // Secondary stroke color (gray elements)
+        'rgb(188, 192, 196)': `var(--${colorOverrides.secondaryStrokeColor || exports.defaultColorMap.secondaryStrokeColor})`,
+        '#bcc0c4': `var(--${colorOverrides.secondaryStrokeColor || exports.defaultColorMap.secondaryStrokeColor})`,
+        // Background fill color
+        'rgb(233, 235, 236)': `var(--${colorOverrides.backgroundFillColor || exports.defaultColorMap.backgroundFillColor})`,
+        '#e9ebec': `var(--${colorOverrides.backgroundFillColor || exports.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 = (0, exports.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;
+};
+exports.convertAttributes = convertAttributes;

package/lib/es/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 {};

package/lib/es/components/svgImage/useSvgLoader.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSvgLoader = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const svgConverter_1 = require("./svgConverter");
+const SvgElement_1 = tslib_1.__importDefault(require("./SvgElement"));
+const useSvgLoader = (name, baseUrl, colorMap = svgConverter_1.defaultColorMap) => {
+    const [svgElement, setSvgElement] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const fetchSvg = async () => {
+            try {
+                const url = `${baseUrl}/${name}.svg`;
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error('Failed to load SVG');
+                }
+                const svgText = await response.text();
+                if (svgText.startsWith('<html>')) {
+                    // When fetching from RIO CDN, a default index page is returned when something cannot be found.
+                    // Hence, we need to check for this to throw a proper error message.
+                    throw new Error(`Could not load SVG with URL: ${url}`);
+                }
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(svgText, 'image/svg+xml');
+                const svgNode = doc.querySelector('svg');
+                if (!svgNode) {
+                    throw new Error('Invalid SVG format');
+                }
+                const attributes = (0, svgConverter_1.convertAttributes)(svgNode, colorMap);
+                const svgJsx = ((0, jsx_runtime_1.jsx)("svg", { ...attributes, children: Array.from(svgNode.childNodes).map((node, idx) => node.nodeType === 1 ? (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                    (0, jsx_runtime_1.jsx)(SvgElement_1.default, { node: node, colorMap: colorMap }, idx)) : null) }));
+                setSvgElement(svgJsx);
+                setError(false);
+            }
+            catch (err) {
+                console.error(`Error loading SVG "${name}":`, err);
+                setError(true);
+            }
+        };
+        fetchSvg();
+    }, [name, baseUrl, colorMap]);
+    return { svgElement, error };
+};
+exports.useSvgLoader = useSvgLoader;

package/lib/es/components/switch/Switch.d.ts

@@ -45,6 +45,10 @@ export type SwitchProps = {
      * Possible values are `left` and `right`.
      */
     labelPosition?: 'left' | 'right';
+    /**
+     * Additional class names added to the SVG element.
+     */
+    className?: string;
 };
 declare const Switch: React.ForwardRefExoticComponent<PropsWithChildren<SwitchProps> & React.RefAttributes<HTMLDivElement>> & {
     LABEL_POSITION_LEFT: "left";

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

@@ -2,24 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 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 = (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, ...remainingProps } = props;
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, className = '', labelPosition = children ? 'right' : undefined, onChange = noop_1.default, ...remainingProps } = props;
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
     const hasMultipleText = enabledText && disabledText;
     const hasSingleText = enabledText && !disabledText;
+    const switchClasses = (0, classnames_1.default)('uikit-switch', className);
     const switchLabelClasses = (0, classnames_1.default)('switch-label', disabled && 'cursor-not-allowed', labelPosition && `label-position-${labelPosition}`);
-    const switchContentClasses = (0, classnames_1.default)('switch-content'
-    // !hasMultipleText && !hasSingleText && 'width-40'
-    );
+    const switchContentClasses = (0, classnames_1.default)('switch-content');
     const switchBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, ...remainingProps, className: 'uikit-switch', children: (0, jsx_runtime_1.jsxs)("label", { 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", { 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", { ref: ref, ...remainingProps, className: switchClasses, children: (0, jsx_runtime_1.jsxs)("label", { 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", { 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';

package/lib/es/components/table/TableCardsSorting.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 type TableCardsSortingOption = {
     /**
      * ID to use for the select option.

package/lib/es/components/table/TableCol.d.ts

@@ -0,0 +1,18 @@
+export type ColumnDetails = {
+    [key: string]: number;
+};
+export type ColumnDetailsMap = {
+    [key: string]: ColumnDetails;
+};
+type TableColProps = {
+    /**
+     * The width of the column as part of the column details object used for the TableSettingsDialog.
+     */
+    columnDetails?: ColumnDetails;
+    /**
+     * Additional classes added to the col tag element.
+     */
+    className?: string;
+};
+declare const TableCol: ({ columnDetails }: TableColProps) => import("react/jsx-runtime").JSX.Element;
+export default TableCol;

package/lib/es/components/table/TableCol.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TableCol = ({ columnDetails }) => {
+    const style = columnDetails?.width
+        ? {
+            minWidth: columnDetails.width,
+            width: columnDetails.width,
+        }
+        : {};
+    return (0, jsx_runtime_1.jsx)("col", { style: style });
+};
+exports.default = TableCol;

package/lib/es/components/table/TableHead.d.ts

@@ -0,0 +1,33 @@
+import type { PropsWithChildren } from 'react';
+type TableHeadProps = {
+    /**
+     * The unique name of the column used as identifier
+     */
+    column?: string;
+    /**
+     * The label that shall be rendered in the table head next to the sorting icons.
+     */
+    label?: string | React.ReactElement;
+    /**
+     * The string title of a column used as native title attribute on the th tag.
+     */
+    title?: string;
+    /**
+     * The sorting key stored as data attribute for later usage for click events.
+     */
+    sortBy?: string;
+    /**
+     * The column sorting direction.
+     */
+    sortDir?: string;
+    /**
+     * The click handler for the th tag.
+     */
+    onClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
+    /**
+     * Additional class names assigned to the wrapper element.
+     */
+    className?: string;
+};
+declare const TableHead: (props: PropsWithChildren<TableHeadProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableHead;

package/lib/es/components/table/TableHead.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const SortArrows_1 = tslib_1.__importDefault(require("./SortArrows"));
+const TableHead = (props) => {
+    const { column, title, label, sortBy, sortDir, onClick = () => { }, className = '', children } = props;
+    const tableHeadClassNames = (0, classnames_1.default)('user-select-none', 'sort-column', className);
+    const labelString = typeof label === 'string' ? label : '';
+    const thTitle = title ?? labelString;
+    return ((0, jsx_runtime_1.jsxs)("th", { className: tableHeadClassNames, onClick: onClick, "data-field": column, "data-sortby": column, title: thTitle, children: [label && ((0, jsx_runtime_1.jsxs)("span", { children: [column !== undefined && sortBy === column ? (0, jsx_runtime_1.jsx)(SortArrows_1.default, { direction: sortDir }) : (0, jsx_runtime_1.jsx)(SortArrows_1.default, {}), (0, jsx_runtime_1.jsx)("span", { children: label })] })), children] }));
+};
+exports.default = TableHead;

package/lib/es/components/table/TableSettingsDialog.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Tag = (0, react_1.forwardRef)((props, ref) => {

package/lib/es/components/timepicker/TimePicker.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import { type Props as InputMaskProps } from 'react-input-mask';
 export type TimePickerProps = {
     /**
      * Value of the time as string. Note, when value is given the component is treated as controlled.
@@ -40,7 +39,7 @@ export type TimePickerProps = {
     /**
      * Additional properties to be set on the input element.
      */
-    inputProps?: Omit<InputMaskProps, 'mask' | 'maskPlaceholder' | 'value' | 'onChange' | 'alwaysShowMask'>;
+    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;
     /**
      * Additional classes to be set on the wrapper element.
      */

package/lib/es/components/timepicker/TimePicker.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const react_input_mask_1 = tslib_1.__importDefault(require("react-input-mask"));
+const react_imask_1 = require("react-imask");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
@@ -11,7 +11,7 @@ const moment_1 = tslib_1.__importDefault(require("moment"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const tiny_invariant_1 = tslib_1.__importDefault(require("tiny-invariant"));
 const MINUTES_OFFSET = 15;
-const mask = [/[0-2]/, /[0-9]/, ':', /[0-5]/, /[0-9]/];
+const mask = '00:00';
 const fullRegexp = /^(?:\d|[01]\d|2[0-3]):[0-5]\d$/;
 const getPadded = (value) => (value >= 10 ? `${value}` : `0${value}`);
 const formatTimeString = (hours, minutes) => `${getPadded(hours)}:${getPadded(minutes)}`;
@@ -42,11 +42,23 @@ const TimePicker = (props) => {
             onChange(value);
         }
     }, [value]);
-    const handleChangeTime = (event) => {
-        const currentValue = event.target.value;
-        setTimeValue(currentValue);
-        if (fullRegexp.test(currentValue)) {
-            onChange(currentValue);
+    const handleFocus = (event) => {
+        const input = event.target;
+        // Check if value is empty or partially filled
+        if (!input.value || input.value.startsWith('-')) {
+            // Move cursor to the first empty position (usually 0)
+            // Timeout needed to wait for IMask internal focus handling
+            setTimeout(() => {
+                input.setSelectionRange(0, 0);
+            }, 0);
+        }
+        // If you want to preserve custom onFocus from props
+        inputProps.onFocus?.(event);
+    };
+    const handleAcceptTime = (val, maskRef) => {
+        setTimeValue(val);
+        if (maskRef.masked.isComplete) {
+            onChange(val);
         }
     };
     const isValid = isTimeValid(timeValue);
@@ -70,6 +82,21 @@ const TimePicker = (props) => {
     };
     const { className: inputClassName, ...otherInputProps } = inputProps;
     const hasFeedback = errorMessage || warningMessage;
-    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: (0, classnames_1.default)('TimePicker', 'input-group', className), children: [showIcon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-time-alt' }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'form-control-feedback-wrapper', children: [(0, jsx_runtime_1.jsx)(react_input_mask_1.default, { ...otherInputProps, className: (0, classnames_1.default)('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask }), hasFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), (0, jsx_runtime_1.jsx)("span", { className: `help-block white-space-${messageWhiteSpace}`, children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && ((0, jsx_runtime_1.jsxs)("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [(0, jsx_runtime_1.jsx)("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), (0, jsx_runtime_1.jsx)("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: (0, classnames_1.default)('TimePicker', 'input-group', className), children: [showIcon && ((0, jsx_runtime_1.jsx)("span", { className: 'input-group-addon', children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-time-alt' }) })), (0, jsx_runtime_1.jsxs)("div", { className: 'form-control-feedback-wrapper', children: [(0, jsx_runtime_1.jsx)(react_imask_1.IMaskInput, { ...otherInputProps, className: (0, classnames_1.default)('TimePickerInput', 'form-control', inputClassName), 
+                        // mask={mask}
+                        mask: 'HH:MM', blocks: {
+                            HH: {
+                                mask: react_imask_1.IMask.MaskedRange,
+                                from: 0,
+                                to: 23,
+                                maxLength: 2,
+                            },
+                            MM: {
+                                mask: react_imask_1.IMask.MaskedRange,
+                                from: 0,
+                                to: 59,
+                                maxLength: 2,
+                            },
+                        }, value: timeValue, onAccept: handleAcceptTime, onFocus: handleFocus, lazy: !alwaysShowMask, placeholderChar: '-', overwrite: true }), hasFeedback && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [errorMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && (0, jsx_runtime_1.jsx)("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), (0, jsx_runtime_1.jsx)("span", { className: `help-block white-space-${messageWhiteSpace}`, children: (0, jsx_runtime_1.jsx)("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && ((0, jsx_runtime_1.jsxs)("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [(0, jsx_runtime_1.jsx)("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), (0, jsx_runtime_1.jsx)("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: (0, jsx_runtime_1.jsx)("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
 };
 exports.default = TimePicker;

package/lib/es/components/virtualList/VirtualList.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VirtualList = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-ignore-next-line importsNotUsedAsValues
+// biome-ignore lint/style/useImportType: required for JSX runtime compatibility with older toolchains
 const react_1 = require("react");
 const VirtualListItemWrapper_1 = tslib_1.__importDefault(require("./VirtualListItemWrapper"));
 const useWindowResize_1 = tslib_1.__importDefault(require("../../hooks/useWindowResize"));

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

@@ -0,0 +1,27 @@
+export type LocationSuggestion = {
+    id: string;
+    label: string;
+};
+export type LocationFetchOptions = Record<string, unknown> & {
+    apiKey?: string;
+    fetchUrl?: string;
+    limit?: number;
+};
+/**
+ * Custom React hook for fetching location suggestions using HERE Maps Autocomplete API.
+ *
+ * @param query - The user input string to search for location suggestions.
+ * @param options - Optional configuration:
+ *   - apiKey: Your HERE Maps API key (default is 'YOUR_API_KEY').
+ *   - fetchUrl: Optional override for the autocomplete endpoint URL.
+ * @returns An object containing:
+ *   - suggestions: Array of location suggestions with `id` and `label`.
+ *   - loading: Boolean indicating whether the fetch is in progress.
+ *   - error: Any error that occurred during fetching.
+ */
+declare const useLocationSuggestions: (query: string, options?: LocationFetchOptions) => {
+    suggestions: LocationSuggestion[];
+    loading: boolean;
+    error: Error | null;
+};
+export default useLocationSuggestions;