@rio-cloud/rio-uikit 1.2.2 → 1.4.0

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

@@ -14,11 +14,12 @@ const useEffectOnce_1 = tslib_1.__importDefault(require("../../hooks/useEffectOn
 const useKey_1 = tslib_1.__importDefault(require("../../useKey"));
 const DropdownHeader_1 = tslib_1.__importDefault(require("./DropdownHeader"));
 const NoItemMessage_1 = tslib_1.__importDefault(require("./NoItemMessage"));
+const Spinner_1 = tslib_1.__importDefault(require("../spinner/Spinner"));
 const DATA_ATTRIBUTE_ID = 'data-item-id';
 const DEFAULT_FOCUSED_ITEM_INDEX = 0;
 const HIGHLIGHT_CLASS = 'focus';
 const BaseSelectDropdown = (props) => {
-    const { isOpen = false, updateDOMValues = noop_1.default, onOpen = noop_1.default, onSelect = noop_1.default, onClose = noop_1.default, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const { isOpen = false, isLoading = false, updateDOMValues = noop_1.default, onOpen = noop_1.default, onSelect = noop_1.default, onClose = noop_1.default, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
     const [focusedItemIndex, setFocusedItemIndex] = (0, react_1.useState)(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
     const [keyboardUsed, setKeyboardUsed] = (0, react_1.useState)(externalKeyboardUsed);
     const dropdownMenuRef = (0, react_1.useRef)(null);
@@ -154,19 +155,20 @@ const BaseSelectDropdown = (props) => {
     if ((0, isEmpty_1.default)(options)) {
         return (0, jsx_runtime_1.jsx)(NoItemMessage_1.default, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
     }
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: options.map((option, index) => {
-            if (option.header) {
-                return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
-            }
-            // Show focused style only when keyboard is in use
-            const anchorClassNames = (0, classnames_1.default)('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
-            const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-            return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
-                    // Note, we need to assign the click callback only when it's not disabled
-                    // otherwise the functions is still triggered
-                    // biome-ignore lint/a11y/useValidAnchor: due to old structure and backwards compatibility
-                    onClick: option.disabled ? undefined : handleOptionChange }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [option.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] })) }), option.id));
-        }) })));
+    return ((0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: [isLoading && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: (0, jsx_runtime_1.jsx)(Spinner_1.default, {}) }))), !isLoading &&
+                options.map((option, index) => {
+                    if (option.header) {
+                        return (0, jsx_runtime_1.jsx)(DropdownHeader_1.default, { icon: option.icon, label: option.label }, option.id);
+                    }
+                    // Show focused style only when keyboard is in use
+                    const anchorClassNames = (0, classnames_1.default)('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+                    const wrapperClassNames = (0, classnames_1.default)(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+                    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: (0, jsx_runtime_1.jsxs)("a", Object.assign({ role: 'menuitem', className: anchorClassNames, "data-item-id": option.id, "data-item-index": index, 
+                            // Note, we need to assign the click callback only when it's not disabled
+                            // otherwise the functions is still triggered
+                            // biome-ignore lint/a11y/useValidAnchor: due to old structure + backwards compatibility
+                            onClick: option.disabled ? undefined : handleOptionChange }, { children: [(0, jsx_runtime_1.jsxs)("span", { children: [option.icon && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), (0, jsx_runtime_1.jsx)("input", { type: 'hidden', value: option.id })] })) }), option.id));
+                })] })));
 };
 const filterOptions = (itemDOMValues, filterValue, options) => {
     const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));

package/lib/es/components/selects/Multiselect.d.ts

@@ -69,6 +69,11 @@ export type MultiselectProps<T extends MultiselectOption> = Omit<WithFeedbackAnd
      * @default true
      */
     autoDropDirection?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
     /**
      * Defines the size of the select to be rendered.
      *

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

@@ -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, 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' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    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' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "multiline", "noItemMessage", "counterMessage", "renderCounterMessage", "showSelectedItemIcon", "showUnselectedItemIcons", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selectedItemIds, setSelectedItemIds] = (0, react_1.useState)(value || []);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -88,7 +88,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
+        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, isLoading: isLoading, options: nonSelectedOptions, focusedItemIndex: focusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, useActiveClass: true, dropup: dropup, autoDropDirection: autoDropDirection, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/lib/es/components/selects/Select.d.ts

@@ -103,6 +103,11 @@ export type SelectProps<T extends SelectOption> = Omit<WithFeedbackAndAddonProps
      * @default false
      */
     useClear?: boolean;
