@rio-cloud/rio-uikit 1.2.2 → 1.3.0

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/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.
      */

package/components/tooltip/Tooltip.js

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, } from 'react';
+import { useEffect, useState, forwardRef, } from 'react';
 import classNames from 'classnames';
 import omit from 'lodash/fp/omit';
 import { isDesktop } from '../../utils/deviceUtils';
@@ -17,13 +17,17 @@ const TEXT_ALIGNMENT_MAP = {
 };
 const Tooltip = forwardRef((props, ref) => {
     const _a = omit(['popper', 'positionLeft', 'positionTop'], props), { allowOnTouch = false, arrowProps, children, className = '', innerClassName = '', placement = 'bottom', style, textAlignment = 'center', tooltipStyle = 'default', width = 'auto' } = _a, remainingProps = __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] = useState(false);
+    useEffect(() => setIsMounted(true), []);
     if (!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 _jsx("span", { className: 'display-none' });
     }
-    const wrapperClasses = classNames('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, className);
+    const wrapperClasses = classNames('tooltip', tooltipStyle && `tooltip-${tooltipStyle}`, placement, 'fade', isMounted && 'show', className);
     const innerClasses = classNames('tooltip-inner', textAlignment && `text-${textAlignment}`, width && `width-${width}`, innerClassName && innerClassName);
     /* eslint-disable react/no-unknown-property */
     return (_jsxs("div", Object.assign({}, remainingProps, { role: 'tooltip', "x-placement": placement, ref: ref, className: wrapperClasses, style: Object.assign({}, style), "data-offset": 20 }, { children: [_jsx("div", Object.assign({ className: 'tooltip-arrow' }, arrowProps)), _jsx("div", Object.assign({ className: innerClasses }, { children: children }))] })));

package/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/hooks/useClickOutside.js

@@ -12,10 +12,17 @@ import { useEffect, useRef } from 'react';
  */
 const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
     const targetRef = useRef(null);
+    useClickOutsideWithRef(targetRef, callback, events);
+    return targetRef;
+};
+// Internal use for now - extend it later to be used outside
+export const useClickOutsideWithRef = (ref, callback, events = ['mousedown', 'touchstart']) => {
     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);
             }
         };
@@ -25,7 +32,6 @@ const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
         return () => {
             events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [targetRef, callback, events]);
-    return targetRef;
+    }, [ref, callback, events]);
 };
 export default useClickOutside;

package/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/hooks/useElapsedTime.js

@@ -0,0 +1,36 @@
+import { useRef, useEffect } from '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 = useRef(startTime);
+    const getElapsedTime = () => {
+        return Date.now() - startTimeRef.current;
+    };
+    useEffect(() => {
+        startTimeRef.current = startTime;
+    }, [startTime]);
+    return getElapsedTime;
+};
+export default useElapsedTime;

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

