@rio-cloud/rio-uikit 1.2.1 → 1.3.0

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

@@ -3,16 +3,148 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 // @ts-ignore-next-line importsNotUsedAsValues
-require("react");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("react-bootstrap/OverlayTrigger"));
-const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+const react_1 = tslib_1.__importStar(require("react"));
+const react_dom_1 = tslib_1.__importDefault(require("react-dom"));
+const react_popper_1 = require("react-popper");
 const Placement_1 = require("../../values/Placement");
 const Trigger_1 = require("../../values/Trigger");
+const mergeRefs_1 = tslib_1.__importDefault(require("../../utils/mergeRefs"));
+const useClickOutside_1 = require("../../hooks/useClickOutside");
+const useTimeout_1 = require("../../hooks/useTimeout");
+const useUncontrollable_1 = require("../../hooks/useUncontrollable");
 const OverlayTrigger = (props) => {
-    const usedProps = Object.assign({ rootClose: true }, (0, omit_1.default)(props, 'children'));
-    const { children } = props;
-    // @ts-ignore
-    return (0, jsx_runtime_1.jsx)(OverlayTrigger_1.default, Object.assign({}, usedProps, { children: children }));
+    var _a, _b;
+    const { show: propsShow, defaultShow = false, enablePortal = true, trigger = Trigger_1.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] = (0, useUncontrollable_1.useUncontrolledProp)(propsShow, defaultShow, onToggle);
+    const hoverStateRef = (0, react_1.useRef)('');
+    const timeout = (0, useTimeout_1.useChainedTimeout)();
+    const { onFocus, onBlur, onClick } = typeof children !== 'function' ? react_1.default.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 = (0, react_1.useCallback)((...args) => {
+        handleShow();
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(...args);
+    }, [handleShow, onFocus]);
+    const handleBlur = (0, react_1.useCallback)((...args) => {
+        handleHide();
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(...args);
+    }, [handleHide, onBlur]);
+    const handleClick = (0, react_1.useCallback)((...args) => {
+        setShow(!show);
+        onClick === null || onClick === void 0 ? void 0 : onClick(...args);
+    }, [onClick, setShow, show]);
+    const handleMouseOver = (0, react_1.useCallback)((...args) => {
+        handleMouseOverOut(handleShow, args, 'fromElement');
+    }, [handleShow]);
+    const handleMouseOut = (0, react_1.useCallback)((...args) => {
+        handleMouseOverOut(handleHide, args, 'toElement');
+    }, [handleHide]);
+    const [triggerNode, setTriggerNode] = (0, react_1.useState)(null);
+    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
+    const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
+    const [arrowPlacement, setArrowPlacement] = (0, react_1.useState)(placement);
+    const handleClickOutside = (0, react_1.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]);
+    (0, useClickOutside_1.useClickOutsideWithRef)(triggerNode, handleClickOutside);
+    const triggerProps = {
+        ref: (0, mergeRefs_1.default)([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 = (0, react_popper_1.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
+    (0, react_1.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_1.default.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [show && (enablePortal ? react_dom_1.default.createPortal(overlayElement, document.body) : overlayElement), react_1.default.cloneElement(children, triggerProps)] }));
 };
 OverlayTrigger.TRIGGER_CLICK = Trigger_1.TRIGGER.CLICK;
 OverlayTrigger.TRIGGER_HOVER = Trigger_1.TRIGGER.HOVER;

package/lib/es/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/lib/es/components/popover/Popover.js

@@ -1,20 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PLACEMENT_MAP = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Popover_1 = tslib_1.__importDefault(require("react-bootstrap/Popover"));
+const react_1 = tslib_1.__importStar(require("react"));
+require("framer-motion");
 const Placement_1 = require("../../values/Placement");
-const PLACEMENT_MAP = {
+exports.PLACEMENT_MAP = {
     AUTO: Placement_1.PLACEMENT.AUTO,
     TOP: Placement_1.PLACEMENT.TOP,
     RIGHT: Placement_1.PLACEMENT.RIGHT,
     BOTTOM: Placement_1.PLACEMENT.BOTTOM,
     LEFT: Placement_1.PLACEMENT.LEFT,
 };
+const PopoverTitle = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-header popover-title ${className}` }, { children: children })));
+const PopoverContent = ({ className = '', children }) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: `popover-content popover-body ${className}` }, { children: children })));
+const isPopoverTitleOrContent = (element) => {
+    return (0, react_1.isValidElement)(element) && (element.type === PopoverTitle || element.type === PopoverContent);
+};
 const Popover = (0, react_1.forwardRef)((props, ref) => {
-    const { title, titleClassName = '', contentClassName = '', children } = props, remainingProps = tslib_1.__rest(props, ["title", "titleClassName", "contentClassName", "children"]);
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.default, Object.assign({ ref: ref }, remainingProps, { children: [title && (0, jsx_runtime_1.jsx)(Popover_1.default.Title, Object.assign({ className: `popover-title ${titleClassName}` }, { children: title })), children && ((0, jsx_runtime_1.jsx)(Popover_1.default.Content, Object.assign({ className: `popover-content ${contentClassName}` }, { children: children })))] })));
+    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '' } = props, remainingProps = tslib_1.__rest(props, ["placement", "arrowProps", "title", "titleClassName", "contentClassName", "children", "className"]);
+    const hasTitle = !!title;
+    const hasCustomContent = react_1.default.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] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => setIsMounted(true), []);
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}` }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'arrow' }, arrowProps)), hasTitle && (0, jsx_runtime_1.jsx)(PopoverTitle, Object.assign({ className: titleClassName }, { children: title })), hasCustomContent ? children : (0, jsx_runtime_1.jsx)(PopoverContent, Object.assign({ className: contentClassName }, { children: children }))] })));
 });
-Object.assign(Popover, PLACEMENT_MAP);
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
+Object.assign(Popover, exports.PLACEMENT_MAP);
 exports.default = Popover;

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/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;