@rio-cloud/rio-uikit 1.2.2 → 1.4.0

package/components/overlay/OverlayTrigger.js

@@ -1,15 +1,147 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore-next-line importsNotUsedAsValues
-import 'react';
-import BSOverlayTrigger from 'react-bootstrap/OverlayTrigger';
-import omit from 'lodash/omit';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { usePopper } from 'react-popper';
 import { PLACEMENT } from '../../values/Placement';
 import { TRIGGER } from '../../values/Trigger';
+import mergeRefs from '../../utils/mergeRefs';
+import { useClickOutsideWithRef } from '../../hooks/useClickOutside';
+import { useChainedTimeout } from '../../hooks/useTimeout';
+import { useUncontrolledProp } from '../../hooks/useUncontrollable';
 const OverlayTrigger = (props) => {
-    const usedProps = Object.assign({ rootClose: true }, omit(props, 'children'));
-    const { children } = props;
-    // @ts-ignore
-    return _jsx(BSOverlayTrigger, Object.assign({}, usedProps, { children: children }));
+    var _a, _b;
+    const { show: propsShow, defaultShow = false, enablePortal = true, trigger = TRIGGER.HOVER, delay, overlay, placement = 'top', popperConfig, onToggle = () => { }, rootClose = true, children, } = props;
+    // Use a hook to handle controlled props that work in pairs like in this case the "show"  and "onToggle"
+    // props. It returns a setter function that automatically triggers the callback.
+    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);
+    const hoverStateRef = useRef('');
+    const timeout = useChainedTimeout();
+    const { onFocus, onBlur, onClick } = typeof children !== 'function' ? React.Children.only(children).props : {};
+    // Simple implementation of mouseEnter and mouseLeave.
+    // React's built version is broken: https://github.com/facebook/react/issues/4251
+    // for cases when the trigger is disabled and mouseOut/Over can cause flicker
+    // moving from one child element to another.
+    const handleMouseOverOut = (handler, args, relatedNative) => {
+        const [event] = args;
+        const target = event.currentTarget;
+        const related = event.relatedTarget;
+        if ((!related || related !== target) && !target.contains(related)) {
+            handler(...args);
+        }
+    };
+    const handleShow = () => {
+        timeout.clear();
+        hoverStateRef.current = 'show';
+        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.show)) {
+            setShow(true);
+            return;
+        }
+        timeout.set(() => {
+            if (hoverStateRef.current === 'show') {
+                setShow(true);
+            }
+        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.show);
+    };
+    const handleHide = () => {
+        timeout.clear();
+        hoverStateRef.current = 'hide';
+        if (typeof delay === 'number' || !(delay === null || delay === void 0 ? void 0 : delay.hide)) {
+            setShow(false);
+            return;
+        }
+        timeout.set(() => {
+            if (hoverStateRef.current === 'hide') {
+                setShow(false);
+            }
+        }, typeof delay === 'number' ? delay : delay === null || delay === void 0 ? void 0 : delay.hide);
+    };
+    const handleFocus = useCallback((...args) => {
+        handleShow();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(...args);
+    }, [handleShow, onFocus]);
+    const handleBlur = useCallback((...args) => {
+        handleHide();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
+    }, [handleHide, onBlur]);
+    const handleClick = useCallback((...args) => {
+        setShow(!show);
+        onClick === null || onClick === void 0 ? void 0 : onClick(...args);
+    }, [onClick, setShow, show]);
+    const handleMouseOver = useCallback((...args) => {
+        handleMouseOverOut(handleShow, args, 'fromElement');
+    }, [handleShow]);
+    const handleMouseOut = useCallback((...args) => {
+        handleMouseOverOut(handleHide, args, 'toElement');
+    }, [handleHide]);
+    const [triggerNode, setTriggerNode] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const [arrowPlacement, setArrowPlacement] = useState(placement);
+    const handleClickOutside = useCallback((event) => {
+        const isToggleTarget = triggerNode === null || triggerNode === void 0 ? void 0 : triggerNode.contains(event.target);
+        const isOverlayTarget = popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(event.target);
+        // Check if the click occurred outside the trigger element. Clicking on the trigger
+        // itself is handled by the onClick handler
+        if (show && rootClose && !isToggleTarget && !isOverlayTarget) {
+            handleHide();
+        }
+    }, [triggerNode, popperElement, rootClose, handleHide]);
+    useClickOutsideWithRef(triggerNode, handleClickOutside);
+    const triggerProps = {
+        ref: mergeRefs([children.ref, setTriggerNode]),
+    };
+    if (trigger === 'click') {
+        triggerProps.onClick = handleClick;
+    }
+    else if (trigger === 'focus') {
+        triggerProps.onFocus = handleFocus;
+        triggerProps.onBlur = handleBlur;
+    }
+    else if (trigger === 'hover') {
+        triggerProps.onMouseOver = handleMouseOver;
+        triggerProps.onMouseOut = handleMouseOut;
+    }
+    const defaultPopperConfig = {
+        placement,
+        modifiers: [
+            {
+                name: 'arrow',
+                options: {
+                    element: arrowElement,
+                },
+            },
+            {
+                name: 'flip',
+                options: {
+                    fallbackPlacements: ['right', 'left', 'top'],
+                },
+            },
+        ],
+    };
+    if (popperConfig) {
+        popperConfig.placement = placement;
+        // if it has an arrow modifier, inject the arrow element
+        const updatedModifiers = [];
+        (_a = popperConfig.modifiers) === null || _a === void 0 ? void 0 : _a.forEach((mod) => {
+            if (mod.name !== 'arrow') {
+                return updatedModifiers.push(mod);
+            }
+            return updatedModifiers.push(Object.assign(Object.assign({}, mod), { options: Object.assign(Object.assign({}, mod.options), { element: arrowElement }) }));
+        });
+        popperConfig.modifiers = updatedModifiers;
+    }
+    const popper = usePopper(triggerNode, popperElement, popperConfig || defaultPopperConfig);
+    // In case the overlay causes an overflow and the "flip" modifier
+    // changes the overlays placement, we nee to update the arrow placement as well
+    useEffect(() => {
+        if (popper.state) {
+            // Adjust arrow styles based on placement if necessary
+            setArrowPlacement(popper.state.placement);
+        }
+    }, [(_b = popper.state) === null || _b === void 0 ? void 0 : _b.placement]);
+    const overlayElement = React.cloneElement(overlay, Object.assign(Object.assign({}, popper.attributes.popper), { ref: setPopperElement, placement: arrowPlacement, style: Object.assign({}, popper.styles.popper), arrowProps: Object.assign(Object.assign({}, popper.attributes.arrow), { style: popper.styles.arrow, ref: setArrowElement }) }));
+    return (_jsxs(_Fragment, { children: [show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement), React.cloneElement(children, triggerProps)] }));
 };
 OverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;
 OverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;