package/hooks/useTimeout.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useMemo, useRef } from 'react';
 // See www.joshwcomeau.com/snippets/react-hooks/use-timeout/
 /**
  * A custom hook for handling timeout events.
@@ -31,4 +31,42 @@ const useTimeout = (callback, delay) => {
     }, [delay]);
     return timeoutRef;
 };
+export const useChainedTimeout = () => {
+    const MAX_DELAY_MS = Math.pow(2, 31) - 1;
+    const setChainedTimeout = (ref, fn, timeoutAtMs) => {
+        const delayMs = timeoutAtMs - Date.now();
+        ref.current =
+            delayMs <= MAX_DELAY_MS
+                ? setTimeout(fn, delayMs)
+                : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
+    };
+    const handleRef = useRef();
+    const { set, clear } = useMemo(() => {
+        const clear = () => clearTimeout(handleRef.current);
+        const set = (fn, delayMs = 0) => {
+            clear();
+            if (delayMs <= MAX_DELAY_MS) {
+                // For simplicity, if the timeout is short, just set a normal timeout.
+                handleRef.current = setTimeout(fn, delayMs);
+            }
+            else {
+                setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+            }
+        };
+        return {
+            set,
+            clear,
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            clear();
+        };
+    }, [clear]);
+    return {
+        set,
+        clear,
+        handleRef,
+    };
+};
 export default useTimeout;

package/hooks/useUncontrollable.d.ts

@@ -0,0 +1,13 @@
+export type Handler = (value: any, ...args: any[]) => any;
+export declare function defaultKey(key: string): string;
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue: TProp, handler?: THandler): readonly [TProp, THandler];
+declare function useUncontrolledProp<TProp, THandler extends Handler = Handler>(propValue: TProp | undefined, defaultValue?: TProp | undefined, handler?: THandler): readonly [TProp | undefined, (...args: Parameters<THandler>) => ReturnType<THandler> | void];
+export { useUncontrolledProp };
+type FilterFlags<Base, Condition> = {
+    [Key in keyof Base]: NonNullable<Base[Key]> extends Condition ? Key : never;
+};
+type AllowedNames<Base, Condition> = FilterFlags<Base, Condition>[keyof Base];
+type ConfigMap<TProps extends object> = {
+    [p in keyof TProps]?: AllowedNames<TProps, Function>;
+};
+export declare function useUncontrolled<TProps extends object, TDefaults extends string = never>(props: TProps, config: ConfigMap<TProps>): Omit<TProps, TDefaults>;

package/hooks/useUncontrollable.js

@@ -0,0 +1,41 @@
+import { __rest } from "tslib";
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
+// forked from https://github.com/jquense/uncontrollable/blob/master/src/index.ts
+import { useCallback, useRef, useState } from 'react';
+export function defaultKey(key) {
+    return 'default' + key.charAt(0).toUpperCase() + key.substr(1);
+}
+function useUncontrolledProp(propValue, defaultValue, handler) {
+    const wasPropRef = useRef(propValue !== undefined);
+    const [stateValue, setState] = useState(defaultValue);
+    const isProp = propValue !== undefined;
+    const wasProp = wasPropRef.current;
+    wasPropRef.current = isProp;
+    /**
+     * If a prop switches from controlled to Uncontrolled
+     * reset its value to the defaultValue
+     */
+    if (!isProp && wasProp && stateValue !== defaultValue) {
+        setState(defaultValue);
+    }
+    return [
+        isProp ? propValue : stateValue,
+        useCallback((...args) => {
+            const [value, ...rest] = args;
+            const returnValue = handler === null || handler === void 0 ? void 0 : handler(value, ...rest);
+            setState(value);
+            return returnValue;
+        }, [handler]),
+    ];
+}
+export { useUncontrolledProp };
+export function useUncontrolled(props, config) {
+    return Object.keys(config).reduce((result, fieldName) => {
+        const _a = result, _b = defaultKey(fieldName), defaultValue = _a[_b], _c = fieldName, propsValue = _a[_c], rest = __rest(_a, [typeof _b === "symbol" ? _b : _b + "", typeof _c === "symbol" ? _c : _c + ""]);
+        // @ts-ignore-next-line
+        const handlerName = config[fieldName];
+        // @ts-ignore-next-line
+        const [value, handler] = useUncontrolledProp(propsValue, defaultValue, props[handlerName]);
+        return Object.assign(Object.assign({}, rest), { [fieldName]: value, [handlerName]: handler });
+    }, props);
+}

package/lib/es/DateRangePicker.d.ts

@@ -1,12 +1,12 @@
-import type { Component, JSX, PropsWithChildren, ReactNode } from 'react';
+import type { JSX, PropsWithChildren, ReactNode } from 'react';
 import type { Moment } from 'moment/moment';
-export interface DateRangePickerCustomPresets {
+export type DateRangePickerCustomPresets = {
     startValue: Moment;
     endValue: Moment;
     text: string | JSX.Element;
     onSelect?: Function;
-}
-export interface DateRangePickerProps {
+};
+export type DateRangePickerProps = {
     startValue?: Moment;
     endValue?: Moment;
     defaultStartValue?: Moment;
@@ -34,11 +34,10 @@ export interface DateRangePickerProps {
     dropup?: boolean;
     pullRight?: boolean;
     autoDropDirection?: boolean;
-}
+};
 /**
  * Wrapper component for React-Datetime.
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-declare const DateRangePicker: Component<PropsWithChildren<DateRangePickerProps>, {}, any>;
-export { DateRangePicker };
+export declare const DateRangePicker: (props: PropsWithChildren<DateRangePickerProps>) => import("react/jsx-runtime").JSX.Element;

package/lib/es/DateRangePicker.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateRangePicker = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const DateRangePicker_1 = tslib_1.__importDefault(require("./components/datepicker/DateRangePicker"));
 /**
  * Wrapper component for React-Datetime.
  *
  * @deprecated This will be removed from the UIKIT at some time.
  */
-const DateRangePicker = DateRangePicker_1.default;
+const DateRangePicker = (props) => {
+    const { children } = props, remainingProps = tslib_1.__rest(props, ["children"]);
+    return (0, jsx_runtime_1.jsx)(DateRangePicker_1.default, Object.assign({}, remainingProps, { children: children }));
+};
 exports.DateRangePicker = DateRangePicker;