@coreui/react-pro 4.2.0-beta.0 → 4.2.0-beta.1

package/dist/index.js

@@ -2860,10 +2860,6 @@ CButtonToolbar.propTypes = {
 };
 CButtonToolbar.displayName = 'CButtonToolbar';
 
-var convertToLocalDate = function (d, locale, options) {
-    if (options === void 0) { options = {}; }
-    return d.toLocaleDateString(locale, options);
-};
 var createGroupsInArray = function (arr, numberOfGroups) {
     var perGroup = Math.ceil(arr.length / numberOfGroups);
     return new Array(numberOfGroups)
@@ -2943,7 +2939,7 @@ var getMonthDetails = function (year, month, firstDayOfWeek) {
     });
     return weeks;
 };
-var isDisabled = function (date, min, max, dates) {
+var isDateDisabled = function (date, min, max, dates) {
     var disabled;
     if (dates) {
         dates.forEach(function (_date) {
@@ -2996,14 +2992,20 @@ var isToday = function (date) {
         date.getMonth() == today.getMonth() &&
         date.getFullYear() == today.getFullYear());
 };
+var isValidDate = function (date) {
+    var d = new Date(date);
+    return d instanceof Date && d.getTime();
+};
 
 var CCalendar = React$1.forwardRef(function (_a, ref) {
-    var calendarDate = _a.calendarDate, disabledDates = _a.disabledDates, endDate = _a.endDate, _b = _a.firstDayOfWeek, firstDayOfWeek = _b === void 0 ? 1 : _b, _c = _a.locale, locale = _c === void 0 ? navigator.language : _c, maxDate = _a.maxDate, minDate = _a.minDate, _d = _a.navigation, navigation = _d === void 0 ? true : _d, nextIcon = _a.nextIcon, nextDoubleIcon = _a.nextDoubleIcon, prevIcon = _a.prevIcon, prevDoubleIcon = _a.prevDoubleIcon, range = _a.range, selectEndDate = _a.selectEndDate, startDate = _a.startDate, _e = _a.weekdayLength, weekdayLength = _e === void 0 ? 2 : _e, onCalendarDateChange = _a.onCalendarDateChange, onStartDateChange = _a.onStartDateChange, onEndDateChange = _a.onEndDateChange, onCalendarCellHover = _a.onCalendarCellHover;
+    var calendarDate = _a.calendarDate, disabledDates = _a.disabledDates, endDate = _a.endDate, _b = _a.firstDayOfWeek, firstDayOfWeek = _b === void 0 ? 1 : _b, _c = _a.locale, locale = _c === void 0 ? 'default' : _c, maxDate = _a.maxDate, minDate = _a.minDate, _d = _a.navigation, navigation = _d === void 0 ? true : _d, navNextIcon = _a.navNextIcon, navNextDoubleIcon = _a.navNextDoubleIcon, navPrevIcon = _a.navPrevIcon, navPrevDoubleIcon = _a.navPrevDoubleIcon, range = _a.range, selectEndDate = _a.selectEndDate, startDate = _a.startDate, _e = _a.weekdayFormat, weekdayFormat = _e === void 0 ? 2 : _e, onCalendarDateChange = _a.onCalendarDateChange, onStartDateChange = _a.onStartDateChange, onEndDateChange = _a.onEndDateChange, onCalendarCellHover = _a.onCalendarCellHover, onViewChanged = _a.onViewChanged;
     var _f = React$1.useState(calendarDate ? new Date(calendarDate) : new Date()), _calendarDate = _f[0], setCalendarDate = _f[1];
     var _g = React$1.useState(startDate ? new Date(startDate) : null), _startDate = _g[0], setStartDate = _g[1];
     var _h = React$1.useState(endDate ? new Date(endDate) : null), _endDate = _h[0], setEndDate = _h[1];
     var _j = React$1.useState(selectEndDate), _selectEndDate = _j[0], setSelectEndDate = _j[1];
     var _k = React$1.useState('days'), view = _k[0], setView = _k[1];
+    var _maxDate = maxDate ? new Date(maxDate) : null;
+    var _minDate = minDate ? new Date(minDate) : null;
     React$1.useEffect(function () {
         if (calendarDate) {
             var d = new Date(calendarDate);
@@ -3051,6 +3053,9 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
     React$1.useEffect(function () {
         setSelectEndDate(selectEndDate);
     }, [selectEndDate]);
+    React$1.useEffect(function () {
+        onViewChanged && onViewChanged(view);
+    }, [view]);
     var setCalendarPage = function (years, months, setMonth) {
         if (months === void 0) { months = 0; }
         var year = _calendarDate.getFullYear();
@@ -3063,7 +3068,7 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
         onCalendarDateChange && onCalendarDateChange(d);
     };
     var handleCellOnClick = function (date) {
-        if (isDisabled(date, minDate, maxDate, disabledDates)) {
+        if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
         if (range) {
@@ -3087,7 +3092,7 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
         }
     };
     var handleCellMouseEnter = function (date) {
-        if (isDisabled(date, minDate, maxDate, disabledDates)) {
+        if (isDateDisabled(date, _minDate, _maxDate, disabledDates)) {
             return;
         }
         onCalendarCellHover && onCalendarCellHover(date);
@@ -3099,7 +3104,7 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
         if (double === void 0) { double = false; }
         if (direction === 'prev') {
             if (double) {
-                setCalendarPage(view !== 'days' ? -10 : -1);
+                setCalendarPage(view === 'years' ? -10 : -1);
                 return;
             }
             if (view !== 'days') {
@@ -3111,7 +3116,7 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
         }
         if (direction === 'next') {
             if (double) {
-                setCalendarPage(view !== 'days' ? 10 : 1);
+                setCalendarPage(view === 'years' ? 10 : 1);
                 return;
             }
             if (view !== 'days') {
@@ -3132,7 +3137,11 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
                 React__default$1["default"].createElement("tr", null, weekDays.map(function (_a, idx) {
                     var date = _a.date;
                     return (React__default$1["default"].createElement("th", { key: idx, className: "calendar-cell" },
-                        React__default$1["default"].createElement("div", { className: "calendar-header-cell-inner" }, date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayLength))));
+                        React__default$1["default"].createElement("div", { className: "calendar-header-cell-inner" }, typeof weekdayFormat === 'string'
+                            ? date.toLocaleDateString(locale, { weekday: weekdayFormat })
+                            : date
+                                .toLocaleDateString(locale, { weekday: 'long' })
+                                .slice(0, weekdayFormat))));
                 })))),
             React__default$1["default"].createElement("tbody", { onMouseLeave: function () { return handleCellMouseLeave(); } },
                 view === 'days' &&
@@ -3141,7 +3150,7 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
                             var date = _a.date, month = _a.month;
                             return (React__default$1["default"].createElement("td", { className: classNames$1('calendar-cell', {
                                     today: isToday(date),
-                                    disabled: isDisabled(date, minDate, maxDate, disabledDates),
+                                    disabled: isDateDisabled(date, _minDate, _maxDate, disabledDates),
                                     next: month === 'next',
                                     previous: month === 'previous',
                                     last: isLastDayOfMonth(date),
@@ -3177,16 +3186,16 @@ var CCalendar = React$1.forwardRef(function (_a, ref) {
     var Navigation = function () {
         return (React__default$1["default"].createElement("div", { className: "calendar-nav" },
             navigation && (React__default$1["default"].createElement("div", { className: "calendar-nav-prev" },
-                React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('prev', true); } }, prevDoubleIcon ? (prevDoubleIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-prev" }))),
-                React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('prev'); } }, prevIcon ? (prevIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-prev" }))))),
+                React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('prev', true); } }, navPrevDoubleIcon ? (navPrevDoubleIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-prev" }))),
+                view === 'days' && (React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('prev'); } }, navPrevIcon ? (navPrevIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-prev" })))))),
             React__default$1["default"].createElement("div", { className: "calendar-nav-date" },
                 view === 'days' && (React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return navigation && setView('months'); } }, _calendarDate.toLocaleDateString(locale, { month: 'long' }))),
                 React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return navigation && setView('years'); } }, _calendarDate.toLocaleDateString(locale, { year: 'numeric' }))),
             navigation && (React__default$1["default"].createElement("div", { className: "calendar-nav-next" },
-                React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('next'); } }, nextIcon ? (nextIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-next" }))),
-                React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('next', true); } }, nextDoubleIcon ? (nextDoubleIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
+                view === 'days' && (React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('next'); } }, navNextIcon ? (navNextIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-next" })))),
+                React__default$1["default"].createElement(CButton, { color: "transparent", size: "sm", onClick: function () { return handleNavigationOnClick('next', true); } }, navNextDoubleIcon ? (navNextDoubleIcon) : (React__default$1["default"].createElement("span", { className: "calendar-nav-icon calendar-nav-icon-double-next" })))))));
     };
-    return (React__default$1["default"].createElement("div", { className: "calendar", ref: ref },
+    return (React__default$1["default"].createElement("div", { className: classNames$1('calendar', view), ref: ref },
         React__default$1["default"].createElement(Navigation, null),
         React__default$1["default"].createElement(Calendar, null)));
 });
@@ -3197,21 +3206,25 @@ CCalendar.propTypes = {
     endDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
     firstDayOfWeek: PropTypes$1.number,
     locale: PropTypes$1.string,
-    maxDate: PropTypes$1.instanceOf(Date),
-    minDate: PropTypes$1.instanceOf(Date),
+    maxDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
+    minDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
     navigation: PropTypes$1.bool,
-    nextIcon: PropTypes$1.node,
-    nextDoubleIcon: PropTypes$1.node,
-    prevIcon: PropTypes$1.node,
-    prevDoubleIcon: PropTypes$1.node,
+    navNextIcon: PropTypes$1.node,
+    navNextDoubleIcon: PropTypes$1.node,
+    navPrevIcon: PropTypes$1.node,
+    navPrevDoubleIcon: PropTypes$1.node,
     range: PropTypes$1.bool,
     selectEndDate: PropTypes$1.bool,
     startDate: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]),
-    weekdayLength: PropTypes$1.number,
+    weekdayFormat: PropTypes$1.oneOfType([
+        PropTypes$1.number,
+        PropTypes$1.oneOf(['long', 'narrow', 'short']),
+    ]),
     onCalendarCellHover: PropTypes$1.func,
     onCalendarDateChange: PropTypes$1.func,
     onStartDateChange: PropTypes$1.func,
     onEndDateChange: PropTypes$1.func,
+    onViewChanged: PropTypes$1.func,
 };
 CCalendar.displayName = 'CCalendar';
 
@@ -4682,6 +4695,55 @@ lib.useDeviceSelectors = useDeviceSelectors;
 lib.useMobileOrientation = useMobileOrientation;
 lib.withOrientationChange = withOrientationChange;
 
+var CFormInput = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, invalid = _a.invalid, plainText = _a.plainText, size = _a.size, _c = _a.type, type = _c === void 0 ? 'text' : _c, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "invalid", "plainText", "size", "type", "valid"]);
+    var _className = classNames$1(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
+        _b["form-control-".concat(size)] = size,
+        _b['form-control-color'] = type === 'color',
+        _b['is-invalid'] = invalid,
+        _b['is-valid'] = valid,
+        _b), className);
+    return (React__default$1["default"].createElement("input", __assign$1({ type: type, className: _className }, rest, { ref: ref }), children));
+});
+CFormInput.propTypes = {
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    invalid: PropTypes$1.bool,
+    plainText: PropTypes$1.bool,
+    size: PropTypes$1.oneOf(['sm', 'lg']),
+    type: PropTypes$1.oneOfType([PropTypes$1.oneOf(['color', 'file', 'text']), PropTypes$1.string]),
+    valid: PropTypes$1.bool,
+};
+CFormInput.displayName = 'CFormInput';
+
+var CInputGroup = React$1.forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, size = _a.size, rest = __rest$1(_a, ["children", "className", "size"]);
+    var _className = classNames$1('input-group', (_b = {},
+        _b["input-group-".concat(size)] = size,
+        _b), className);
+    return (React__default$1["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
+});
+CInputGroup.propTypes = {
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    size: PropTypes$1.oneOf(['sm', 'lg']),
+};
+CInputGroup.displayName = 'CInputGroup';
+
+var CInputGroupText = React$1.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
+    var _className = classNames$1('input-group-text', className);
+    return (React__default$1["default"].createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
+});
+CInputGroupText.propTypes = {
+    children: PropTypes$1.node,
+    className: PropTypes$1.string,
+    component: PropTypes$1.elementType,
+};
+CInputGroupText.displayName = 'CInputGroupText';
+
 var ManagerReferenceNodeContext = React__namespace.createContext();
 var ManagerReferenceNodeSetterContext = React__namespace.createContext();
 function Manager(_ref) {
@@ -5061,6 +5123,10 @@ function getContainingBlock(element) {
 
   var currentNode = getParentNode(element);
 
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
   while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
     var css = getComputedStyle$1(currentNode); // This is non-exhaustive but covers the most common CSS properties that
     // create a containing block.
@@ -5293,7 +5359,7 @@ function mapToStyles(_ref2) {
 
     if (placement === top || (placement === left || placement === right) && variation === end) {
       sideY = bottom;
-      var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
+      var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
       offsetParent[heightProp];
       y -= offsetY - popperRect.height;
       y *= gpuAcceleration ? 1 : -1;
@@ -5301,7 +5367,7 @@ function mapToStyles(_ref2) {
 
     if (placement === left || (placement === top || placement === bottom) && variation === end) {
       sideX = right;
-      var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
+      var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
       offsetParent[widthProp];
       x -= offsetX - popperRect.width;
       x *= gpuAcceleration ? 1 : -1;
@@ -7189,11 +7255,10 @@ var CDropdownMenu = function (_a) {
         };
     }, [visible]);
     var handleKeyup = function (event) {
-        var _a;
         if (autoClose === false) {
             return;
         }
-        if (!((_a = dropdownMenuRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+        if (event.key === 'Escape') {
             setVisible(false);
         }
     };
@@ -7306,18 +7371,19 @@ CDropdownToggle.propTypes = {
 };
 CDropdownToggle.displayName = 'CDropdownToggle';
 
+var _a$1, _b$1, _c$1, _d, _e, _f;
 var CPicker = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, _b = _a.cancelButtonText, cancelButtonText = _b === void 0 ? 'Cancel' : _b, className = _a.className, _c = _a.container, container = _c === void 0 ? 'dropdown' : _c, disabled = _a.disabled, footer = _a.footer, _d = _a.okButtonText, okButtonText = _d === void 0 ? 'OK' : _d, onCancelClick = _a.onCancelClick, onOkClick = _a.onOkClick, onHide = _a.onHide, onShow = _a.onShow, Toggler = _a.toggler, visible = _a.visible, rest = __rest$1(_a, ["children", "cancelButtonText", "className", "container", "disabled", "footer", "okButtonText", "onCancelClick", "onOkClick", "onHide", "onShow", "toggler", "visible"]);
-    var _e = React$1.useState(visible), _visible = _e[0], setVisible = _e[1];
+    var children = _a.children, _b = _a.cancelButton, cancelButton = _b === void 0 ? 'Cancel' : _b, _c = _a.cancelButtonColor, cancelButtonColor = _c === void 0 ? 'primary' : _c, _d = _a.cancelButtonSize, cancelButtonSize = _d === void 0 ? 'sm' : _d, _e = _a.cancelButtonVariant, cancelButtonVariant = _e === void 0 ? 'ghost' : _e, _f = _a.confirmButton, confirmButton = _f === void 0 ? 'OK' : _f, _g = _a.confirmButtonColor, confirmButtonColor = _g === void 0 ? 'primary' : _g, _h = _a.confirmButtonSize, confirmButtonSize = _h === void 0 ? 'sm' : _h, confirmButtonVariant = _a.confirmButtonVariant, className = _a.className, _j = _a.container, container = _j === void 0 ? 'dropdown' : _j, disabled = _a.disabled, footer = _a.footer, onCancel = _a.onCancel, onConfirm = _a.onConfirm, onHide = _a.onHide, onShow = _a.onShow, Toggler = _a.toggler, visible = _a.visible, rest = __rest$1(_a, ["children", "cancelButton", "cancelButtonColor", "cancelButtonSize", "cancelButtonVariant", "confirmButton", "confirmButtonColor", "confirmButtonSize", "confirmButtonVariant", "className", "container", "disabled", "footer", "onCancel", "onConfirm", "onHide", "onShow", "toggler", "visible"]);
+    var _k = React$1.useState(visible), _visible = _k[0], setVisible = _k[1];
     React$1.useEffect(function () {
         setVisible(visible);
     }, [visible]);
     var Footer = function () { return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-        React__default$1["default"].createElement(CButton, { color: "primary", size: "sm", variant: "ghost", onClick: function () { return onCancelClick && onCancelClick(); } }, cancelButtonText),
-        React__default$1["default"].createElement(CButton, { color: "primary", size: "sm", onClick: function () {
-                onOkClick && onOkClick();
+        cancelButton && (React__default$1["default"].createElement(CButton, { color: cancelButtonColor, size: cancelButtonSize, variant: cancelButtonVariant, onClick: function () { return onCancel && onCancel(); } }, cancelButton)),
+        confirmButton && (React__default$1["default"].createElement(CButton, { color: confirmButtonColor, size: confirmButtonSize, variant: confirmButtonVariant, onClick: function () {
+                onConfirm && onConfirm();
                 setVisible(false);
-            } }, okButtonText))); };
+            } }, confirmButton)))); };
     var _className = classNames$1('picker', className);
     switch (container) {
         case 'inline':
@@ -7337,29 +7403,7 @@ var CPicker = React$1.forwardRef(function (_a, ref) {
     }
 });
 CPicker.displayName = 'CPicker';
-CPicker.propTypes = __assign$1(__assign$1({}, CDropdown.propTypes), { container: PropTypes$1.oneOf(['dropdown', 'inline']), disabled: PropTypes$1.bool, onCancelClick: PropTypes$1.func, onOkClick: PropTypes$1.func });
-
-var CFormInput = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, invalid = _a.invalid, plainText = _a.plainText, size = _a.size, _c = _a.type, type = _c === void 0 ? 'text' : _c, valid = _a.valid, rest = __rest$1(_a, ["children", "className", "invalid", "plainText", "size", "type", "valid"]);
-    var _className = classNames$1(plainText ? 'form-control-plaintext' : 'form-control', (_b = {},
-        _b["form-control-".concat(size)] = size,
-        _b['form-control-color'] = type === 'color',
-        _b['is-invalid'] = invalid,
-        _b['is-valid'] = valid,
-        _b), className);
-    return (React__default$1["default"].createElement("input", __assign$1({ type: type, className: _className }, rest, { ref: ref }), children));
-});
-CFormInput.propTypes = {
-    children: PropTypes$1.node,
-    className: PropTypes$1.string,
-    invalid: PropTypes$1.bool,
-    plainText: PropTypes$1.bool,
-    size: PropTypes$1.oneOf(['sm', 'lg']),
-    type: PropTypes$1.oneOfType([PropTypes$1.oneOf(['color', 'file', 'text']), PropTypes$1.string]),
-    valid: PropTypes$1.bool,
-};
-CFormInput.displayName = 'CFormInput';
+CPicker.propTypes = __assign$1({ 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, 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, children: PropTypes$1.node, className: PropTypes$1.string, container: PropTypes$1.oneOf(['dropdown', 'inline']), disabled: PropTypes$1.bool, footer: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), onCancel: PropTypes$1.func, onConfirm: PropTypes$1.func, toggler: PropTypes$1.node }, CDropdown.propTypes);
 
 var CFormSelect = React$1.forwardRef(function (_a, ref) {
     var _b;
@@ -7387,43 +7431,21 @@ CFormSelect.propTypes = {
 };
 CFormSelect.displayName = 'CFormSelect';
 
-var CInputGroup = React$1.forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, size = _a.size, rest = __rest$1(_a, ["children", "className", "size"]);
-    var _className = classNames$1('input-group', (_b = {},
-        _b["input-group-".concat(size)] = size,
-        _b), className);
-    return (React__default$1["default"].createElement("div", __assign$1({ className: _className }, rest, { ref: ref }), children));
-});
-CInputGroup.propTypes = {
-    children: PropTypes$1.node,
-    className: PropTypes$1.string,
-    size: PropTypes$1.oneOf(['sm', 'lg']),
-};
-CInputGroup.displayName = 'CInputGroup';
-
-var CInputGroupText = React$1.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.component, Component = _b === void 0 ? 'span' : _b, rest = __rest$1(_a, ["children", "className", "component"]);
-    var _className = classNames$1('input-group-text', className);
-    return (React__default$1["default"].createElement(Component, __assign$1({ className: _className }, rest, { ref: ref }), children));
-});
-CInputGroupText.propTypes = {
-    children: PropTypes$1.node,
-    className: PropTypes$1.string,
-    component: PropTypes$1.elementType,
-};
-CInputGroupText.displayName = 'CInputGroupText';
-
 var CTimePickerRollCol = React$1.forwardRef(function (_a, ref) {
     var elements = _a.elements, onClick = _a.onClick, selected = _a.selected;
+    var init = React$1.useRef(true);
     var colRef = React$1.useRef(null);
     var forkedRef = useForkedRef(ref, colRef);
     React$1.useEffect(function () {
         var _a, _b;
         var nodeEl = (_a = colRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.selected');
         if (nodeEl && nodeEl instanceof HTMLElement) {
-            (_b = colRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({ top: nodeEl.offsetTop, behavior: 'smooth' });
+            (_b = colRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                top: nodeEl.offsetTop,
+                behavior: init.current ? 'auto' : 'smooth',
+            });
         }
+        init.current = false;
     }, [selected]);
     return (React__default$1["default"].createElement("div", { className: "time-picker-roll-col", ref: forkedRef }, elements.map(function (element, index) {
         return (React__default$1["default"].createElement("div", { className: classNames$1('time-picker-roll-cell', {
@@ -7451,6 +7473,9 @@ var convert12hTo24h = function (abbr, hour) {
     return hour + 12;
 };
 var convert24hTo12h = function (hour) { return hour % 12 || 12; };
+var convertTimeToDate = function (time) {
+    return time ? (time instanceof Date ? new Date(time) : new Date("1970-01-01 ".concat(time))) : null;
+};
 var getAmPm = function (date, locale) {
     if (date.toLocaleTimeString(locale).includes('AM')) {
         return 'am';
@@ -7460,47 +7485,51 @@ var getAmPm = function (date, locale) {
     }
     return date.getHours() >= 12 ? 'pm' : 'am';
 };
+var getListOfHours = function (locale) {
+    return Array.from({ length: isAmPm(locale) ? 12 : 24 }, function (_, i) {
+        return {
+            value: isAmPm(locale) ? i + 1 : i,
+            label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
+        };
+    });
+};
+var getMinutesOrSeconds = function (locale) {
+    return Array.from({ length: 60 }, function (_, i) {
+        return {
+            value: i,
+            label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
+        };
+    });
+};
+var getSelectedHour = function (date, locale) {
+    return date ? (isAmPm(locale) ? convert24hTo12h(date.getHours()) : date.getHours()) : '';
+};
+var getSelectedMinutes = function (date) { return (date ? date.getMinutes() : ''); };
+var getSelectedSeconds = function (date) { return (date ? date.getSeconds() : ''); };
 var isAmPm = function (locale) {
     return ['am', 'AM', 'pm', 'PM'].some(function (el) { return new Date().toLocaleString(locale).includes(el); });
 };
+var isValidTime = function (time) {
+    var d = new Date("1970-01-01 ".concat(time));
+    return d instanceof Date && d.getTime();
+};
 
 var CTimePicker = React$1.forwardRef(function (_a, ref) {
     var _b;
-    var className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, cleanerIcon = _a.cleanerIcon, _d = _a.container, container = _d === void 0 ? 'dropdown' : _d, defaultIcon = _a.defaultIcon, disabled = _a.disabled, _e = _a.footer, footer = _e === void 0 ? true : _e, inputReadOnly = _a.inputReadOnly, _f = _a.locale, locale = _f === void 0 ? navigator.language : _f, onChange = _a.onChange, _g = _a.placeholder, placeholder = _g === void 0 ? 'Select time' : _g, size = _a.size, value = _a.value, _h = _a.variant, variant = _h === void 0 ? 'roll' : _h, rest = __rest$1(_a, ["className", "cleaner", "cleanerIcon", "container", "defaultIcon", "disabled", "footer", "inputReadOnly", "locale", "onChange", "placeholder", "size", "value", "variant"]);
+    var className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, _d = _a.container, container = _d === void 0 ? 'dropdown' : _d, disabled = _a.disabled, _e = _a.footer, footer = _e === void 0 ? true : _e, _f = _a.indicator, indicator = _f === void 0 ? true : _f, inputReadOnly = _a.inputReadOnly, _g = _a.locale, locale = _g === void 0 ? 'default' : _g, onTimeChange = _a.onTimeChange, onHide = _a.onHide, onShow = _a.onShow, _h = _a.placeholder, placeholder = _h === void 0 ? 'Select time' : _h, size = _a.size, time = _a.time, _j = _a.variant, variant = _j === void 0 ? 'roll' : _j, rest = __rest$1(_a, ["className", "cleaner", "container", "disabled", "footer", "indicator", "inputReadOnly", "locale", "onTimeChange", "onHide", "onShow", "placeholder", "size", "time", "variant"]);
     var inputRef = React$1.useRef(null);
-    var _j = React$1.useState(value ? (value instanceof Date ? new Date(value) : new Date("1970-01-01 ".concat(value))) : null), date = _j[0], setDate = _j[1];
-    var _k = React$1.useState(date ? getAmPm(new Date(date), locale) : 'am'), _ampm = _k[0], setAmPm = _k[1];
+    var _k = React$1.useState(convertTimeToDate(time)), date = _k[0], setDate = _k[1];
+    var _l = React$1.useState(null), initialDate = _l[0], setInitialDate = _l[1];
+    var _m = React$1.useState(date ? getAmPm(new Date(date), locale) : 'am'), _ampm = _m[0], setAmPm = _m[1];
     React$1.useEffect(function () {
-        setDate(value ? (value instanceof Date ? new Date(value) : new Date("1970-01-01 ".concat(value))) : null);
-    }, [value]);
+        setDate(convertTimeToDate(time));
+    }, [time]);
     React$1.useEffect(function () {
         if (inputRef.current) {
             inputRef.current.value = date ? date.toLocaleTimeString(locale) : '';
         }
+        date && setAmPm(getAmPm(new Date(date), locale));
     }, [date]);
-    var getHours = function (locale) {
-        return Array.from(new Array(isAmPm(locale) ? 12 : 24), function (_, i) {
-            return {
-                value: isAmPm(locale) ? i + 1 : i,
-                label: (isAmPm(locale) ? i + 1 : i).toLocaleString(locale),
-            };
-        });
-    };
-    var getMinutesOrSeconds = function (locale) {
-        return Array.from(new Array(60), function (_, i) {
-            return {
-                value: i,
-                label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
-            };
-        });
-    };
-    var selectedHour = date
-        ? isAmPm(locale)
-            ? convert24hTo12h(date.getHours())
-            : date.getHours()
-        : null;
-    var selectedMinutes = date ? date.getMinutes() : null;
-    var selectedSeconds = date ? date.getSeconds() : null;
     var handleClear = function (event) {
         event.stopPropagation();
         setDate(null);
@@ -7509,11 +7538,9 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
         var _date = date || new Date('1970-01-01');
         if (set === 'toggle') {
             if (value === 'am') {
-                setAmPm('am');
                 _date.setHours(_date.getHours() - 12);
             }
             if (value === 'pm') {
-                setAmPm('pm');
                 _date.setHours(_date.getHours() + 12);
             }
         }
@@ -7532,42 +7559,44 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
             _date.setSeconds(parseInt(value));
         }
         setDate(new Date(_date));
-        onChange && onChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
+        onTimeChange && onTimeChange(_date.toTimeString(), _date.toLocaleTimeString(), _date);
     };
     var InputGroup = function () { return (React__default$1["default"].createElement(CInputGroup, { className: "picker-input-group", size: size },
-        React__default$1["default"].createElement(CFormInput, { disabled: disabled, placeholder: placeholder, readOnly: inputReadOnly, ref: inputRef }),
-        (defaultIcon !== false || cleaner) && (React__default$1["default"].createElement(CInputGroupText, null,
-            defaultIcon !== false && (React__default$1["default"].createElement("span", { className: "picker-input-group-indicator" }, defaultIcon ? (defaultIcon) : (React__default$1["default"].createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })))),
-            cleaner && date && (React__default$1["default"].createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, cleanerIcon ? (cleanerIcon) : (React__default$1["default"].createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })))))))); };
+        React__default$1["default"].createElement(CFormInput, { disabled: disabled, onChange: function (event) {
+                return isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value));
+            }, placeholder: placeholder, readOnly: inputReadOnly, ref: inputRef }),
+        (indicator || cleaner) && (React__default$1["default"].createElement(CInputGroupText, null,
+            indicator && (React__default$1["default"].createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React__default$1["default"].createElement("span", { className: "picker-input-group-icon time-picker-input-icon" })) : (indicator))),
+            cleaner && date && (React__default$1["default"].createElement("span", { className: "picker-input-group-cleaner", onClick: function (event) { return handleClear(event); }, role: "button" }, typeof cleaner === 'boolean' ? (React__default$1["default"].createElement("span", { className: "picker-input-group-icon time-picker-cleaner-icon" })) : (cleaner))))))); };
     var TimePickerSelect = function () {
         return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
             React__default$1["default"].createElement("span", { className: "time-picker-inline-icon" }),
-            React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: getHours(locale).map(function (option) {
+            React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: getListOfHours(locale).map(function (option) {
                     return {
                         value: option.value.toString(),
                         label: option.label,
                     };
                 }), onChange: function (event) {
                     return handleTimeChange('hours', event.target.value);
-                }, value: selectedHour ? selectedHour : '0' }),
-            React__default$1["default"].createElement("span", { className: "px-1" }, ":"),
-            React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: Array.from(new Array(60), function (_, i) {
+                }, value: getSelectedHour(date, locale) }),
+            React__default$1["default"].createElement(React__default$1["default"].Fragment, null, ":"),
+            React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: Array.from({ length: 60 }, function (_, i) {
                     return {
                         value: i.toString(),
                         label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
                     };
                 }), onChange: function (event) {
                     return handleTimeChange('minutes', event.target.value);
-                }, value: selectedMinutes ? selectedMinutes : '0' }),
-            React__default$1["default"].createElement("span", { className: "px-1" }, ":"),
-            React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: Array.from(new Array(60), function (_, i) {
+                }, value: getSelectedMinutes(date) }),
+            React__default$1["default"].createElement(React__default$1["default"].Fragment, null, ":"),
+            React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: Array.from({ length: 60 }, function (_, i) {
                     return {
                         value: i.toString(),
                         label: i.toLocaleString(locale).padStart(2, (0).toLocaleString(locale)),
                     };
                 }), onChange: function (event) {
                     return handleTimeChange('seconds', event.target.value);
-                }, value: selectedSeconds ? selectedSeconds : '0' }),
+                }, value: getSelectedSeconds(date) }),
             isAmPm(locale) && (React__default$1["default"].createElement(CFormSelect, { disabled: disabled, options: [
                     { value: 'am', label: 'AM' },
                     { value: 'pm', label: 'PM' },
@@ -7576,39 +7605,39 @@ var CTimePicker = React$1.forwardRef(function (_a, ref) {
                 }, value: _ampm }))));
     };
     var TimePickerRoll = function () { return (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-        React__default$1["default"].createElement(CTimePickerRollCol, { elements: getHours(locale), onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: selectedHour }),
-        React__default$1["default"].createElement(CTimePickerRollCol, { elements: getMinutesOrSeconds(locale), selected: selectedMinutes, onClick: function (index) { return handleTimeChange('minutes', index.toString()); } }),
-        React__default$1["default"].createElement(CTimePickerRollCol, { elements: getMinutesOrSeconds(locale), selected: selectedSeconds, onClick: function (index) { return handleTimeChange('seconds', index.toString()); } }),
+        React__default$1["default"].createElement(CTimePickerRollCol, { elements: getListOfHours(locale), onClick: function (index) { return handleTimeChange('hours', index.toString()); }, selected: getSelectedHour(date, locale) }),
+        React__default$1["default"].createElement(CTimePickerRollCol, { elements: getMinutesOrSeconds(locale), onClick: function (index) { return handleTimeChange('minutes', index.toString()); }, selected: getSelectedMinutes(date) }),
+        React__default$1["default"].createElement(CTimePickerRollCol, { elements: getMinutesOrSeconds(locale), onClick: function (index) { return handleTimeChange('seconds', index.toString()); }, selected: getSelectedSeconds(date) }),
         isAmPm(locale) && (React__default$1["default"].createElement(CTimePickerRollCol, { elements: [
                 { value: 'am', label: 'AM' },
                 { value: 'pm', label: 'PM' },
-            ], selected: _ampm, onClick: function (value) { return handleTimeChange('toggle', value); } })))); };
+            ], onClick: function (value) { return handleTimeChange('toggle', value); }, selected: _ampm })))); };
     var _className = classNames$1('time-picker', className);
