@coreui/react-pro 4.13.1 → 4.14.0

package/README.md

@@ -42,7 +42,7 @@
 
 Several quick start options are available:
 
-- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.13.1.zip)
+- [Download the latest release](https://github.com/coreui/coreui-react-pro/archive/v4.14.0.zip)
 - Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
 - Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
 - Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`

package/dist/components/date-range-picker/CDateRangePicker.d.ts

@@ -87,6 +87,24 @@ export interface CDateRangePickerProps extends Omit<CFormControlWrapperProps, 'f
      * Toggle visibility or set the content of the input indicator.
      */
     indicator?: ReactNode | boolean;
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v4.14.0
+     */
+    inputDateFormat?: (date: Date) => string;
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v4.14.0
+     */
+    inputDateParse?: (date: string | Date) => Date;
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v4.14.0
+     */
+    inputOnChangeDelay?: number;
     /**
      * Toggle the readonly state for the component.
      */

package/dist/components/popover/CPopover.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import type { Placements, Triggers } from '../../types';
 export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'content'> {
     /**
@@ -61,4 +61,4 @@ export interface CPopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'tit
      */
     visible?: boolean;
 }
-export declare const CPopover: FC<CPopoverProps>;
+export declare const CPopover: React.ForwardRefExoticComponent<CPopoverProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tooltip/CTooltip.d.ts

@@ -1,4 +1,4 @@
-import { FC, HTMLAttributes, ReactNode } from 'react';
+import React, { HTMLAttributes, ReactNode } from 'react';
 import type { Placements, Triggers } from '../../types';
 export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     /**
@@ -57,4 +57,4 @@ export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'con
      */
     visible?: boolean;
 }
-export declare const CTooltip: FC<CTooltipProps>;
+export declare const CTooltip: React.ForwardRefExoticComponent<CTooltipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/hooks/index.d.ts

@@ -1,4 +1,6 @@
+import { useDebouncedCallback } from './useDebouncedCallback';
 import { useForkedRef } from './useForkedRef';
+import { useIsVisible } from './useIsVisible';
 import { usePopper } from './usePopper';
 import { useStateWithCallback } from './useStateWithCallback';
-export { useForkedRef, usePopper, useStateWithCallback };
+export { useDebouncedCallback, useForkedRef, useIsVisible, usePopper, useStateWithCallback };

package/dist/hooks/useDebouncedCallback.d.ts

@@ -0,0 +1 @@
+export declare const useDebouncedCallback: <F extends Function>(callback: F, delay: number) => (...args: any[]) => void;

package/dist/hooks/useIsVisible.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from 'react';
+export declare const useIsVisible: (ref: RefObject<HTMLElement>) => boolean;

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import React$1, { createContext, forwardRef, useState, useRef, useContext, useEffect, useMemo, Children, useLayoutEffect } from 'react';
+import React$1, { createContext, forwardRef, useState, useRef, useContext, useEffect, useCallback, useMemo, Children, useLayoutEffect } from 'react';
 import ReactDOM, { createPortal } from 'react-dom';
 
 /******************************************************************************
@@ -2477,6 +2477,22 @@ CSSTransition.propTypes = process.env.NODE_ENV !== "production" ? _extends$1({},
 }) : {};
 var CSSTransition$1 = CSSTransition;
 
+var useDebouncedCallback = function (callback, delay) {
+    var timeout = useRef();
+    return useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var handler = function () {
+            clearTimeout(timeout.current);
+            callback.apply(void 0, args);
+        };
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(handler, delay);
+    }, [callback, delay]);
+};
+
 // code borrowed from https://github.com/reach/reach-ui
 // problem described https://github.com/facebook/react/issues/13029
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2520,6 +2536,19 @@ function isFunction(value) {
     return !!(value && {}.toString.call(value) == '[object Function]');
 }
 
+var useIsVisible = function (ref) {
+    var _a = useState(false), isIntersecting = _a[0], setIntersecting = _a[1];
+    useEffect(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            return setIntersecting(entry.isIntersecting);
+        });
+        ref.current && observer.observe(ref.current);
+        return function () { return observer.disconnect(); };
+    }, []);
+    return isIntersecting;
+};
+
 var top = 'top';
 var bottom = 'bottom';
 var right = 'right';
@@ -9143,17 +9172,20 @@ var CTimePickerRollCol = forwardRef(function (_a, ref) {
     var init = useRef(true);
     var colRef = useRef(null);
     var forkedRef = useForkedRef(ref, colRef);
+    var isVisible = useIsVisible(colRef);
     useEffect(function () {
         var _a, _b;
         var nodeEl = (_a = colRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.selected');
-        if (nodeEl && nodeEl instanceof HTMLElement) {
+        if (isVisible && nodeEl && nodeEl instanceof HTMLElement) {
             (_b = colRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
                 top: nodeEl.offsetTop,
                 behavior: init.current ? 'auto' : 'smooth',
             });
         }
-        init.current = false;
-    }, [selected]);
+        if (isVisible) {
+            init.current = false;
+        }
+    }, [isVisible, selected]);
     var handleKeyDown = function (event, value) {
         if (event.code === 'Space' || event.key === 'Enter') {
             event.preventDefault();
@@ -9263,7 +9295,7 @@ var CTimePicker = forwardRef(function (_a, ref) {
         hour12: false,
     }), localizedTimePartials = _0[0], setLocalizedTimePartials = _0[1];
     useEffect(function () {
-        setDate(convertTimeToDate(time));
+        setDate(time ? convertTimeToDate(time) : null);
     }, [time]);
     useEffect(function () {
         setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
@@ -9367,14 +9399,6 @@ var CTimePicker = forwardRef(function (_a, ref) {
                 React$1.createElement("option", { value: "am" }, "AM"),
                 React$1.createElement("option", { value: "pm" }, "PM")))));
     };
-    var TimePickerRoll = function () { return (React$1.createElement(React$1.Fragment, null,
-        React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: getSelectedHour(date, locale, ampm) }),
-        React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfMinutes, onClick: function (index) { return handleTimeChange('minutes', index.toString()); }, selected: getSelectedMinutes(date) }),
-        seconds && (React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfSeconds, onClick: function (index) { return handleTimeChange('seconds', index.toString()); }, selected: getSelectedSeconds(date) })),
-        localizedTimePartials && localizedTimePartials.hour12 && (React$1.createElement(CTimePickerRollCol, { elements: [
-                { value: 'am', label: 'AM' },
-                { value: 'pm', label: 'PM' },
-            ], onClick: function (value) { return handleTimeChange('toggle', value); }, selected: _ampm })))); };
     return (React$1.createElement(CFormControlWrapper, { describedby: rest['aria-describedby'], feedback: feedback, feedbackInvalid: feedbackInvalid, feedbackValid: feedbackValid, id: id, invalid: isValid === false ? true : false, label: label, text: text, tooltipFeedback: tooltipFeedback, valid: isValid },
         React$1.createElement(CPicker, __assign$1({ className: classNames$1('time-picker', (_b = {},
                 _b["time-picker-".concat(size)] = size,
@@ -9398,7 +9422,14 @@ var CTimePicker = forwardRef(function (_a, ref) {
             }, toggler: InputGroup(), visible: _visible }, rest, { ref: ref }),
             React$1.createElement("div", { className: classNames$1('time-picker-body', (_c = {},
                     _c['time-picker-roll'] = variant === 'roll',
-                    _c)) }, variant === 'select' ? React$1.createElement(TimePickerSelect, null) : TimePickerRoll()))));
+                    _c)) }, variant === 'select' ? (React$1.createElement(TimePickerSelect, null)) : (React$1.createElement(React$1.Fragment, null,
+                React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfHours, onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: getSelectedHour(date, locale, ampm) }),
+                React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfMinutes, onClick: function (index) { return handleTimeChange('minutes', index.toString()); }, selected: getSelectedMinutes(date) }),
+                seconds && (React$1.createElement(CTimePickerRollCol, { elements: localizedTimePartials && localizedTimePartials.listOfSeconds, onClick: function (index) { return handleTimeChange('seconds', index.toString()); }, selected: getSelectedSeconds(date) })),
+                localizedTimePartials && localizedTimePartials.hour12 && (React$1.createElement(CTimePickerRollCol, { elements: [
+                        { value: 'am', label: 'AM' },
+                        { value: 'pm', label: 'PM' },
+                    ], onClick: function (value) { return handleTimeChange('toggle', value); }, selected: _ampm }))))))));
 });
 CTimePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CFormControlWrapper.propTypes), CPicker.propTypes), { ampm: PropTypes$1.oneOfType([PropTypes$1.oneOf(['auto']), PropTypes$1.bool]), cancelButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), cancelButtonColor: (_a$1 = CButton.propTypes) === null || _a$1 === void 0 ? void 0 : _a$1.color, cancelButtonSize: (_b$1 = CButton.propTypes) === null || _b$1 === void 0 ? void 0 : _b$1.size, cancelButtonVariant: (_c$1 = CButton.propTypes) === null || _c$1 === void 0 ? void 0 : _c$1.variant, className: PropTypes$1.string, confirmButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), confirmButtonColor: (_d$1 = CButton.propTypes) === null || _d$1 === void 0 ? void 0 : _d$1.color, confirmButtonSize: (_e$1 = CButton.propTypes) === null || _e$1 === void 0 ? void 0 : _e$1.size, confirmButtonVariant: (_f$1 = CButton.propTypes) === null || _f$1 === void 0 ? void 0 : _f$1.variant, locale: PropTypes$1.string, onTimeChange: PropTypes$1.func, required: PropTypes$1.bool, seconds: PropTypes$1.bool, time: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]), variant: PropTypes$1.oneOf(['roll', 'select']) });
 CTimePicker.displayName = 'CTimePicker';
@@ -9439,36 +9470,32 @@ var getLocalDateFromString = function (string, locale, time) {
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 var CDateRangePicker = forwardRef(function (_a, ref) {
     var _b;
-    var _c = _a.calendars, calendars = _c === void 0 ? 2 : _c, calendarDate = _a.calendarDate, _d = _a.cancelButton, cancelButton = _d === void 0 ? 'Cancel' : _d, _e = _a.cancelButtonColor, cancelButtonColor = _e === void 0 ? 'primary' : _e, _f = _a.cancelButtonSize, cancelButtonSize = _f === void 0 ? 'sm' : _f, _g = _a.cancelButtonVariant, cancelButtonVariant = _g === void 0 ? 'ghost' : _g, className = _a.className, _h = _a.cleaner, cleaner = _h === void 0 ? true : _h, _j = _a.closeOnSelect, closeOnSelect = _j === void 0 ? true : _j, _k = _a.confirmButton, confirmButton = _k === void 0 ? 'OK' : _k, _l = _a.confirmButtonColor, confirmButtonColor = _l === void 0 ? 'primary' : _l, _m = _a.confirmButtonSize, confirmButtonSize = _m === void 0 ? 'sm' : _m, confirmButtonVariant = _a.confirmButtonVariant, _o = _a.indicator, indicator = _o === void 0 ? true : _o, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format$1 = _a.format, footer = _a.footer, id = _a.id, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _p = _a.locale, locale = _p === void 0 ? 'default' : _p, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _q = _a.placeholder, placeholder = _q === void 0 ? ['Start date', 'End date'] : _q, _r = _a.range, range = _r === void 0 ? true : _r, ranges = _a.ranges, _s = _a.rangesButtonsColor, rangesButtonsColor = _s === void 0 ? 'secondary' : _s, rangesButtonsSize = _a.rangesButtonsSize, _t = _a.rangesButtonsVariant, rangesButtonsVariant = _t === void 0 ? 'ghost' : _t, required = _a.required, _u = _a.separator, separator = _u === void 0 ? true : _u, selectAdjacementDays = _a.selectAdjacementDays, showAdjacementDays = _a.showAdjacementDays, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _v = _a.todayButton, todayButton = _v === void 0 ? 'Today' : _v, _w = _a.todayButtonColor, todayButtonColor = _w === void 0 ? 'primary' : _w, _x = _a.todayButtonSize, todayButtonSize = _x === void 0 ? 'sm' : _x, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "calendarDate", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "closeOnSelect", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "indicator", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "selectAdjacementDays", "showAdjacementDays", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
+    var _c = _a.calendars, calendars = _c === void 0 ? 2 : _c, calendarDate = _a.calendarDate, _d = _a.cancelButton, cancelButton = _d === void 0 ? 'Cancel' : _d, _e = _a.cancelButtonColor, cancelButtonColor = _e === void 0 ? 'primary' : _e, _f = _a.cancelButtonSize, cancelButtonSize = _f === void 0 ? 'sm' : _f, _g = _a.cancelButtonVariant, cancelButtonVariant = _g === void 0 ? 'ghost' : _g, className = _a.className, _h = _a.cleaner, cleaner = _h === void 0 ? true : _h, _j = _a.closeOnSelect, closeOnSelect = _j === void 0 ? true : _j, _k = _a.confirmButton, confirmButton = _k === void 0 ? 'OK' : _k, _l = _a.confirmButtonColor, confirmButtonColor = _l === void 0 ? 'primary' : _l, _m = _a.confirmButtonSize, confirmButtonSize = _m === void 0 ? 'sm' : _m, confirmButtonVariant = _a.confirmButtonVariant, dayFormat = _a.dayFormat, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, feedback = _a.feedback, feedbackInvalid = _a.feedbackInvalid, feedbackValid = _a.feedbackValid, firstDayOfWeek = _a.firstDayOfWeek, format$1 = _a.format, footer = _a.footer, id = _a.id, _o = _a.indicator, indicator = _o === void 0 ? true : _o, inputDateFormat = _a.inputDateFormat, inputDateParse = _a.inputDateParse, _p = _a.inputOnChangeDelay, inputOnChangeDelay = _p === void 0 ? 750 : _p, inputReadOnly = _a.inputReadOnly, invalid = _a.invalid, label = _a.label, _q = _a.locale, locale = _q === void 0 ? 'default' : _q, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, navYearFirst = _a.navYearFirst, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _r = _a.placeholder, placeholder = _r === void 0 ? ['Start date', 'End date'] : _r, _s = _a.range, range = _s === void 0 ? true : _s, ranges = _a.ranges, _t = _a.rangesButtonsColor, rangesButtonsColor = _t === void 0 ? 'secondary' : _t, rangesButtonsSize = _a.rangesButtonsSize, _u = _a.rangesButtonsVariant, rangesButtonsVariant = _u === void 0 ? 'ghost' : _u, required = _a.required, _v = _a.separator, separator = _v === void 0 ? true : _v, selectAdjacementDays = _a.selectAdjacementDays, showAdjacementDays = _a.showAdjacementDays, size = _a.size, startDate = _a.startDate, text = _a.text, timepicker = _a.timepicker, toggler = _a.toggler, _w = _a.todayButton, todayButton = _w === void 0 ? 'Today' : _w, _x = _a.todayButtonColor, todayButtonColor = _x === void 0 ? 'primary' : _x, _y = _a.todayButtonSize, todayButtonSize = _y === void 0 ? 'sm' : _y, todayButtonVariant = _a.todayButtonVariant, tooltipFeedback = _a.tooltipFeedback, valid = _a.valid, visible = _a.visible, weekdayFormat = _a.weekdayFormat, rest = __rest$1(_a, ["calendars", "calendarDate", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "className", "cleaner", "closeOnSelect", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "dayFormat", "disabled", "disabledDates", "endDate", "feedback", "feedbackInvalid", "feedbackValid", "firstDayOfWeek", "format", "footer", "id", "indicator", "inputDateFormat", "inputDateParse", "inputOnChangeDelay", "inputReadOnly", "invalid", "label", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "required", "separator", "selectAdjacementDays", "showAdjacementDays", "size", "startDate", "text", "timepicker", "toggler", "todayButton", "todayButtonColor", "todayButtonSize", "todayButtonVariant", "tooltipFeedback", "valid", "visible", "weekdayFormat"]);
     var inputEndRef = useRef(null);
     var inputStartRef = useRef(null);
     var formRef = useRef();
-    var _y = useState(calendarDate ? new Date(calendarDate) : new Date()), _calendarDate = _y[0], setCalendarDate = _y[1];
-    var _z = useState(endDate ? new Date(endDate) : null), _endDate = _z[0], setEndDate = _z[1];
-    var _0 = useState(maxDate ? new Date(maxDate) : null), _maxDate = _0[0], setMaxDate = _0[1];
-    var _1 = useState(minDate ? new Date(minDate) : null), _minDate = _1[0], setMinDate = _1[1];
-    var _2 = useState(startDate ? new Date(startDate) : null), _startDate = _2[0], setStartDate = _2[1];
-    var _3 = useState(visible), _visible = _3[0], setVisible = _3[1];
-    var _4 = useState(startDate ? new Date(startDate) : null), initialStartDate = _4[0], setInitialStartDate = _4[1];
-    var _5 = useState(endDate ? new Date(endDate) : null), initialEndDate = _5[0], setInitialEndDate = _5[1];
-    var _6 = useState(null), inputStartHoverValue = _6[0], setInputStartHoverValue = _6[1];
-    var _7 = useState(null), inputEndHoverValue = _7[0], setInputEndHoverValue = _7[1];
-    var _8 = useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _8[0], setIsValid = _8[1];
-    var _9 = useState(false), selectEndDate = _9[0], setSelectEndDate = _9[1];
+    var _z = useState(calendarDate ? new Date(calendarDate) : new Date()), _calendarDate = _z[0], setCalendarDate = _z[1];
+    var _0 = useState(endDate ? new Date(endDate) : null), _endDate = _0[0], setEndDate = _0[1];
+    var _1 = useState(maxDate ? new Date(maxDate) : null), _maxDate = _1[0], setMaxDate = _1[1];
+    var _2 = useState(minDate ? new Date(minDate) : null), _minDate = _2[0], setMinDate = _2[1];
+    var _3 = useState(startDate ? new Date(startDate) : null), _startDate = _3[0], setStartDate = _3[1];
+    var _4 = useState(visible), _visible = _4[0], setVisible = _4[1];
+    var _5 = useState(startDate ? new Date(startDate) : null), initialStartDate = _5[0], setInitialStartDate = _5[1];
+    var _6 = useState(endDate ? new Date(endDate) : null), initialEndDate = _6[0], setInitialEndDate = _6[1];
+    var _7 = useState(null), inputStartHoverValue = _7[0], setInputStartHoverValue = _7[1];
+    var _8 = useState(null), inputEndHoverValue = _8[0], setInputEndHoverValue = _8[1];
+    var _9 = useState(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined)), isValid = _9[0], setIsValid = _9[1];
+    var _10 = useState(false), selectEndDate = _10[0], setSelectEndDate = _10[1];
     useEffect(function () {
         setIsValid(valid !== null && valid !== void 0 ? valid : (invalid === true ? false : undefined));
     }, [valid, invalid]);
     useEffect(function () {
-        if (startDate) {
-            setStartDate(new Date(startDate));
-            setCalendarDate(new Date(startDate));
-        }
+        setStartDate(startDate ? new Date(startDate) : null);
+        setCalendarDate(startDate ? new Date(startDate) : new Date());
     }, [startDate]);
     useEffect(function () {
-        if (endDate) {
-            setEndDate(new Date(endDate));
-            setCalendarDate(new Date(endDate));
-        }
+        setEndDate(endDate ? new Date(endDate) : null);
+        setCalendarDate(endDate ? new Date(endDate) : new Date());
     }, [endDate]);
     useEffect(function () {
         maxDate && setMaxDate(new Date(maxDate));
@@ -9504,11 +9531,13 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
         }
     }, [formRef, _startDate, _endDate]);
     var formatDate = function (date) {
-        return format$1
-            ? format(date, format$1)
-            : timepicker
-                ? date.toLocaleString(locale)
-                : date.toLocaleDateString(locale);
+        return inputDateFormat
+            ? inputDateFormat(date)
+            : format$1
+                ? format(date, format$1)
+                : timepicker
+                    ? date.toLocaleString(locale)
+                    : date.toLocaleDateString(locale);
     };
     var setInputValue = function (el, date) {
         if (!el) {
@@ -9564,6 +9593,15 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
             setVisible(false);
         }
     };
+    var handleOnChange = useDebouncedCallback(function (value, input) {
+        var date = inputDateParse
+            ? inputDateParse(value)
+            : getLocalDateFromString(value, locale, timepicker);
+        if (date instanceof Date && date.getTime()) {
+            setCalendarDate(date);
+            input === 'start' ? setStartDate(date) : setEndDate(date);
+        }
+    }, inputOnChangeDelay);
     var InputGroup = function () {
         var _a;
         return (React$1.createElement("div", { className: classNames$1('input-group', 'picker-input-group', (_a = {},
@@ -9572,22 +9610,14 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
             React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
                     hover: inputStartHoverValue,
                 }), disabled: disabled }, (id && { name: range ? "".concat(id, "-start-date") : "".concat(id, "-date") }), { placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
-                    var date = getLocalDateFromString(event.target.value, locale, timepicker);
-                    if (date instanceof Date && date.getTime()) {
-                        setCalendarDate(date);
-                        setStartDate(date);
-                    }
+                    handleOnChange(event.target.value, 'start');
                 }, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef })),
             range && separator !== false && (React$1.createElement("span", { className: "input-group-text" },
                 React$1.createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" }))),
             range && (React$1.createElement("input", __assign$1({ autoComplete: "off", className: classNames$1('form-control date-picker-input', {
                     hover: inputEndHoverValue,
                 }), disabled: disabled }, (id && { name: "".concat(id, "-end-date") }), { placeholder: placeholder[1], readOnly: inputReadOnly || typeof format$1 === 'string', required: required, onChange: function (event) {
-                    var date = getLocalDateFromString(event.target.value, locale, timepicker);
-                    if (date instanceof Date && date.getTime()) {
-                        setCalendarDate(date);
-                        setEndDate(date);
-                    }
+                    handleOnChange(event.target.value, 'end');
                 }, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef }))),
             (indicator || cleaner) && (React$1.createElement("span", { className: "input-group-text" },
                 indicator && (React$1.createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React$1.createElement("span", { className: "picker-input-group-icon date-picker-input-icon" })) : (indicator))),
@@ -9643,7 +9673,7 @@ var CDateRangePicker = forwardRef(function (_a, ref) {
                     }, time: index === 0 ? _startDate : _endDate, variant: "select" })); }))))))));
 });
 CDateRangePicker.displayName = 'CDateRangePicker';
-CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { cancelButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), cancelButtonColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, cancelButtonSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, cancelButtonVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, calendars: PropTypes$1.number, className: PropTypes$1.string, cleaner: PropTypes$1.bool, closeOnSelect: PropTypes$1.bool, confirmButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), confirmButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, confirmButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, confirmButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant, id: PropTypes$1.string, indicator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), inputReadOnly: PropTypes$1.bool, placeholder: PropTypes$1.oneOfType([
+CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CFormControlWrapper.propTypes), CPicker.propTypes), { cancelButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), cancelButtonColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, cancelButtonSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, cancelButtonVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, calendars: PropTypes$1.number, className: PropTypes$1.string, cleaner: PropTypes$1.bool, closeOnSelect: PropTypes$1.bool, confirmButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), confirmButtonColor: (_d = CButton.propTypes) === null || _d === void 0 ? void 0 : _d.color, confirmButtonSize: (_e = CButton.propTypes) === null || _e === void 0 ? void 0 : _e.size, confirmButtonVariant: (_f = CButton.propTypes) === null || _f === void 0 ? void 0 : _f.variant, id: PropTypes$1.string, indicator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), inputDateFormat: PropTypes$1.func, inputDateParse: PropTypes$1.func, inputOnChangeDelay: PropTypes$1.number, inputReadOnly: PropTypes$1.bool, placeholder: PropTypes$1.oneOfType([
         PropTypes$1.string,
         PropTypes$1.arrayOf(PropTypes$1.string.isRequired),
     ]), range: PropTypes$1.bool, ranges: PropTypes$1.object, rangesButtonsColor: (_g = CButton.propTypes) === null || _g === void 0 ? void 0 : _g.color, rangesButtonsSize: (_h = CButton.propTypes) === null || _h === void 0 ? void 0 : _h.size, rangesButtonsVariant: (_j = CButton.propTypes) === null || _j === void 0 ? void 0 : _j.variant, required: PropTypes$1.bool, separator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), size: PropTypes$1.oneOf(['sm', 'lg']), timepicker: PropTypes$1.bool, todayButton: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), todayButtonColor: (_k = CButton.propTypes) === null || _k === void 0 ? void 0 : _k.color, todayButtonSize: (_l = CButton.propTypes) === null || _l === void 0 ? void 0 : _l.size, todayButtonVariant: (_m = CButton.propTypes) === null || _m === void 0 ? void 0 : _m.variant });
@@ -11637,10 +11667,11 @@ CProgress.propTypes = {
 };
 CProgress.displayName = 'CProgress';
 
-var CPopover = function (_a) {
+var CPopover = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 8] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, title = _a.title, _g = _a.trigger, trigger = _g === void 0 ? 'click' : _g, visible = _a.visible, rest = __rest$1(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "title", "trigger", "visible"]);
     var popoverRef = useRef(null);
     var togglerRef = useRef(null);
+    var forkedRef = useForkedRef(ref, popoverRef);
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -11698,15 +11729,17 @@ var CPopover = function (_a) {
         typeof window !== 'undefined' &&
             createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: popoverRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: popoverRef.current ? getTransitionDurationFromElement(popoverRef.current) + 50 : 200,
+                    exit: popoverRef.current
+                        ? getTransitionDurationFromElement(popoverRef.current) + 50
+                        : 200,
                 }, unmountOnExit: true }, function (state) { return (React$1.createElement("div", __assign$1({ className: classNames$1('popover', 'bs-popover-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: popoverRef, role: "tooltip" }, rest),
+                }, className), ref: forkedRef, role: "tooltip" }, rest),
                 React$1.createElement("div", { className: "popover-arrow" }),
                 React$1.createElement("div", { className: "popover-header" }, title),
                 React$1.createElement("div", { className: "popover-body" }, content))); }), document.body)));
-};
+});
 CPopover.propTypes = {
     animation: PropTypes$1.bool,
     children: PropTypes$1.node,
@@ -14341,10 +14374,11 @@ CToaster.propTypes = {
 };
 CToaster.displayName = 'CToaster';
 
-var CTooltip = function (_a) {
+var CTooltip = forwardRef(function (_a, ref) {
     var children = _a.children, _b = _a.animation, animation = _b === void 0 ? true : _b, className = _a.className, content = _a.content, _c = _a.delay, delay = _c === void 0 ? 0 : _c, _d = _a.fallbackPlacements, fallbackPlacements = _d === void 0 ? ['top', 'right', 'bottom', 'left'] : _d, _e = _a.offset, offset = _e === void 0 ? [0, 6] : _e, onHide = _a.onHide, onShow = _a.onShow, _f = _a.placement, placement = _f === void 0 ? 'top' : _f, _g = _a.trigger, trigger = _g === void 0 ? ['hover', 'focus'] : _g, visible = _a.visible, rest = __rest$1(_a, ["children", "animation", "className", "content", "delay", "fallbackPlacements", "offset", "onHide", "onShow", "placement", "trigger", "visible"]);
     var tooltipRef = useRef(null);
     var togglerRef = useRef(null);
+    var forkedRef = useForkedRef(ref, tooltipRef);
     var _h = usePopper(), initPopper = _h.initPopper, destroyPopper = _h.destroyPopper;
     var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
     var _delay = typeof delay === 'number' ? { show: delay, hide: delay } : delay;
@@ -14400,16 +14434,18 @@ var CTooltip = function (_a) {
             onMouseLeave: function () { return toggleVisible(false); },
         }))),
         typeof window !== 'undefined' &&
-            createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, onEnter: onShow, onExit: onHide, timeout: {
+            createPortal(React$1.createElement(Transition$1, { in: _visible, mountOnEnter: true, nodeRef: tooltipRef, onEnter: onShow, onExit: onHide, timeout: {
                     enter: 0,
-                    exit: tooltipRef.current ? getTransitionDurationFromElement(tooltipRef.current) + 50 : 200,
+                    exit: tooltipRef.current
+                        ? getTransitionDurationFromElement(tooltipRef.current) + 50
+                        : 200,
                 }, unmountOnExit: true }, function (state) { return (React$1.createElement("div", __assign$1({ className: classNames$1('tooltip', 'bs-tooltip-auto', {
                     fade: animation,
                     show: state === 'entered',
-                }, className), ref: tooltipRef, role: "tooltip" }, rest),
+                }, className), ref: forkedRef, role: "tooltip" }, rest),
                 React$1.createElement("div", { className: "tooltip-arrow" }),
                 React$1.createElement("div", { className: "tooltip-inner" }, content))); }), document.body)));
-};
+});
 CTooltip.propTypes = {
     animation: PropTypes$1.bool,
     children: PropTypes$1.node,
@@ -14557,5 +14593,5 @@ CWidgetStatsF.propTypes = {
 };
 CWidgetStatsF.displayName = 'CWidgetStatsF';
 
-export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CProgressStacked, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useForkedRef, usePopper, useStateWithCallback };
+export { CAccordion, CAccordionBody, CAccordionButton, CAccordionHeader, CAccordionItem, CAlert, CAlertHeading, CAlertLink, CAvatar, CBackdrop, CBadge, CBreadcrumb, CBreadcrumbItem, CButton, CButtonGroup, CButtonToolbar, CCallout, CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, CCarousel, CCarouselCaption, CCarouselItem, CCloseButton, CCol, CCollapse, CConditionalPortal, CContainer, CDatePicker, CDateRangePicker, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, CElementCover, CFooter, CForm, CFormCheck, CFormControlValidation, CFormControlWrapper, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler, CImage, CInputGroup, CInputGroupText, CLink, CListGroup, CListGroupItem, CLoadingButton, CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle, CMultiSelect, CNav, CNavGroup, CNavGroupItems, CNavItem, CNavLink, CNavTitle, CNavbar, CNavbarBrand, CNavbarNav, CNavbarText, CNavbarToggler, COffcanvas, COffcanvasBody, COffcanvasHeader, COffcanvasTitle, CPagination, CPaginationItem, CPlaceholder, CPopover, CProgress, CProgressBar, CProgressStacked, CRow, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CSidebarToggler, CSmartPagination, CSmartTable, CSpinner, CTabContent, CTabPane, CTable, CTableBody, CTableCaption, CTableDataCell, CTableFoot, CTableHead, CTableHeaderCell, CTableRow, CTimePicker, CToast, CToastBody, CToastClose, CToastHeader, CToaster, CTooltip, CVirtualScroller, CWidgetStatsA, CWidgetStatsB, CWidgetStatsC, CWidgetStatsD, CWidgetStatsE, CWidgetStatsF, useDebouncedCallback, useForkedRef, useIsVisible, usePopper, useStateWithCallback };
 //# sourceMappingURL=index.es.js.map