+    /**
+     * Shows a loading spinner instead of the menu items if set to true.
+     * @default false
+     */
+    isLoading?: boolean;
     /**
      * Text that shall be shown when not match was found when filtering.
      */

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

@@ -17,7 +17,7 @@ const SelectedOption_1 = tslib_1.__importDefault(require("./SelectedOption"));
 const WithFeedbackAndAddon_1 = tslib_1.__importDefault(require("./WithFeedbackAndAddon"));
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop_1.default, placeholder, dropup = false, pullRight = false, autoDropDirection = true, bsSize = 'md', disabled = false, tabIndex = 0, hasError = false, useFilter = false, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
+    const { name, id = name, label, 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, useClear = false, noItemMessage, selectedOptionText, showSelectedItemIcon = false, showUnselectedItemIcons = false, dropdownClassName, btnClassName, className, inputAddon, errorMessage, warningMessage, messageWhiteSpace = 'normal' } = props, remainingProps = tslib_1.__rest(props, ["name", "id", "label", "options", "value", "onChange", "placeholder", "isLoading", "dropup", "pullRight", "autoDropDirection", "bsSize", "disabled", "tabIndex", "hasError", "useFilter", "useClear", "noItemMessage", "selectedOptionText", "showSelectedItemIcon", "showUnselectedItemIcons", "dropdownClassName", "btnClassName", "className", "inputAddon", "errorMessage", "warningMessage", "messageWhiteSpace"]);
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
     const [isFilterActive, setIsFilterActive] = (0, react_1.useState)(false);