-    return (React__default$1["default"].createElement(CPicker, __assign$1({ className: _className, container: container, disabled: disabled, footer: footer, onCancelClick: function () {
-            setDate(value
-                ? value instanceof Date
-                    ? new Date(value)
-                    : new Date("1970-01-01 ".concat(value))
-                : new Date());
+    return (React__default$1["default"].createElement(CPicker, __assign$1({ className: _className, container: container, disabled: disabled, footer: footer, onCancel: function () { return initialDate && setDate(new Date(initialDate)); }, onHide: function () { return onHide && onHide(); }, onShow: function () {
+            date && setInitialDate(new Date(date));
+            onShow && onShow();
         }, toggler: InputGroup() }, rest, { ref: ref }),
         React__default$1["default"].createElement("div", { className: classNames$1('time-picker-body', (_b = {},
                 _b['time-picker-roll'] = variant === 'roll',
                 _b)) }, variant === 'select' ? React__default$1["default"].createElement(TimePickerSelect, null) : TimePickerRoll())));
 });
-CTimePicker.propTypes = __assign$1(__assign$1({}, CPicker.propTypes), { className: PropTypes$1.string, locale: PropTypes$1.string, onChange: PropTypes$1.func, value: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]), variant: PropTypes$1.oneOf(['roll', 'select']) });
+CTimePicker.propTypes = __assign$1(__assign$1({}, CPicker.propTypes), { className: PropTypes$1.string, locale: PropTypes$1.string, onTimeChange: PropTypes$1.func, time: PropTypes$1.oneOfType([PropTypes$1.instanceOf(Date), PropTypes$1.string]), variant: PropTypes$1.oneOf(['roll', 'select']) });
 CTimePicker.displayName = 'CTimePicker';
 
+var _a, _b, _c;
 var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
-    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, cleanerIcon = _a.cleanerIcon, calendarDate = _a.calendarDate, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, defaultIcon = _a.defaultIcon, infixIcon = _a.infixIcon, inputReadOnly = _a.inputReadOnly, _d = _a.locale, locale = _d === void 0 ? navigator.language : _d, maxDate = _a.maxDate, minDate = _a.minDate, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _e = _a.placeholder, placeholder = _e === void 0 ? ['Start date', 'End date'] : _e, _f = _a.range, range = _f === void 0 ? true : _f, ranges = _a.ranges, size = _a.size, startDate = _a.startDate, timepicker = _a.timepicker, toggler = _a.toggler, visible = _a.visible, rest = __rest$1(_a, ["calendars", "className", "cleaner", "cleanerIcon", "calendarDate", "disabled", "disabledDates", "endDate", "defaultIcon", "infixIcon", "inputReadOnly", "locale", "maxDate", "minDate", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "size", "startDate", "timepicker", "toggler", "visible"]);
+    var _b = _a.calendars, calendars = _b === void 0 ? 2 : _b, className = _a.className, _c = _a.cleaner, cleaner = _c === void 0 ? true : _c, calendarDate = _a.calendarDate, _d = _a.indicator, indicator = _d === void 0 ? true : _d, disabled = _a.disabled, disabledDates = _a.disabledDates, endDate = _a.endDate, firstDayOfWeek = _a.firstDayOfWeek, footer = _a.footer, inputReadOnly = _a.inputReadOnly, _e = _a.locale, locale = _e === void 0 ? 'default' : _e, maxDate = _a.maxDate, minDate = _a.minDate, navigation = _a.navigation, onEndDateChange = _a.onEndDateChange, onHide = _a.onHide, onStartDateChange = _a.onStartDateChange, onShow = _a.onShow, _f = _a.placeholder, placeholder = _f === void 0 ? ['Start date', 'End date'] : _f, _g = _a.range, range = _g === void 0 ? true : _g, ranges = _a.ranges, _h = _a.rangesButtonsColor, rangesButtonsColor = _h === void 0 ? 'secondary' : _h, rangesButtonsSize = _a.rangesButtonsSize, _j = _a.rangesButtonsVariant, rangesButtonsVariant = _j === void 0 ? 'ghost' : _j, _k = _a.separator, separator = _k === void 0 ? true : _k, size = _a.size, startDate = _a.startDate, timepicker = _a.timepicker, toggler = _a.toggler, visible = _a.visible, rest = __rest$1(_a, ["calendars", "className", "cleaner", "calendarDate", "indicator", "disabled", "disabledDates", "endDate", "firstDayOfWeek", "footer", "inputReadOnly", "locale", "maxDate", "minDate", "navigation", "onEndDateChange", "onHide", "onStartDateChange", "onShow", "placeholder", "range", "ranges", "rangesButtonsColor", "rangesButtonsSize", "rangesButtonsVariant", "separator", "size", "startDate", "timepicker", "toggler", "visible"]);
+    var _l = React$1.useState(visible), _visible = _l[0], setVisible = _l[1];
     var inputStartRef = React$1.useRef(null);
     var inputEndRef = React$1.useRef(null);
-    var _g = React$1.useState(visible), _visible = _g[0], setVisible = _g[1];
-    var _h = React$1.useState(startDate ? new Date(startDate) : null), _startDate = _h[0], setStartDate = _h[1];
-    var _j = React$1.useState(endDate ? new Date(endDate) : null), _endDate = _j[0], setEndDate = _j[1];
-    var _k = React$1.useState(null), inputHoverValue = _k[0], setInputHoverValue = _k[1];
-    var _l = React$1.useState(null), inputToHoverValue = _l[0], setInputToHoverValue = _l[1];
-    var _m = React$1.useState(false), selectEndDate = _m[0], setSelectEndDate = _m[1];
-    var _o = React$1.useState(calendarDate ? new Date(calendarDate) : new Date()), _calendarDate = _o[0], setCalendarDate = _o[1];
+    var _m = React$1.useState(null), inputStartHoverValue = _m[0], setInputStartHoverValue = _m[1];
+    var _o = React$1.useState(null), inputEndHoverValue = _o[0], setInputEndHoverValue = _o[1];
+    var _p = React$1.useState(calendarDate ? new Date(calendarDate) : new Date()), _calendarDate = _p[0], setCalendarDate = _p[1];
+    var _q = React$1.useState(startDate ? new Date(startDate) : null), _startDate = _q[0], setStartDate = _q[1];
+    var _r = React$1.useState(endDate ? new Date(endDate) : null), _endDate = _r[0], setEndDate = _r[1];
+    var _s = React$1.useState(startDate ? new Date(startDate) : null), initialStartDate = _s[0], setInitialStartDate = _s[1];
+    var _t = React$1.useState(endDate ? new Date(endDate) : null), initialEndDate = _t[0], setInitialEndDate = _t[1];
+    var _u = React$1.useState(false), selectEndDate = _u[0], setSelectEndDate = _u[1];
     React$1.useEffect(function () {
         startDate && setCalendarDate(new Date(startDate));
     }, [startDate]);
@@ -7616,39 +7645,32 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         endDate && setCalendarDate(new Date(endDate));
     }, [endDate]);
     React$1.useEffect(function () {
-        _visible && onShow && onShow();
-        !_visible && onHide && onHide();
-    }, [_visible]);
-    React$1.useEffect(function () {
-        if (inputStartRef.current) {
-            if (inputHoverValue) {
-                inputStartRef.current.value = convertToLocalDate(inputHoverValue, locale);
-                return;
-            }
-            if (_startDate) {
-                inputStartRef.current.value = timepicker
-                    ? _startDate.toLocaleString(locale)
-                    : _startDate.toLocaleDateString(locale);
-                return;
-            }
-            inputStartRef.current.value = '';
+        if (inputStartHoverValue) {
+            setInputValue(inputStartRef.current, inputStartHoverValue, timepicker);
+            return;
         }
-    }, [inputHoverValue, _startDate]);
+        setInputValue(inputStartRef.current, _startDate, timepicker);
+    }, [inputStartHoverValue, _startDate]);
     React$1.useEffect(function () {
-        if (inputEndRef.current) {
-            if (inputToHoverValue) {
-                inputEndRef.current.value = convertToLocalDate(inputToHoverValue, locale);
-                return;
-            }
-            if (_endDate) {
-                inputEndRef.current.value = timepicker
-                    ? _endDate.toLocaleString(locale)
-                    : _endDate.toLocaleDateString(locale);
-                return;
-            }
-            inputEndRef.current.value = '';
+        if (inputEndHoverValue) {
+            setInputValue(inputEndRef.current, inputEndHoverValue, timepicker);
+            return;
+        }
+        setInputValue(inputEndRef.current, _endDate, timepicker);
+    }, [inputEndHoverValue, _endDate]);
+    var setInputValue = function (el, date, timepicker) {
+        if (!el) {
+            return;
         }
-    }, [inputToHoverValue, _endDate]);
+        if (date) {
+            el.value = timepicker ? date.toLocaleString(locale) : date.toLocaleDateString(locale);
+            return;
+        }
+        el.value = '';
+    };
+    var handleCalendarCellHover = function (date) {
+        selectEndDate ? setInputEndHoverValue(date) : setInputStartHoverValue(date);
+    };
     var handleCalendarDateChange = function (date, difference) {
         difference
             ? setCalendarDate(new Date(date.getFullYear(), date.getMonth() - difference, 1))
@@ -7658,65 +7680,80 @@ var CDateRangePicker = React$1.forwardRef(function (_a, ref) {
         setStartDate(date);
         range && setSelectEndDate(true);
         onStartDateChange && onStartDateChange(date);
-        setInputHoverValue(null);
+        setInputStartHoverValue(null);
     };
     var handleEndDateChange = function (date) {
         setEndDate(date);
         setSelectEndDate(false);
         onEndDateChange && onEndDateChange(date);
-        setInputToHoverValue(null);
-        if (timepicker !== true) {
+        setInputEndHoverValue(null);
+        if (timepicker !== true && footer !== true) {
             _startDate !== null && setVisible(false);
         }
     };
-    var handleCalendarCellHover = function (date) {
-        selectEndDate ? setInputToHoverValue(date) : setInputHoverValue(date);
-    };
     var handleClear = function (event) {
         event.stopPropagation();
-        setStartDate(null);
-        setEndDate(null);
-        setInputHoverValue(null);
-        setInputToHoverValue(null);
+        setStartDate(initialStartDate);
+        setEndDate(initialEndDate);
+        setInputStartHoverValue(null);
+        setInputEndHoverValue(null);
     };
     var _className = classNames$1('date-picker', className);
     var InputGroup = function () { return (React__default$1["default"].createElement(CInputGroup, { className: "picker-input-group", size: size },
         React__default$1["default"].createElement(CFormInput, { className: classNames$1({
-                hover: inputHoverValue,
-            }), disabled: disabled, placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef }),
-        range && infixIcon !== false && (React__default$1["default"].createElement(CInputGroupText, null, infixIcon ? (infixIcon) : (React__default$1["default"].createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" })))),
+                hover: inputStartHoverValue,
+            }), disabled: disabled, placeholder: Array.isArray(placeholder) ? placeholder[0] : placeholder, readOnly: inputReadOnly, onChange: function (event) {
+                if (isValidDate(event.target.value)) {
+                    setCalendarDate(new Date(event.target.value));
+                    setStartDate(new Date(event.target.value));
+                }
+            }, onClick: function () { return setSelectEndDate(false); }, ref: inputStartRef }),
+        range && separator !== false && (React__default$1["default"].createElement(CInputGroupText, null, typeof separator === 'boolean' ? (React__default$1["default"].createElement("span", { className: "picker-input-group-icon date-picker-arrow-icon" })) : (separator))),
         range && (React__default$1["default"].createElement(CFormInput, { className: classNames$1({
-                hover: inputToHoverValue,
-            }), disabled: disabled, placeholder: placeholder[1], readOnly: inputReadOnly, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef })),
-        (defaultIcon !== false || cleaner) && (React__default$1["default"].createElement(CInputGroupText, null,
-            defaultIcon !== false && (React__default$1["default"].createElement("span", { className: "picker-input-group-indicator" }, defaultIcon ? (defaultIcon) : (React__default$1["default"].createElement("span", { className: "picker-input-group-icon date-picker-input-icon" })))),
-            cleaner && _startDate && (React__default$1["default"].createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, cleanerIcon ? (cleanerIcon) : (React__default$1["default"].createElement("span", { className: "picker-input-group-icon date-picker-cleaner-icon" })))))))); };
-    return (React__default$1["default"].createElement(CPicker, __assign$1({ className: _className, disabled: disabled, footer: timepicker, toggler: toggler ? toggler : InputGroup(), onCancelClick: function () {
-            handleStartDateChange(startDate ? new Date(startDate) : null);
-            handleEndDateChange(endDate ? new Date(endDate) : null);
+                hover: inputEndHoverValue,
+            }), disabled: disabled, placeholder: placeholder[1], readOnly: inputReadOnly, onChange: function (event) {
+                if (isValidDate(event.target.value)) {
+                    setCalendarDate(new Date(event.target.value));
+                    setEndDate(new Date(event.target.value));
+                }
+            }, onClick: function () { return setSelectEndDate(true); }, ref: inputEndRef })),
+        (indicator || cleaner) && (React__default$1["default"].createElement(CInputGroupText, null,
+            indicator && (React__default$1["default"].createElement("span", { className: "picker-input-group-indicator" }, typeof indicator === 'boolean' ? (React__default$1["default"].createElement("span", { className: "picker-input-group-icon date-picker-input-icon" })) : (indicator))),
+            cleaner && _startDate && (React__default$1["default"].createElement("span", { className: "picker-input-group-cleaner", role: "button", onClick: function (event) { return handleClear(event); } }, typeof cleaner === 'boolean' ? (React__default$1["default"].createElement("span", { className: "picker-input-group-icon date-picker-cleaner-icon" })) : (cleaner))))))); };
+    return (React__default$1["default"].createElement(CPicker, __assign$1({ className: _className, disabled: disabled, footer: footer || timepicker, toggler: toggler ? toggler : InputGroup(), onCancel: function () {
+            handleStartDateChange(initialStartDate);
+            handleEndDateChange(initialEndDate);
+        }, onHide: function () {
+            setInputStartHoverValue(null);
+            setInputEndHoverValue(null);
+            onHide && onHide();
+        }, onShow: function () {
+            setInitialStartDate(_startDate);
+            setInitialEndDate(_endDate);
+            onShow && onShow();
         }, visible: _visible }, rest, { ref: ref }),
         React__default$1["default"].createElement("div", { className: "date-picker-body" },
-            ranges && (React__default$1["default"].createElement("div", { className: "date-picker-ranges" }, Object.keys(ranges).map(function (key, index) { return (React__default$1["default"].createElement(CButton, { color: "secondary", key: index, onClick: function () {
+            ranges && (React__default$1["default"].createElement("div", { className: "date-picker-ranges" }, Object.keys(ranges).map(function (key, index) { return (React__default$1["default"].createElement(CButton, { color: rangesButtonsColor, key: index, onClick: function () {
                     setStartDate(ranges[key][0]);
                     setEndDate(ranges[key][1]);
-                }, variant: "ghost" }, key)); }))),
+                }, size: rangesButtonsSize, variant: rangesButtonsVariant }, key)); }))),
             React__default$1["default"].createElement("div", { className: "date-picker-calendars" }, __spreadArray([], Array(isMobile_1 ? 1 : calendars), true).map(function (_, index) { return (React__default$1["default"].createElement("div", { className: "date-picker-calendar", key: index },
-                React__default$1["default"].createElement(CCalendar, { calendarDate: new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + index, 1), disabledDates: disabledDates, endDate: _endDate, locale: locale, maxDate: maxDate, minDate: minDate, range: range, selectEndDate: selectEndDate, startDate: _startDate, onCalendarCellHover: function (date) { return handleCalendarCellHover(date); }, onCalendarDateChange: function (date) { return handleCalendarDateChange(date, index); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); } }),
+                React__default$1["default"].createElement(CCalendar, { calendarDate: new Date(_calendarDate.getFullYear(), _calendarDate.getMonth() + index, 1), disabledDates: disabledDates, endDate: _endDate, firstDayOfWeek: firstDayOfWeek, locale: locale, maxDate: maxDate, minDate: minDate, navigation: navigation, range: range, selectEndDate: selectEndDate, startDate: _startDate, onCalendarCellHover: function (date) { return handleCalendarCellHover(date); }, onCalendarDateChange: function (date) { return handleCalendarDateChange(date, index); }, onStartDateChange: function (date) { return handleStartDateChange(date); }, onEndDateChange: function (date) { return handleEndDateChange(date); } }),
                 !isMobile_1 && timepicker && (index === 0 || calendars - index === 1) && (React__default$1["default"].createElement(CTimePicker, { container: "inline", disabled: index === 0
                         ? _startDate === null
                             ? true
                             : false
                         : _endDate === null
                             ? true
-                            : false, locale: locale, onChange: function (_, __, date) {
+                            : false, locale: locale, onTimeChange: function (_, __, date) {
                         return index === 0 ? handleStartDateChange(date) : handleEndDateChange(date);
-                    }, value: index === 0 ? _startDate : _endDate, variant: "select" })),
+                    }, time: index === 0 ? _startDate : _endDate, variant: "select" })),
                 isMobile_1 && timepicker && (React__default$1["default"].createElement(React__default$1["default"].Fragment, null,
-                    React__default$1["default"].createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onChange: function (_, __, date) { return handleStartDateChange(date); }, value: _startDate, variant: "select" }),
-                    React__default$1["default"].createElement(CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onChange: function (_, __, date) { return handleEndDateChange(date); }, value: _endDate, variant: "select" }))))); })))));
+                    React__default$1["default"].createElement(CTimePicker, { container: "inline", disabled: _startDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return handleStartDateChange(date); }, time: _startDate, variant: "select" }),
+                    React__default$1["default"].createElement(CTimePicker, { container: "inline", disabled: _endDate === null ? true : false, locale: locale, onTimeChange: function (_, __, date) { return handleEndDateChange(date); }, time: _endDate, variant: "select" }))))); })))));
 });
 CDateRangePicker.displayName = 'CDateRangePicker';
-CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CPicker.propTypes), { calendars: PropTypes$1.number, inputReadOnly: PropTypes$1.bool, placeholder: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(PropTypes$1.any)]), range: PropTypes$1.bool, ranges: PropTypes$1.object, timepicker: PropTypes$1.bool });
+CDateRangePicker.propTypes = __assign$1(__assign$1(__assign$1({}, CCalendar.propTypes), CPicker.propTypes), { calendars: PropTypes$1.number, className: PropTypes$1.string, cleaner: PropTypes$1.bool, indicator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), inputReadOnly: PropTypes$1.bool, placeholder: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.arrayOf(PropTypes$1.any)]), range: PropTypes$1.bool, ranges: PropTypes$1.object, rangesButtonsColor: (_a = CButton.propTypes) === null || _a === void 0 ? void 0 : _a.color, rangesButtonsSize: (_b = CButton.propTypes) === null || _b === void 0 ? void 0 : _b.size, rangesButtonsVariant: (_c = CButton.propTypes) === null || _c === void 0 ? void 0 : _c.variant, separator: PropTypes$1.oneOfType([PropTypes$1.bool, PropTypes$1.node]), size: PropTypes$1.oneOf(['sm', 'lg']), timepicker: PropTypes$1.bool });
 
 var CDatePicker = React$1.forwardRef(function (_a, ref) {
     var date = _a.date, onDateChange = _a.onDateChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Select date' : _b, rest = __rest$1(_a, ["date", "onDateChange", "placeholder"]);