package/components/popover/Popover.d.ts

@@ -1,6 +1,12 @@
-import React, { type ReactNode } from 'react';
-import type { RefComponent } from '../../utils/RefComponent';
-export type PopoverProps = {
+import React, { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
+export declare const PLACEMENT_MAP: {
+    readonly AUTO: "auto";
+    readonly TOP: "top";
+    readonly RIGHT: "right";
+    readonly BOTTOM: "bottom";
+    readonly LEFT: "left";
+};
+export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
     /**
      * HTML ID attribute, necessary for accessibility.
      */
@@ -18,6 +24,10 @@ export type PopoverProps = {
      * - `left`
      */
     placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
+    /**
+     * Additional props assigned to the arrow element. Internally used.
+     */
+    arrowProps?: Record<string, unknown>;
     /**
      * Any element to be rendered as the title of the Popover.
      *
@@ -32,12 +42,20 @@ export type PopoverProps = {
      * Additional classes to be set on the `Popover.Content` element.
      */
     contentClassName?: string;
+    /**
+     * Additional class names for the wrapper element.
+     */
+    className?: string;
 };
-declare const Popover: RefComponent<React.PropsWithChildren<PopoverProps>, HTMLDivElement> & {
-    readonly AUTO: "auto";
-    readonly TOP: "top";
-    readonly RIGHT: "right";
-    readonly BOTTOM: "bottom";
-    readonly LEFT: "left";
+declare const PopoverTitle: ({ className, children }: React.PropsWithChildren<{
+    className?: string | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverContent: ({ className, children }: React.PropsWithChildren<{
+    className?: string | undefined;
+}>) => import("react/jsx-runtime").JSX.Element;
+type PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {
+    Title: typeof PopoverTitle;
+    Content: typeof PopoverContent;
 };
+declare const Popover: PopoverType;
 export default Popover;

package/components/popover/Popover.js

@@ -1,18 +1,31 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { default as RBPopover } from 'react-bootstrap/Popover';
+import React, { forwardRef, isValidElement, useState, useEffect, } from 'react';
+import 'framer-motion';
 import { PLACEMENT } from '../../values/Placement';
-const PLACEMENT_MAP = {
+export const PLACEMENT_MAP = {
     AUTO: PLACEMENT.AUTO,
     TOP: PLACEMENT.TOP,
     RIGHT: PLACEMENT.RIGHT,
     BOTTOM: PLACEMENT.BOTTOM,
     LEFT: PLACEMENT.LEFT,
 };
+const PopoverTitle = ({ className = '', children }) => (_jsx("div", Object.assign({ className: `popover-header popover-title ${className}` }, { children: children })));
+const PopoverContent = ({ className = '', children }) => (_jsx("div", Object.assign({ className: `popover-content popover-body ${className}` }, { children: children })));
+const isPopoverTitleOrContent = (element) => {
+    return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);
+};
 const Popover = forwardRef((props, ref) => {
-    const { title, titleClassName = '', contentClassName = '', children } = props, remainingProps = __rest(props, ["title", "titleClassName", "contentClassName", "children"]);
-    return (_jsxs(RBPopover, Object.assign({ ref: ref }, remainingProps, { children: [title && _jsx(RBPopover.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && (_jsx(RBPopover.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
+    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '' } = props, remainingProps = __rest(props, ["placement", "arrowProps", "title", "titleClassName", "contentClassName", "children", "className"]);
+    const hasTitle = !!title;
+    const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);
+    // 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] = useState(false);
+    useEffect(() => setIsMounted(true), []);
+    return (_jsxs("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}` }, { children: [_jsx("div", Object.assign({ className: 'arrow' }, arrowProps)), hasTitle && _jsx(PopoverTitle, Object.assign({ className: titleClassName }, { children: title })), hasCustomContent ? children : _jsx(PopoverContent, Object.assign({ className: contentClassName }, { children: children }))] })));
 });
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
 Object.assign(Popover, PLACEMENT_MAP);
 export default Popover;

package/components/selects/BaseSelectDropdown.d.ts

@@ -36,6 +36,7 @@ export type SelectOption = {
 export type BaseSelectDropdownProps<T extends SelectOption> = {
     options?: T[];
     isOpen?: boolean;
+    isLoading?: boolean;
     updateDOMValues?: (values: OptionDOMValue[] | undefined) => void;
     onOpen?: (hasDropup: boolean) => void;
     onSelect?: (selectedItem: T | undefined) => void;

package/components/selects/BaseSelectDropdown.js

@@ -10,11 +10,12 @@ import useEffectOnce from '../../hooks/useEffectOnce';
 import useKey from '../../useKey';
 import DropdownHeader from './DropdownHeader';
 import NoItemMessage from './NoItemMessage';
+import Spinner from '../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, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
+    const { isOpen = false, isLoading = false, updateDOMValues = noop, onOpen = noop, onSelect = noop, onClose = noop, options = [], autoDropDirection = true, dropup = false, pullRight = false, useActiveClass = false, focusedItemIndex: externalFocusedItemIndex, keyboardUsed: externalKeyboardUsed, noItemMessage, dropdownClassName, } = props;
     const [focusedItemIndex, setFocusedItemIndex] = useState(externalFocusedItemIndex || DEFAULT_FOCUSED_ITEM_INDEX);
     const [keyboardUsed, setKeyboardUsed] = useState(externalKeyboardUsed);
     const dropdownMenuRef = useRef(null);
@@ -150,19 +151,20 @@ const BaseSelectDropdown = (props) => {
     if (isEmpty(options)) {
         return _jsx(NoItemMessage, { noItemMessage: noItemMessage, className: dropdownMenuClasses });
     }
-    return (_jsx("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: options.map((option, index) => {
-            if (option.header) {
-                return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
-            }
-            // Show focused style only when keyboard is in use
-            const anchorClassNames = classNames('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
-            const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
-            return (_jsx("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: _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: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
-        }) })));
+    return (_jsxs("ul", Object.assign({ className: dropdownMenuClasses, ref: dropdownMenuRef, role: 'menu' }, { children: [isLoading && (_jsx("div", Object.assign({ className: 'display-flex justify-content-center padding-10' }, { children: _jsx(Spinner, {}) }))), !isLoading &&
+                options.map((option, index) => {
+                    if (option.header) {
+                        return _jsx(DropdownHeader, { icon: option.icon, label: option.label }, option.id);
+                    }
+                    // Show focused style only when keyboard is in use
+                    const anchorClassNames = classNames('display-flex align-items-center', keyboardUsed && focusedItemIndex === index ? HIGHLIGHT_CLASS : '', option.disabled && 'pointer-events-none');
+                    const wrapperClassNames = classNames(option.disabled && 'disabled', useActiveClass && option.selected && 'active');
+                    return (_jsx("li", Object.assign({ className: wrapperClassNames, role: 'listitem' }, { children: _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: [_jsxs("span", { children: [option.icon && _jsx("span", Object.assign({ className: 'margin-right-5' }, { children: option.icon })), option.label] }), _jsx("input", { type: 'hidden', value: option.id })] })) }), option.id));
+                })] })));
 };
 export const filterOptions = (itemDOMValues, filterValue, options) => {
     const filteredDOMValues = itemDOMValues.filter(item => item.text.toLowerCase().includes(filterValue.toLowerCase()));

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

@@ -16,7 +16,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, 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 = __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, 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 = __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] = useState(false);
     const [selectedItemIds, setSelectedItemIds] = useState(value || []);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -86,7 +86,7 @@ const Multiselect = (props) => {
             option.selected = selectedItemIds.indexOf(option.id) !== -1;
             return option;
         });
-        return (_jsx(BaseSelectDropdown, { 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 (_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, requestItemDOMValues: requestItemDOMValues }));
     };
     const handleFilterChange = (event) => {
         event.preventDefault();

package/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/components/selects/Select.js

@@ -15,7 +15,7 @@ import SelectedOption from './SelectedOption';
 import WithFeedbackAndAddon from './WithFeedbackAndAddon';
 const DEFAULT_FOCUSED_ITEM_INDEX = -1;
 const Select = (props) => {
-    const { name, id = name, label, options = [], value, onChange = noop, 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 = __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, 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 = __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] = useState(false);
     const [selectedItem, setSelectedItem] = useState(null);
     const [isFilterActive, setIsFilterActive] = useState(false);
@@ -82,7 +82,7 @@ const Select = (props) => {
         else if (keyboardUsed) {
             currentFocusedItemIndex = 0;
         }
-        return (_jsx(BaseSelectDropdown, { 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 (_jsx(BaseSelectDropdown, { 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/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/components/slider/RangeSlider.js

@@ -3,13 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
+import { getCurrentBackgroundColor } from '../../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, onDragEnd = noop } = props, remainingProps = __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, onDragEnd = noop } = props, remainingProps = __rest(props, ["minValue", "maxValue", "valueLabels", "valueLabelUnit", "step", "color", "leftValue", "rightValue", "className", "disabled", "onChange", "onDragEnd"]);
     const [activeLeft, setActiveLeft] = useState(false);
     const [activeRight, setActiveRight] = useState(false);
     const [valueLeft, setValueLeft] = useState(leftValue ? leftValue : minValue);
@@ -32,8 +33,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);
@@ -98,6 +103,7 @@ const RangeSlider = (props) => {
     const trackWidth = (100 * (finalRightValue - finalLeftValue)) / (maxValue - minValue);
     const trackLeft = (100 * (finalLeftValue - minValue)) / (maxValue - minValue);
     const wrapperClassNames = classNames('range-slider', disabled && 'disabled', valueLabels && 'show-value-labels', className && className);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && (_jsxs("div", Object.assign({ className: 'user-select-none' }, { children: [_jsx("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue })), _jsx("div", Object.assign({ className: 'range-value' }, { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }))] }))) })), _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 }), _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 = getCurrentBackgroundColor(color);
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%`, left: `${trackLeft}%` } }, { children: valueLabels && (_jsxs("div", Object.assign({ className: 'user-select-none' }, { children: [_jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("span", { children: valueLabelUnit ? `${finalLeftValue} ${valueLabelUnit}` : finalLeftValue }) })), _jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("span", { children: valueLabelUnit ? `${finalRightValue} ${valueLabelUnit}` : finalRightValue }) }))] }))) })), _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 }), _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 })] })));
 };
 export default RangeSlider;

package/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/components/slider/Slider.js

@@ -3,8 +3,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import noop from 'lodash/noop';
+import { getCurrentBackgroundColor } from '../../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, onDragEnd = noop, className, disabled = false } = props, remainingProps = __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, onDragEnd = noop, className, disabled = false } = props, remainingProps = __rest(props, ["value", "minValue", "maxValue", "valueLabels", "valueLabelUnit", "largeValueLabels", "hideValueBar", "color", "step", "onChange", "onDragEnd", "className", "disabled"]);
     const [currentValue, setCurrentValue] = useState(value ? value : minValue);
     const [isChanging, setIsChanging] = useState(false);
     useEffect(() => {
@@ -13,7 +14,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);
@@ -27,6 +28,7 @@ const Slider = (props) => {
     };
     const wrapperClassNames = classNames('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 (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && (_jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("div", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), _jsx("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
+    const sliderBackgroundColor = getCurrentBackgroundColor(color);
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: wrapperClassNames, style: { color: sliderBackgroundColor } }, { children: [_jsx("div", { className: 'range-whole-track' }), _jsx("div", Object.assign({ className: 'range-track', style: { width: `${trackWidth}%` } }, { children: valueLabels && (_jsx("div", Object.assign({ className: 'range-value' }, { children: _jsx("span", { children: valueLabelUnit ? `${currentValue} ${valueLabelUnit}` : currentValue }) }))) })), _jsx("input", { className: `${isChanging ? 'changing' : ''}`, value: currentValue, min: minValue, max: maxValue, step: step, type: 'range', onChange: handleChange, onMouseDown: onMouseDown, onMouseUp: onMouseUp })] })));
 };
 export default Slider;

package/components/states/CustomState.js

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import isEmpty from 'lodash/fp/isEmpty';
 import StateButton from './StateButton';
 import StateIcon from './StateIcon';
+import { hasPaddingClass } from '../../utils/hasUtilityClass';
 const justify = {
     left: 'justify-content-start',
     center: 'justify-content-center',
@@ -26,11 +27,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 = __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 = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasCustomOuterPadding && condensed ? 'padding-10' : 'padding-15', outerClassName && outerClassName);
-    const innerClassNames = classNames('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 = __rest(props, ["icon", "icons", "image", "headline", "message", "buttons", "alignment", "fullWidth", "condensed", "outerClassName", "innerClassName", "children"]);
+    const wrapperClasses = classNames('margin-0', 'width-100pct', !fullWidth && 'max-width-600', 'panel-default', 'panel', !hasPaddingClass(outerClassName) && condensed ? 'padding-10' : 'padding-15', outerClassName);
+    const innerClassNames = classNames('display-flex', 'flex-column', 'align-items-center', 'text-center', !hasPaddingClass(innerClassName) && condensed ? 'padding-15' : 'padding-25', innerClassName);
     const iconClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20');
     const iconsClasses = classNames(condensed ? 'text-size-16 margin-bottom-10' : 'text-size-h2 margin-bottom-20', 'display-flex', 'align-items-center', 'max-width-100pct');
     const headlineClassNames = classNames(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/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/components/switch/Switch.js

@@ -4,8 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import 'react';
 import classNames from 'classnames';
 import noop from 'lodash/fp/noop';
+import { getCurrentBackgroundColor } from '../../utils/currentColors';
 const Switch = (props) => {
-    const { keyName, checked = false, enabledText, minWidth = 40, disabled = false, disabledText, children, labelPosition = !!children ? 'right' : undefined, onChange = noop } = props, remainingProps = __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 } = props, remainingProps = __rest(props, ["keyName", "checked", "enabledText", "minWidth", "disabled", "color", "disabledText", "children", "labelPosition", "onChange"]);
     const handleChange = (event) => {
         onChange(event.target.checked);
     };
@@ -15,8 +16,8 @@ const Switch = (props) => {
     const switchContentClasses = classNames('switch-content'
     // !hasMultipleText && !hasSingleText && 'width-40'
     );
-    const switchContentStyles = { minWidth };
-    return (_jsx("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ className: switchContentClasses, style: switchContentStyles }, { 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] })) })));
+    const switchBackgroundColor = getCurrentBackgroundColor(color);
+    return (_jsx("div", Object.assign({}, remainingProps, { className: 'uikit-switch' }, { children: _jsxs("label", Object.assign({ className: switchLabelClasses }, { children: [_jsx("input", { onChange: handleChange, checked: checked, type: 'checkbox', id: keyName, className: 'switch-input', disabled: disabled }, keyName), _jsxs("div", Object.assign({ 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/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/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.
      */