@@ -84,7 +84,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
+        return ((0, jsx_runtime_1.jsx)(BaseSelectDropdown_1.default, { isOpen: isOpen, isLoading: isLoading, options: filteredOptions, focusedItemIndex: currentFocusedItemIndex, keyboardUsed: keyboardUsed, updateDOMValues: updateDOMValues, onSelect: onOptionChange, onClose: closeMenu, noItemMessage: noItemMessage, pullRight: pullRight, dropup: dropup, autoDropDirection: autoDropDirection, dropdownClassName: dropdownClassName, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/lib/es/components/slider/RangeSlider.d.ts

@@ -1,4 +1,5 @@
 import React, { type HTMLAttributes } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
 export type RangeSliderProps = {
     /**
      * The current left value of the selected range.
@@ -36,6 +37,12 @@ export type RangeSliderProps = {
      * @default 1
      */
     step?: number;
+    /**
+     * Defines the color of the slider.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
     /**
      * Disables all pointer events.
      *

package/lib/es/components/slider/RangeSlider.js

@@ -5,13 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const currentColors_1 = require("../../utils/currentColors");
 const getRangeValues = (valueLeft, valueRight) => {
     const finalLeftValue = valueRight <= valueLeft ? valueRight : valueLeft;
     const finalRightValue = valueLeft >= valueRight ? valueLeft : valueRight;
     return [finalLeftValue, finalRightValue];
 };
 const RangeSlider = (props) => {
-    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
+    const { minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, step = 1, color = 'primary', leftValue, rightValue, className, disabled = false, onChange = noop_1.default, onDragEnd = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "color", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
     const [activeLeft, setActiveLeft] = (0, react_1.useState)(false);
     const [activeRight, setActiveRight] = (0, react_1.useState)(false);
     const [valueLeft, setValueLeft] = (0, react_1.useState)(leftValue ? leftValue : minValue);
@@ -34,8 +35,12 @@ const RangeSlider = (props) => {
         const [newLeftValue, newRightValue] = getRangeValues(newValueLeft, newValueRight);
         onChange(newLeftValue, newRightValue);
     };
-    const handleChangeValueLeft = (event) => changeValues({ valueLeft: parseInt(event.target.value, 10) });
-    const handleChangeValueRight = (event) => changeValues({ valueRight: parseInt(event.target.value, 10) });
+    const handleChangeValueLeft = (event) => {
+        changeValues({ valueLeft: Number.parseInt(event.target.value, 10) });
+    };
+    const handleChangeValueRight = (event) => {
+        changeValues({ valueRight: Number.parseInt(event.target.value, 10) });
+    };
     const onMouseDownLeft = () => {
         setIsChangingLeft(true);
         setIsChangingRight(false);
@@ -100,6 +105,7 @@ const RangeSlider = (props) => {
     const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);
     const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
     const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }))] }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] })));
+    const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'user-select-none' }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) }))] }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingLeft ? 'changing' : ''}`, style: { zIndex: activeLeft ? '6' : '5' }, value: valueLeft, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueLeft, onMouseDown: onMouseDownLeft, onMouseMove: onMouseMoveLeft, onMouseUp: onMouseUpLeft }), (0, jsx_runtime_1.jsx)("input", { className: `${isChangingRight ? 'changing' : ''}`, style: { zIndex: activeRight ? '6' : '5' }, value: valueRight, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChangeValueRight, onMouseDown: onMouseDownRight, onMouseMove: onMouseMoveRight, onMouseUp: onMouseUpRight })] })));
 };
 exports.default = RangeSlider;

package/lib/es/components/slider/Slider.d.ts

@@ -1,4 +1,5 @@
 import React, { type HTMLAttributes } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
 export type SliderProps = {
     /**
      * The current value.
@@ -46,6 +47,12 @@ export type SliderProps = {
      * @default 1
      */
     step?: number;
+    /**
+     * Defines the color of the slider.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
     /**
      * Disables all pointer events.
      *

package/lib/es/components/slider/Slider.js

@@ -5,8 +5,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
+const currentColors_1 = require("../../utils/currentColors");
 const Slider = (props) => {
-    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false } = props, remainingProps = tslib_1.__rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "step", "onChange", "onDragEnd", "className", "disabled"]);
+    const { value = 0, minValue = 0, maxValue = Number.MAX_VALUE, valueLabels = false, valueLabelUnit, largeValueLabels = false, hideValueBar = false, color = 'primary', step = 1, onChange = noop_1.default, onDragEnd = noop_1.default, className, disabled = false } = props, remainingProps = tslib_1.__rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "color", "step", "onChange", "onDragEnd", "className", "disabled"]);
     const [currentValue, setCurrentValue] = (0, react_1.useState)(value ? value : minValue);
     const [isChanging, setIsChanging] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -15,7 +16,7 @@ const Slider = (props) => {
         }
     }, [value, minValue, maxValue]);
     const handleChange = (event) => {
-        const newValue = parseInt(event.target.value, 10);
+        const newValue = Number.parseInt(event.target.value, 10);
         setCurrentValue(newValue);
         setIsChanging(true);
         onChange(newValue);
@@ -29,6 +30,7 @@ const Slider = (props) => {
     };
     const wrapperClassNames = (0, classnames_1.default)('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', hideValueBar && 'hide-value-bar', largeValueLabels && 'large-value-labels', className && className);
     const trackWidth = (100 * (currentValue - minValue)) / (maxValue - minValue);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("div", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
+    const sliderBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [(0, jsx_runtime_1.jsx)("div", { className: 'range-whole-track' }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'range-value' }, { children: (0, jsx_runtime_1.jsx)("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), (0, jsx_runtime_1.jsx)("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
 };
 exports.default = Slider;

package/lib/es/components/states/CustomState.js

@@ -8,6 +8,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
 const StateButton_1 = tslib_1.__importDefault(require("./StateButton"));
 const StateIcon_1 = tslib_1.__importDefault(require("./StateIcon"));
+const hasUtilityClass_1 = require("../../utils/hasUtilityClass");
 const justify = {
     left: 'justify-content-start',
     center: 'justify-content-center',
@@ -28,11 +29,9 @@ const renderButtons = (buttons) => {
                 }) }))] }));
 };
 const CustomState = (props) => {
-    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName, innerClassName, children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
-    const hasCustomInnerPadding = innerClassName === null || innerClassName === void 0 ? void 0 : innerClassName.includes('padding');
-    const hasCustomOuterPadding = outerClassName === null || outerClassName === void 0 ? void 0 : outerClassName.includes('padding');
-    const wrapperClasses = (0, classnames_1.default)('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasCustomOuterPadding && condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
-    const innerClassNames = (0, classnames_1.default)('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasCustomInnerPadding && condensed ? 'padding-15' : 'padding-25', innerClassName && innerClassName);
+    const { icon, icons = [], image, headline, message, buttons = [], alignment = 'center', fullWidth = false, condensed = false, outerClassName = '', innerClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    const wrapperClasses = (0, classnames_1.default)('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !(0, hasUtilityClass_1.hasPaddingClass)(outerClassName) && condensed ? 'padding-10' : 'padding-15', outerClassName);
+    const innerClassNames = (0, classnames_1.default)('display-flex', 'flex-column', 'align-items-center', 'text-center', !(0, hasUtilityClass_1.hasPaddingClass)(innerClassName) && condensed ? 'padding-15' : 'padding-25', innerClassName);
     const iconClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = (0, classnames_1.default)(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
     const headlineClassNames = (0, classnames_1.default)(condensed ? 'text-size-h4' : 'text-size-h3 text-size-h2-xl', 'line-height-125rel', 'text-color-dark', 'text-medium', 'width-500', 'max-width-100pct', 'text-wrap-balance');

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

@@ -1,4 +1,5 @@
 import { type PropsWithChildren } from 'react';
+import { type CurrentColor } from '../../utils/currentColors';
 export type SwitchProps = {
     /**
      * Optional key that is used as key and as the id on the internal input.
@@ -14,6 +15,12 @@ export type SwitchProps = {
      * @default false
      */
     checked?: boolean;
+    /**
+     * Defines the color of the switch.
+     *
+     * @default 'primary'
+     */
+    color?: CurrentColor;
     /**
      * The min-width of the switch.
      */

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

@@ -6,8 +6,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("react");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const currentColors_1 = require("../../utils/currentColors");
 const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "disabledText", "children", "labelPosition", "onChange"]);
+    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, color = 'primary', disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop_1.default } = props, remainingProps = tslib_1.__rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -17,8 +18,8 @@ const Switch = (props) => {
     const switchContentClasses = (0, classnames_1.default)('switch-content'
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
-    const switchContentStyles = { minWidth };
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: switchContentStyles }, { 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] })) })));
+    const switchBackgroundColor = (0, currentColors_1.getCurrentBackgroundColor)(color);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: switchLabelClasses }, { children: [(0, jsx_runtime_1.jsx)("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: switchContentClasses, style: { color: switchBackgroundColor, minWidth } }, { children: [hasMultipleText ? ((0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": disabledText })) : (hasSingleText && (0, jsx_runtime_1.jsx)("div", { className: 'switch-text', "data-on": enabledText, "data-off": enabledText })), (0, jsx_runtime_1.jsx)("div", { className: 'switch-handle' })] })), children && children] })) })));
 };
 Switch.LABEL_POSITION_LEFT = 'left';
 Switch.LABEL_POSITION_RIGHT = 'right';

