@rio-cloud/rio-uikit 1.7.1 → 1.9.0

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

@@ -9,6 +9,7 @@ export type SmoothScrollbarsProps = {
     autoHeightMin?: number;
     autoHeightMax?: number;
     onScroll?: (event: React.UIEvent<any> | undefined) => void;
+    style?: React.CSSProperties;
 };
 declare const SmoothScrollbars: React.ForwardRefExoticComponent<SmoothScrollbarsProps & {
     children?: React.ReactNode | undefined;

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';
@@ -7,7 +7,7 @@ import noop from 'lodash/fp/noop';
 import debounce from 'lodash/fp/debounce';
 const RESIZE_THROTTLING = 100;
 const SmoothScrollbars = forwardRef((componentProps, ref) => {
-    const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, } = componentProps;
+    const { slideIn = false, largeTrack = false, trackOffset = false, className = '', onScroll = noop, tagName = 'div', autoHeight = false, autoHeightMin = 0, autoHeightMax = 200, children, style, ...remainingProps } = componentProps;
     const scrollbarsRef = useRef(null);
     const contentRef = useRef(null);
     useImperativeHandle(ref, () => scrollbarsRef.current);
@@ -36,7 +36,7 @@ const SmoothScrollbars = forwardRef((componentProps, ref) => {
     const renderThumbVerticalNames = classNames('scrollbar-thumb-vertical', largeTrack && 'scrollbar-thumb-size-large');
     const renderTrackHorizontalNames = classNames('scrollbar-track-horizontal', largeTrack && 'scrollbar-track-size-large', trackOffset && 'scrollbar-track-offset');
     const renderThumbHorizontalNames = classNames('scrollbar-thumb-horizontal', largeTrack && 'scrollbar-thumb-size-large');
-    return (_jsx(Scrollbars, { ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
+    return (_jsx(Scrollbars, { ...remainingProps, ref: scrollbarsRef, tagName: tagName, onScroll: onScroll, className: wrapperClassNames, hideTracksWhenNotNeeded: true, autoHeight: autoHeight, autoHeightMin: autoHeightMin, autoHeightMax: autoHeightMax, renderView: props => {
             return _jsx("div", { ...props, className: 'scrollbar-view' });
         }, renderTrackVertical: props => {
             return _jsx("div", { ...props, className: renderTrackVerticalNames });

package/components/statsWidget/StatsWidget.d.ts

@@ -1,8 +1,8 @@
-import { type MouseEventHandler, type PropsWithChildren } from 'react';
+import type { ComponentProps, MouseEventHandler, PropsWithChildren } from 'react';
 import { type StatsWidgetHeaderProps } from './StatsWidgetHeader';
 import { type StatsWidgetBodyProps } from './StatsWidgetBody';
 import { type StatsWidgetFooterProps } from './StatsWidgetFooter';
-export type StatsWidgetProps = {
+export type StatsWidgetProps = ComponentProps<'div'> & {
     /**
      * Callback to reset the filter.
      */

package/components/statsWidget/StatsWidgets.d.ts

@@ -1,5 +1,5 @@
-import { type PropsWithChildren } from 'react';
-export type StatsWidgetsProps = {
+import type { ComponentProps, PropsWithChildren } from 'react';
+export type StatsWidgetsProps = ComponentProps<'div'> & {
     /**
      * Additional class names to be added to the element.
      */

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;
+};
+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';
+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 {};

package/components/svgImage/useSvgLoader.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { convertAttributes, defaultColorMap } from './svgConverter';
+import SvgElement from './SvgElement';
+export const useSvgLoader = (name, baseUrl, colorMap = defaultColorMap) => {
+    const [svgElement, setSvgElement] = useState(null);
+    const [error, setError] = useState(false);
+    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 = convertAttributes(svgNode, colorMap);
+                const svgJsx = (_jsx("svg", { ...attributes, children: Array.from(svgNode.childNodes).map((node, idx) => node.nodeType === 1 ? (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                    _jsx(SvgElement, { 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 };
+};

package/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/components/switch/Switch.js

@@ -1,22 +1,21 @@
 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 { forwardRef } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
 import { getCurrentBackgroundColor } from '../../utils/currentColors';
 const Switch = forwardRef((props, ref) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = children ? 'right' : undefined, onChange = noop, ...remainingProps } = props;
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, className = '', labelPosition = children ? 'right' : undefined, onChange = noop, ...remainingProps } = props;
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
     const hasMultipleText = enabledText && disabledText;
     const hasSingleText = enabledText && !disabledText;
+    const switchClasses = classNames('uikit-switch', className);
     const switchLabelClasses = classNames('switch-label', disabled && 'cursor-not-allowed', labelPosition && `label-position-${labelPosition}`);
-    const switchContentClasses = classNames('switch-content'
-    // !hasMultipleText && !hasSingleText && 'width-40'
-    );
+    const switchContentClasses = classNames('switch-content');
     const switchBackgroundColor = getCurrentBackgroundColor(color);
-    return (_jsx("div", { ref: ref, ...remainingProps, className: 'uikit-switch', children: _jsxs("label", { className: switchLabelClasses, children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", { className: switchContentClasses, style: { color: switchBackgroundColor, minWidth }, children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] }), children && children] }) }));
+    return (_jsx("div", { ref: ref, ...remainingProps, className: switchClasses, children: _jsxs("label", { className: switchLabelClasses, children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", { className: switchContentClasses, style: { color: switchBackgroundColor, minWidth }, children: [hasMultipleText ? (_jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && _jsx("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), _jsx("div", { className: 'switch-handle' })] }), children && children] }) }));
 });
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';

package/components/table/TableCardsSorting.d.ts

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

package/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, className, ...remainingProps }: TableColProps) => import("react/jsx-runtime").JSX.Element;
+export default TableCol;

package/components/table/TableCol.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableCol = ({ columnDetails, className = '', ...remainingProps }) => {
+    const style = columnDetails?.width
+        ? {
+            minWidth: columnDetails.width,
+            width: columnDetails.width,
+        }
+        : {};
+    return _jsx("col", { ...remainingProps, style: style, className: className });
+};
+export default TableCol;

package/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/components/table/TableHead.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import SortArrows from './SortArrows';
+const TableHead = (props) => {
+    const { column, title, label, sortBy, sortDir, onClick = () => { }, className = '', children, ...remainingProps } = props;
+    const tableHeadClassNames = classNames('user-select-none', 'sort-column', className);
+    const labelString = typeof label === 'string' ? label : '';
+    const thTitle = title ?? labelString;
+    return (_jsxs("th", { ...remainingProps, className: tableHeadClassNames, onClick: onClick, "data-field": column, "data-sortby": column, title: thTitle, children: [label && (_jsxs("span", { children: [column !== undefined && sortBy === column ? _jsx(SortArrows, { direction: sortDir }) : _jsx(SortArrows, {}), _jsx("span", { children: label })] })), children] }));
+};
+export default TableHead;

package/components/table/TableSettingsDialog.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 { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import isEqual from 'lodash/fp/isEqual';

package/components/tag/Tag.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 } from 'react';
 import classNames from 'classnames';
 const Tag = forwardRef((props, ref) => {

package/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/components/timepicker/TimePicker.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import InputMask from 'react-input-mask';
+import { IMask, IMaskInput } from 'react-imask';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import isEmpty from 'lodash/fp/isEmpty';
@@ -8,7 +8,7 @@ import moment from 'moment';
 import noop from 'lodash/fp/noop';
 import invariant from '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)}`;
@@ -39,11 +39,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);
@@ -67,6 +79,21 @@ const TimePicker = (props) => {
     };
     const { className: inputClassName, ...otherInputProps } = inputProps;
     const hasFeedback = errorMessage || warningMessage;
-    return (_jsxs("div", { ...remainingProps, className: classNames('TimePicker', 'input-group', className), children: [showIcon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [_jsx(InputMask, { ...otherInputProps, className: classNames('TimePickerInput', 'form-control', inputClassName), mask: mask, maskPlaceholder: '-', value: timeValue, onChange: handleChangeTime, alwaysShowMask: alwaysShowMask }), hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && (_jsxs("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [_jsx("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), _jsx("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
+    return (_jsxs("div", { ...remainingProps, className: classNames('TimePicker', 'input-group', className), children: [showIcon && (_jsx("span", { className: 'input-group-addon', children: _jsx("span", { className: 'rioglyph rioglyph-time-alt' }) })), _jsxs("div", { className: 'form-control-feedback-wrapper', children: [_jsx(IMaskInput, { ...otherInputProps, className: classNames('TimePickerInput', 'form-control', inputClassName), 
+                        // mask={mask}
+                        mask: 'HH:MM', blocks: {
+                            HH: {
+                                mask: IMask.MaskedRange,
+                                from: 0,
+                                to: 23,
+                                maxLength: 2,
+                            },
+                            MM: {
+                                mask: IMask.MaskedRange,
+                                from: 0,
+                                to: 59,
+                                maxLength: 2,
+                            },
+                        }, value: timeValue, onAccept: handleAcceptTime, onFocus: handleFocus, lazy: !alwaysShowMask, placeholderChar: '-', overwrite: true }), hasFeedback && (_jsxs(_Fragment, { children: [errorMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-error-sign' }), warningMessage && _jsx("span", { className: 'form-control-feedback rioglyph rioglyph-warning-sign' }), _jsx("span", { className: `help-block white-space-${messageWhiteSpace}`, children: _jsx("span", { children: errorMessage || warningMessage }) })] }))] }), isValid && (_jsxs("div", { className: 'TimePickerIncreaseButton input-group-addon', children: [_jsx("div", { className: 'text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer', onClick: handleDecrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-left scale-90' }) }), _jsx("div", { className: 'text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer', onClick: handleIncrease, children: _jsx("div", { className: 'rioglyph rioglyph-chevron-right scale-90' }) })] }))] }));
 };
 export default TimePicker;

package/components/tooltip/SimpleTooltip.d.ts

@@ -21,7 +21,7 @@ export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
      */
     targetRef?: MutableRefObject<HTMLDivElement>;
     /**
-     * A millisecond delay amount to show and hide the Overlay once triggered.
+     * A millisecond delay amount to show the Overlay once triggered.
      * If passed an Object, you can control the show and hide timeouts individually.
      */
     delay?: number | delayProp;

package/components/virtualList/VirtualList.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 { useRef, useState, useEffect, useCallback } from 'react';
 import VirtualListItemWrapper from './VirtualListItemWrapper';
 import useWindowResize from '../../hooks/useWindowResize';

package/hooks/useIsFocusWithin.d.ts

@@ -0,0 +1,33 @@
+type UseIsFocusWithinOptions<T extends HTMLElement> = {
+    /**
+     * Optional external ref to the DOM element to track.
+     * If not provided, the hook will return its own internal ref.
+     */
+    ref?: React.RefObject<T>;
+    /**
+     * Optional callback triggered when focus enters the element or its children.
+     */
+    onFocusWithin?: () => void;
+    /**
+     * Optional callback triggered when focus leaves the element and all its children.
+     */
+    onBlurWithin?: () => void;
+    /**
+     * Optional delay (in ms) before calling onBlurWithin.
+     * Useful when focus might quickly shift between internal elements.
+     * @default 0
+     */
+    delay?: number;
+};
+/**
+ * React hook that tracks whether focus is currently within a given element or its children.
+ * Provides a boolean state and a ref to attach to the tracked element.
+ *
+ * @param options Hook configuration including external ref, callbacks, and optional delay.
+ * @returns An object containing the ref and whether focus is currently within the element.
+ */
+declare const useIsFocusWithin: <T extends HTMLElement>({ ref: externalRef, onFocusWithin, onBlurWithin, delay, }?: UseIsFocusWithinOptions<T>) => {
+    ref: import("react").RefObject<T>;
+    isFocusedWithin: boolean;
+};
+export default useIsFocusWithin;