package/lib/es/components/tooltip/SimpleTooltip.d.ts

@@ -1,6 +1,6 @@
 import React, { type MutableRefObject, type PropsWithChildren } from 'react';
 import { type TooltipProps } from './Tooltip';
-import { type Trigger } from '../../values/Trigger';
+import { type TriggerType } from '../../values/Trigger';
 export type delayProp = {
     show: number;
     hide: number;
@@ -15,7 +15,7 @@ export type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {
      * Possible values are: `hover`, `click`, `focus`
      * @default 'hover'
      */
-    trigger?: Trigger;
+    trigger?: TriggerType;
     /**
      * The react ref object assigned to the target of the tooltip.
      */

package/lib/es/components/tooltip/Tooltip.d.ts

@@ -47,9 +47,9 @@ export type TooltipProps = {
      */
     allowOnTouch?: boolean;
     /**
-     * Additional props assigned to the arrow element.
+     * Additional props assigned to the arrow element. Internally used.
      */
-    arrowProps?: {};
+    arrowProps?: Record<string, unknown>;
     /**
      * Additional style properties assigned to the wrapper element.
      */

package/lib/es/components/tooltip/Tooltip.js

@@ -19,13 +19,17 @@ const TEXT_ALIGNMENT_MAP = {
 };
 const Tooltip = (0, react_1.forwardRef)((props, ref) => {
     const _a = (0, omit_1.default)(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = tslib_1.__rest(_a, ["allowOnTouch", "arrowProps", "children", "className", "innerClassName", "placement", "style", "textAlignment", "tooltipStyle", "width"]);
+    // Mount the component but don't show it yet via CSS.
+    // After it is mounted, we set the visibility class to use CSS animation
+    const [isMounted, setIsMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
     if (!(0, deviceUtils_1.isDesktop)() && !allowOnTouch) {
         // Workaround: we have to return a DOM node as otherwise the
         // react-transition library would throw an error on mobile
         // when triggering a browser reflow and accessing the node directly.
         return (0, jsx_runtime_1.jsx)("span", { className: 'display-none' });
     }
-    const wrapperClasses = (0, classnames_1.default)('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, className);
+    const wrapperClasses = (0, classnames_1.default)('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, 'fade', isMounted && 'show', className);
     const innerClasses = (0, classnames_1.default)('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`, innerClassName && innerClassName);
     /* eslint-disable react/no-unknown-property */
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: innerClasses }, { children: children }))] })));

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

@@ -9,4 +9,5 @@ export type EventListenerType = keyof DocumentEventMap;
  * @returns A mutable ref object representing the target element.
  */
 declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => import("react").MutableRefObject<T>;
+export declare const useClickOutsideWithRef: <T extends HTMLElement = any>(ref: React.MutableRefObject<HTMLElement | null> | HTMLElement | null, callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => void;
 export default useClickOutside;

package/lib/es/hooks/useClickOutside.js

@@ -3,6 +3,7 @@
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useClickOutsideWithRef = void 0;
 const react_1 = require("react");
 /**
  * Custom hook to detect clicks outside a specified element.
@@ -14,10 +15,17 @@ const react_1 = require("react");
  */
 const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
     const targetRef = (0, react_1.useRef)(null);
+    (0, exports.useClickOutsideWithRef)(targetRef, callback, events);
+    return targetRef;
+};
+// Internal use for now - extend it later to be used outside
+const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstart']) => {
     (0, react_1.useEffect)(() => {
+        // In case the ref is actually a state and will be set via the state setter function
+        const element = ref && 'current' in ref ? ref.current : ref;
         // Event listener function to check if the click is outside the target element
         const listener = (event) => {
-            if (targetRef.current && !targetRef.current.contains(event.target)) {
+            if (element && !element.contains(event.target)) {
                 callback(event);
             }
         };
@@ -27,7 +35,7 @@ const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
         return () => {
             events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [targetRef, callback, events]);
-    return targetRef;
+    }, [ref, callback, events]);
 };
+exports.useClickOutsideWithRef = useClickOutsideWithRef;
 exports.default = useClickOutside;

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

@@ -0,0 +1,26 @@
+/**
+ * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
+ *
+ * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
+ * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
+ * or the component's mount time.
+ *
+ * @example
+ * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+ * import Button from '@rio-cloud/rio-uikit/Button';
+ *
+ * const MyComponent = () => {
+ *   const getElapsedTime = useElapsedTime();
+ *
+ *   const handleClick = () => {
+ *     const elapsedTime = getElapsedTime();
+ *     console.log(`Elapsed time: ${elapsedTime} ms`);
+ *   };
+ *
+ *   return (
+ *       <Button onClick={handleClick}>Get elapsed time</Button>
+ *   );
+ * };
+ */
+declare const useElapsedTime: (startTime?: number) => (() => number);
+export default useElapsedTime;

package/lib/es/hooks/useElapsedTime.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+/**
+ * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
+ *
+ * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
+ * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
+ * or the component's mount time.
+ *
+ * @example
+ * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
+ * import Button from '@rio-cloud/rio-uikit/Button';
+ *
+ * const MyComponent = () => {
+ *   const getElapsedTime = useElapsedTime();
+ *
+ *   const handleClick = () => {
+ *     const elapsedTime = getElapsedTime();
+ *     console.log(`Elapsed time: ${elapsedTime} ms`);
+ *   };
+ *
+ *   return (
+ *       <Button onClick={handleClick}>Get elapsed time</Button>
+ *   );
+ * };
+ */
+const useElapsedTime = (startTime = Date.now()) => {
+    const startTimeRef = (0, react_1.useRef)(startTime);
+    const getElapsedTime = () => {
+        return Date.now() - startTimeRef.current;
+    };
+    (0, react_1.useEffect)(() => {
+        startTimeRef.current = startTime;
+    }, [startTime]);
+    return getElapsedTime;
+};
+exports.default = useElapsedTime;

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

@@ -14,5 +14,5 @@ type WindowEventMapWithFullscreen = {
  * @param options - Optional. An object that specifies characteristics about the event listener.
  * @param target - Optional. The target element to which to attach the event listener.
  */
-declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Window | Document | T | null) => void;
+declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Document | Window | T | null) => void;
 export default useEvent;

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

@@ -2,9 +2,12 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (callback: (event: KeyboardEvent) => void, eventTypes?: KeyboardEventType[], node?: Document) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void | KeyboardEventType[]) | undefined, eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/lib/es/hooks/useKey.js

@@ -4,20 +4,48 @@ const react_1 = require("react");
 /**
  * Custom hook to handle keyboard events.
  *
- * @param callback - The callback function to be executed when a keyboard event occurs.
- * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
- * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.
+ * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.
+ *                               If the first argument is a callback, this is an optional array of event types.
+ * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.
+ *                                         If the first argument is a callback, this is the node (defaults to document).
+ * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-const useKey = (callback, eventTypes = ['keydown'], node = document) => {
+const useKey = (keyOrCallback, callbackOrEventTypes, eventTypesOrNode = ['keydown'], node = document) => {
+    const callbacksRef = (0, react_1.useRef)([]);
     (0, react_1.useEffect)(() => {
+        const isKeyMode = typeof keyOrCallback === 'string';
+        const callback = isKeyMode
+            ? callbackOrEventTypes
+            : keyOrCallback;
+        const keyHandler = (event) => {
+            if (isKeyMode) {
+                if (event.key === keyOrCallback) {
+                    callback(event);
+                }
+            }
+            else {
+                callback(event);
+            }
+        };
+        // Register the keyHandler
+        callbacksRef.current.push(keyHandler);
+        const genericHandler = (event) => {
+            for (const callBecky of callbacksRef.current) {
+                callBecky(event);
+            }
+        };
+        const eventTypes = Array.isArray(eventTypesOrNode) ? eventTypesOrNode : ['keydown'];
         for (const eventType of eventTypes) {
-            node.addEventListener(eventType, callback);
+            node.addEventListener(eventType, genericHandler);
         }
         return () => {
             for (const eventType of eventTypes) {
-                node.removeEventListener(eventType, callback);
+                node.removeEventListener(eventType, genericHandler);
             }
+            // Clean up callback reference
+            callbacksRef.current = callbacksRef.current.filter(singleCallback => singleCallback !== keyHandler);
         };
-    }, [callback]);
+    }, [keyOrCallback, callbackOrEventTypes, eventTypesOrNode, node]);
 };
 exports.default = useKey;

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

@@ -8,4 +8,9 @@ import React from 'react';
  * @returns A mutable ref object to manage the timeout ID.
  */
 declare const useTimeout: (callback: () => void, delay: number | null) => React.MutableRefObject<number | null>;
+export declare const useChainedTimeout: () => {
+    set: (fn: () => void, delayMs?: number) => void;
+    clear: () => void;
+    handleRef: React.MutableRefObject<any>;
+};
 export default useTimeout;