beesoft-components 0.2.21 → 0.2.23

package/build/index.cjs.js

@@ -25788,13 +25788,10 @@ var DateTimeActionType;
     DateTimeActionType[DateTimeActionType["SetSelectedDateRange"] = 7] = "SetSelectedDateRange";
     DateTimeActionType[DateTimeActionType["SetSelectedStartDate"] = 8] = "SetSelectedStartDate";
     DateTimeActionType[DateTimeActionType["SetSelectedEndDate"] = 9] = "SetSelectedEndDate";
-    DateTimeActionType[DateTimeActionType["ResetSelectedDateChanged"] = 10] = "ResetSelectedDateChanged";
-    DateTimeActionType[DateTimeActionType["ResetSelectedDateRangeChanged"] = 11] = "ResetSelectedDateRangeChanged";
-    DateTimeActionType[DateTimeActionType["ClearDates"] = 12] = "ClearDates";
-    DateTimeActionType[DateTimeActionType["InitializeDates"] = 13] = "InitializeDates";
+    DateTimeActionType[DateTimeActionType["ClearDates"] = 10] = "ClearDates";
+    DateTimeActionType[DateTimeActionType["InitializeDates"] = 11] = "InitializeDates";
 })(DateTimeActionType || (DateTimeActionType = {}));
 var reducer = function (state, action) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     switch (action.type) {
         case DateTimeActionType.DaySelector:
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.DaySelector, currentViewDate: action.viewDate || state.currentViewDate });
@@ -25809,38 +25806,26 @@ var reducer = function (state, action) {
         case DateTimeActionType.SetViewDate:
             return __assign(__assign({}, state), { currentViewDate: action.viewDate || new Date(), dateInitialized: true });
         case DateTimeActionType.SetSelectedDate:
-            return __assign(__assign({}, state), { selectedDate: action.selectedDate || state.selectedDate, selectedDateChanged: !state.selectedDateChanged
-                    ? ((_a = state.originalSetDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = action.selectedDate) === null || _b === void 0 ? void 0 : _b.getTime())
-                    : true });
+            return __assign(__assign({}, state), { selectedDate: action.selectedDate || state.selectedDate, currentViewDate: action.viewDate || state.currentViewDate });
         case DateTimeActionType.SetSelectedDateRange:
-            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate || state.selectedStartDate, selectedEndDate: action.selectedEndDate || state.selectedEndDate, selectedDateChanged: ((_c = state.originalSetStartDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = action.selectedStartDate) === null || _d === void 0 ? void 0 : _d.getTime()) ||
-                    ((_e = state.originalSetEndDate) === null || _e === void 0 ? void 0 : _e.getTime()) !== ((_f = action.selectedEndDate) === null || _f === void 0 ? void 0 : _f.getTime()) });
+            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate || state.selectedStartDate, selectedEndDate: action.selectedEndDate || state.selectedEndDate });
         case DateTimeActionType.SetSelectedStartDate:
-            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined, selectedDateChanged: !state.selectedDateChanged
-                    ? ((_g = state.originalSetStartDate) === null || _g === void 0 ? void 0 : _g.getTime()) !== ((_h = action.selectedStartDate) === null || _h === void 0 ? void 0 : _h.getTime())
-                    : true });
+            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined });
         case DateTimeActionType.SetSelectedEndDate:
-            return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate, selectedDateChanged: !state.selectedDateChanged
-                    ? ((_j = state.originalSetEndDate) === null || _j === void 0 ? void 0 : _j.getTime()) !== ((_k = action.selectedEndDate) === null || _k === void 0 ? void 0 : _k.getTime())
-                    : true });
-        case DateTimeActionType.ResetSelectedDateChanged:
-            return __assign(__assign({}, state), { originalSetDate: action.selectedDate || state.selectedDate, selectedDateChanged: false });
-        case DateTimeActionType.ResetSelectedDateRangeChanged:
-            return __assign(__assign({}, state), { originalSetStartDate: action.selectedStartDate || state.selectedStartDate, originalSetEndDate: action.selectedEndDate || state.selectedEndDate, selectedDateChanged: false });
+            return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate });
         case DateTimeActionType.ClearDates:
             return {
                 currentSelector: state.currentSelector,
                 currentViewDate: state.currentViewDate,
-                selectedDateChanged: false,
                 dateInitialized: true,
             };
         case DateTimeActionType.InitializeDates:
             var baseState = __assign(__assign({}, state), { currentViewDate: getInitialDate(action.initialDate), dateInitialized: true });
             if (!Array.isArray(action.initialDate)) {
-                return __assign(__assign({}, baseState), { originalSetDate: action.initialDate, selectedDate: action.initialDate });
+                return __assign(__assign({}, baseState), { selectedDate: action.initialDate });
             }
             else {
-                return __assign(__assign({}, baseState), { originalSetStartDate: action.initialDate[0], originalSetEndDate: action.initialDate[1], selectedStartDate: action.initialDate[0], selectedEndDate: action.initialDate[1] });
+                return __assign(__assign({}, baseState), { selectedStartDate: action.initialDate[0], selectedEndDate: action.initialDate[1] });
             }
         default:
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.DaySelector });
@@ -25922,19 +25907,12 @@ function DateTimeCalendar(_a) {
     }, [locale]);
     var onDateClicked = function (date) {
         if (selectionMode === CalendarSelectionMode.Normal) {
-            if (dispatcher) {
-                dispatcher({
-                    type: DateTimeActionType.SetSelectedDate,
-                    selectedDate: date,
-                });
-                dispatcher({
-                    type: DateTimeActionType.SetViewDate,
-                    viewDate: date,
-                });
-            }
-            if (onDateSelected) {
-                onDateSelected(date);
-            }
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher({
+                type: DateTimeActionType.SetSelectedDate,
+                selectedDate: date,
+                viewDate: date,
+            });
+            onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(date);
         }
         else {
             if (!onDateSelected)
@@ -26027,7 +26005,7 @@ function DateTimeScroller(_a) {
 }
 
 function DateTimeDaySelector(_a) {
-    var selectedDate = _a.selectedDate, viewDate = _a.viewDate, locale = _a.locale, showTimeSelector = _a.showTimeSelector, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, dispatcher = _a.dispatcher;
+    var selectedDate = _a.selectedDate, viewDate = _a.viewDate, locale = _a.locale, showTimeSelector = _a.showTimeSelector, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, dispatcher = _a.dispatcher;
     var movePreviousMonth = function () {
         if (viewDate) {
             dispatcher({
@@ -26064,7 +26042,7 @@ function DateTimeDaySelector(_a) {
         return '';
     };
     return (jsxRuntime.jsxs("div", __assign({ className: "bsc-p-2 bc-dt-day-selector" }, { children: [jsxRuntime.jsx(DateTimeScroller, { title: getCurrentMonthYear(), scrollerType: DateScrollerType.Day, onTitleClicked: onMonthClicked, onMovePrevious: movePreviousMonth, onMoveNext: moveNextMonth }, void 0),
-            jsxRuntime.jsx(DateTimeCalendar, { viewDate: viewDate, selectedDate: selectedDate, locale: locale, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher }, void 0),
+            jsxRuntime.jsx(DateTimeCalendar, { viewDate: viewDate, selectedDate: selectedDate, locale: locale, selectableDate: selectableDate, isValidDate: isValidDate, onDateSelected: onChange, dispatcher: dispatcher }, void 0),
             showTimeSelector && (jsxRuntime.jsx("div", __assign({ className: "bsc-w-full bsc-flex bsc-flex-row bsc-p-2 bsc-justify-center bc-dt-time-value-wrapper" }, { children: jsxRuntime.jsx("div", __assign({ className: "bsc-p-2 bsc-cursor-pointer hover:bsc-bg-gray-300 dark:hover:bsc-bg-white dark:hover:bsc-text-black dark:bsc-text-white bc-dt-time-value", onClick: onTimeClicked }, { children: (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleTimeString(locale.code)) || getDefaultTime(locale) }), void 0) }), void 0))] }), void 0));
 }
 
@@ -26110,7 +26088,7 @@ function DateTimeMonthSelector(_a) {
 }
 
 function DateTimeRangeSelector(_a) {
-    var viewDate = _a.viewDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, locale = _a.locale, dispatcher = _a.dispatcher;
+    var viewDate = _a.viewDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, locale = _a.locale, onChange = _a.onChange, dispatcher = _a.dispatcher;
     var nextMonth = addMonths(viewDate, 1);
     var onDateSelected = function (date, options) {
         if (!options || !options.setEndDate) {
@@ -26124,6 +26102,7 @@ function DateTimeRangeSelector(_a) {
                 type: DateTimeActionType.SetSelectedEndDate,
                 selectedEndDate: date,
             });
+            selectedStartDate && (onChange === null || onChange === void 0 ? void 0 : onChange([selectedStartDate, date]));
         }
     };
     var onMonthsClicked = function () {
@@ -26160,10 +26139,11 @@ function DateTimeRangeSelector(_a) {
 }
 
 function DateTimeTimeSelector(_a) {
-    var viewDate = _a.viewDate, showDateSelector = _a.showDateSelector, locale = _a.locale, timeConstraints = _a.timeConstraints, dispatcher = _a.dispatcher;
+    var viewDate = _a.viewDate, showDateSelector = _a.showDateSelector, locale = _a.locale, timeConstraints = _a.timeConstraints, onChange = _a.onChange, dispatcher = _a.dispatcher;
     var hours = React.useRef(['12', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11']);
     var minutes = React.useRef(generateNumberArray(0, 59, function (value) { return padNumber(value, 2, '0'); }));
     var ampm = React.useRef(['AM', 'PM']);
+    var savedViewDate = React.useRef(lodash.cloneDeep(viewDate));
     var getMeridianHour = function (hour) { return (hour > 11 ? hour - 12 : hour); };
     var _b = React.useState(getMeridianHour(viewDate.getHours())), currentHour = _b[0], setCurrentHour = _b[1];
     var _c = React.useState(viewDate.getMinutes()), currentMinute = _c[0], setCurrentMinute = _c[1];
@@ -26208,15 +26188,13 @@ function DateTimeTimeSelector(_a) {
     };
     var setCurrentTime = function (hour, minute, meridian) {
         var correctHour = meridian === 1 ? hour + 12 : hour;
-        viewDate.setHours(correctHour, minute);
+        savedViewDate.current.setHours(correctHour, minute);
         dispatcher({
             type: DateTimeActionType.SetSelectedDate,
-            selectedDate: viewDate,
-        });
-        dispatcher({
-            type: DateTimeActionType.SetViewDate,
-            viewDate: viewDate,
+            selectedDate: savedViewDate.current,
+            viewDate: savedViewDate.current,
         });
+        onChange === null || onChange === void 0 ? void 0 : onChange(savedViewDate.current);
     };
     var onDateClicked = function () {
         dispatcher({
@@ -26346,7 +26324,6 @@ function DateTime(_a) {
                 ? DateTimeActionType.DaySelector
                 : DateTimeActionType.DateRangeSelector,
         currentViewDate: new Date(),
-        selectedDateChanged: false,
         dateInitialized: false,
     };
     var _l = React.useReducer(reducer, initialState), state = _l[0], dispatcher = _l[1];
@@ -26361,13 +26338,10 @@ function DateTime(_a) {
             : parseDateRange(dateString, loadedLocale.current);
         if (inputDate) {
             if (!Array.isArray(inputDate)) {
-                dispatcher({
-                    type: DateTimeActionType.SetViewDate,
-                    viewDate: inputDate,
-                });
                 dispatcher({
                     type: DateTimeActionType.SetSelectedDate,
                     selectedDate: inputDate,
+                    viewDate: inputDate,
                 });
             }
             else {
@@ -26399,7 +26373,7 @@ function DateTime(_a) {
             type: DateTimeActionType.ClearDates,
         });
         setSelectorOpen(false);
-        onChange && onChange();
+        onChange === null || onChange === void 0 ? void 0 : onChange();
     };
     var onInputElementCreated = function (element) {
         if (!inputElementRef.current) {
@@ -26420,21 +26394,6 @@ function DateTime(_a) {
                     ? DateTimeActionType.DaySelector
                     : DateTimeActionType.DateRangeSelector,
         });
-        if (onChange && dateSelection !== DateSelectionType.DateRange && state.selectedDate && state.selectedDateChanged) {
-            onChange(state.selectedDate);
-            dispatcher({
-                type: DateTimeActionType.ResetSelectedDateChanged,
-                selectedDate: state.selectedDate,
-            });
-        }
-        else if (onChange && state.selectedStartDate && state.selectedEndDate && state.selectedDateChanged) {
-            onChange([state.selectedStartDate, state.selectedEndDate]);
-            dispatcher({
-                type: DateTimeActionType.ResetSelectedDateRangeChanged,
-                selectedStartDate: state.selectedStartDate,
-                selectedEndDate: state.selectedEndDate,
-            });
-        }
     };
     var getDateTimeStyle = function () {
         switch (dateFormat) {
@@ -26532,7 +26491,7 @@ function DateTime(_a) {
                 jsxRuntime.jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, shouldCheckZIndex: true, hidden: onDateTimeHidden, unmountWhenHidden: true }, { children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
-                                loadedLocale.current && (jsxRuntime.jsx(DateTimeDaySelector, { selectedDate: state.selectedDate, viewDate: state.currentViewDate, locale: loadedLocale.current, showTimeSelector: dateSelection === DateSelectionType.DateTime, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher }, void 0)),
+                                loadedLocale.current && (jsxRuntime.jsx(DateTimeDaySelector, { selectedDate: state.selectedDate, viewDate: state.currentViewDate, locale: loadedLocale.current, showTimeSelector: dateSelection === DateSelectionType.DateTime, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher, onChange: onChange }, void 0)),
                             state.currentSelector === DateTimeActionType.MonthSelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
@@ -26544,11 +26503,11 @@ function DateTime(_a) {
                             state.currentSelector === DateTimeActionType.TimeSelector &&
                                 canShowTimeSelector &&
                                 state.dateInitialized &&
-                                loadedLocale.current && (jsxRuntime.jsx(DateTimeTimeSelector, { viewDate: state.currentViewDate, showDateSelector: dateSelection === DateSelectionType.DateTime, locale: loadedLocale.current, timeConstraints: timeConstraints, dispatcher: dispatcher }, void 0)),
+                                loadedLocale.current && (jsxRuntime.jsx(DateTimeTimeSelector, { viewDate: state.currentViewDate, showDateSelector: dateSelection === DateSelectionType.DateTime, locale: loadedLocale.current, timeConstraints: timeConstraints, onChange: onChange, dispatcher: dispatcher }, void 0)),
                             state.currentSelector === DateTimeActionType.DateRangeSelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
-                                loadedLocale.current && (jsxRuntime.jsx(DateTimeRangeSelector, { viewDate: state.currentViewDate, selectedStartDate: state.selectedStartDate, selectedEndDate: state.selectedEndDate, locale: loadedLocale.current, dispatcher: dispatcher }, void 0))] }, void 0) }), void 0)] }), void 0) }), void 0));
+                                loadedLocale.current && (jsxRuntime.jsx(DateTimeRangeSelector, { viewDate: state.currentViewDate, selectedStartDate: state.selectedStartDate, selectedEndDate: state.selectedEndDate, locale: loadedLocale.current, onChange: onChange, dispatcher: dispatcher }, void 0))] }, void 0) }), void 0)] }), void 0) }), void 0));
 }
 
 function styleInject(css, ref) {

package/build/index.js

@@ -25759,13 +25759,10 @@ var DateTimeActionType;
     DateTimeActionType[DateTimeActionType["SetSelectedDateRange"] = 7] = "SetSelectedDateRange";
     DateTimeActionType[DateTimeActionType["SetSelectedStartDate"] = 8] = "SetSelectedStartDate";
     DateTimeActionType[DateTimeActionType["SetSelectedEndDate"] = 9] = "SetSelectedEndDate";
-    DateTimeActionType[DateTimeActionType["ResetSelectedDateChanged"] = 10] = "ResetSelectedDateChanged";
-    DateTimeActionType[DateTimeActionType["ResetSelectedDateRangeChanged"] = 11] = "ResetSelectedDateRangeChanged";
-    DateTimeActionType[DateTimeActionType["ClearDates"] = 12] = "ClearDates";
-    DateTimeActionType[DateTimeActionType["InitializeDates"] = 13] = "InitializeDates";
+    DateTimeActionType[DateTimeActionType["ClearDates"] = 10] = "ClearDates";
+    DateTimeActionType[DateTimeActionType["InitializeDates"] = 11] = "InitializeDates";
 })(DateTimeActionType || (DateTimeActionType = {}));
 var reducer = function (state, action) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     switch (action.type) {
         case DateTimeActionType.DaySelector:
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.DaySelector, currentViewDate: action.viewDate || state.currentViewDate });
@@ -25780,38 +25777,26 @@ var reducer = function (state, action) {
         case DateTimeActionType.SetViewDate:
             return __assign(__assign({}, state), { currentViewDate: action.viewDate || new Date(), dateInitialized: true });
         case DateTimeActionType.SetSelectedDate:
-            return __assign(__assign({}, state), { selectedDate: action.selectedDate || state.selectedDate, selectedDateChanged: !state.selectedDateChanged
-                    ? ((_a = state.originalSetDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = action.selectedDate) === null || _b === void 0 ? void 0 : _b.getTime())
-                    : true });
+            return __assign(__assign({}, state), { selectedDate: action.selectedDate || state.selectedDate, currentViewDate: action.viewDate || state.currentViewDate });
         case DateTimeActionType.SetSelectedDateRange:
-            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate || state.selectedStartDate, selectedEndDate: action.selectedEndDate || state.selectedEndDate, selectedDateChanged: ((_c = state.originalSetStartDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = action.selectedStartDate) === null || _d === void 0 ? void 0 : _d.getTime()) ||
-                    ((_e = state.originalSetEndDate) === null || _e === void 0 ? void 0 : _e.getTime()) !== ((_f = action.selectedEndDate) === null || _f === void 0 ? void 0 : _f.getTime()) });
+            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate || state.selectedStartDate, selectedEndDate: action.selectedEndDate || state.selectedEndDate });
         case DateTimeActionType.SetSelectedStartDate:
-            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined, selectedDateChanged: !state.selectedDateChanged
-                    ? ((_g = state.originalSetStartDate) === null || _g === void 0 ? void 0 : _g.getTime()) !== ((_h = action.selectedStartDate) === null || _h === void 0 ? void 0 : _h.getTime())
-                    : true });
+            return __assign(__assign({}, state), { selectedStartDate: action.selectedStartDate, selectedEndDate: undefined });
         case DateTimeActionType.SetSelectedEndDate:
-            return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate, selectedDateChanged: !state.selectedDateChanged
-                    ? ((_j = state.originalSetEndDate) === null || _j === void 0 ? void 0 : _j.getTime()) !== ((_k = action.selectedEndDate) === null || _k === void 0 ? void 0 : _k.getTime())
-                    : true });
-        case DateTimeActionType.ResetSelectedDateChanged:
-            return __assign(__assign({}, state), { originalSetDate: action.selectedDate || state.selectedDate, selectedDateChanged: false });
-        case DateTimeActionType.ResetSelectedDateRangeChanged:
-            return __assign(__assign({}, state), { originalSetStartDate: action.selectedStartDate || state.selectedStartDate, originalSetEndDate: action.selectedEndDate || state.selectedEndDate, selectedDateChanged: false });
+            return __assign(__assign({}, state), { selectedEndDate: action.selectedEndDate });
         case DateTimeActionType.ClearDates:
             return {
                 currentSelector: state.currentSelector,
                 currentViewDate: state.currentViewDate,
-                selectedDateChanged: false,
                 dateInitialized: true,
             };
         case DateTimeActionType.InitializeDates:
             var baseState = __assign(__assign({}, state), { currentViewDate: getInitialDate(action.initialDate), dateInitialized: true });
             if (!Array.isArray(action.initialDate)) {
-                return __assign(__assign({}, baseState), { originalSetDate: action.initialDate, selectedDate: action.initialDate });
+                return __assign(__assign({}, baseState), { selectedDate: action.initialDate });
             }
             else {
-                return __assign(__assign({}, baseState), { originalSetStartDate: action.initialDate[0], originalSetEndDate: action.initialDate[1], selectedStartDate: action.initialDate[0], selectedEndDate: action.initialDate[1] });
+                return __assign(__assign({}, baseState), { selectedStartDate: action.initialDate[0], selectedEndDate: action.initialDate[1] });
             }
         default:
             return __assign(__assign({}, state), { currentSelector: DateTimeActionType.DaySelector });
@@ -25893,19 +25878,12 @@ function DateTimeCalendar(_a) {
     }, [locale]);
     var onDateClicked = function (date) {
         if (selectionMode === CalendarSelectionMode.Normal) {
-            if (dispatcher) {
-                dispatcher({
-                    type: DateTimeActionType.SetSelectedDate,
-                    selectedDate: date,
-                });
-                dispatcher({
-                    type: DateTimeActionType.SetViewDate,
-                    viewDate: date,
-                });
-            }
-            if (onDateSelected) {
-                onDateSelected(date);
-            }
+            dispatcher === null || dispatcher === void 0 ? void 0 : dispatcher({
+                type: DateTimeActionType.SetSelectedDate,
+                selectedDate: date,
+                viewDate: date,
+            });
+            onDateSelected === null || onDateSelected === void 0 ? void 0 : onDateSelected(date);
         }
         else {
             if (!onDateSelected)
@@ -25998,7 +25976,7 @@ function DateTimeScroller(_a) {
 }
 
 function DateTimeDaySelector(_a) {
-    var selectedDate = _a.selectedDate, viewDate = _a.viewDate, locale = _a.locale, showTimeSelector = _a.showTimeSelector, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, dispatcher = _a.dispatcher;
+    var selectedDate = _a.selectedDate, viewDate = _a.viewDate, locale = _a.locale, showTimeSelector = _a.showTimeSelector, selectableDate = _a.selectableDate, isValidDate = _a.isValidDate, onChange = _a.onChange, dispatcher = _a.dispatcher;
     var movePreviousMonth = function () {
         if (viewDate) {
             dispatcher({
@@ -26035,7 +26013,7 @@ function DateTimeDaySelector(_a) {
         return '';
     };
     return (jsxs("div", __assign({ className: "bsc-p-2 bc-dt-day-selector" }, { children: [jsx(DateTimeScroller, { title: getCurrentMonthYear(), scrollerType: DateScrollerType.Day, onTitleClicked: onMonthClicked, onMovePrevious: movePreviousMonth, onMoveNext: moveNextMonth }, void 0),
-            jsx(DateTimeCalendar, { viewDate: viewDate, selectedDate: selectedDate, locale: locale, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher }, void 0),
+            jsx(DateTimeCalendar, { viewDate: viewDate, selectedDate: selectedDate, locale: locale, selectableDate: selectableDate, isValidDate: isValidDate, onDateSelected: onChange, dispatcher: dispatcher }, void 0),
             showTimeSelector && (jsx("div", __assign({ className: "bsc-w-full bsc-flex bsc-flex-row bsc-p-2 bsc-justify-center bc-dt-time-value-wrapper" }, { children: jsx("div", __assign({ className: "bsc-p-2 bsc-cursor-pointer hover:bsc-bg-gray-300 dark:hover:bsc-bg-white dark:hover:bsc-text-black dark:bsc-text-white bc-dt-time-value", onClick: onTimeClicked }, { children: (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.toLocaleTimeString(locale.code)) || getDefaultTime(locale) }), void 0) }), void 0))] }), void 0));
 }
 
@@ -26081,7 +26059,7 @@ function DateTimeMonthSelector(_a) {
 }
 
 function DateTimeRangeSelector(_a) {
-    var viewDate = _a.viewDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, locale = _a.locale, dispatcher = _a.dispatcher;
+    var viewDate = _a.viewDate, selectedStartDate = _a.selectedStartDate, selectedEndDate = _a.selectedEndDate, locale = _a.locale, onChange = _a.onChange, dispatcher = _a.dispatcher;
     var nextMonth = addMonths(viewDate, 1);
     var onDateSelected = function (date, options) {
         if (!options || !options.setEndDate) {
@@ -26095,6 +26073,7 @@ function DateTimeRangeSelector(_a) {
                 type: DateTimeActionType.SetSelectedEndDate,
                 selectedEndDate: date,
             });
+            selectedStartDate && (onChange === null || onChange === void 0 ? void 0 : onChange([selectedStartDate, date]));
         }
     };
     var onMonthsClicked = function () {
@@ -26131,10 +26110,11 @@ function DateTimeRangeSelector(_a) {
 }
 
 function DateTimeTimeSelector(_a) {
-    var viewDate = _a.viewDate, showDateSelector = _a.showDateSelector, locale = _a.locale, timeConstraints = _a.timeConstraints, dispatcher = _a.dispatcher;
+    var viewDate = _a.viewDate, showDateSelector = _a.showDateSelector, locale = _a.locale, timeConstraints = _a.timeConstraints, onChange = _a.onChange, dispatcher = _a.dispatcher;
     var hours = useRef(['12', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11']);
     var minutes = useRef(generateNumberArray(0, 59, function (value) { return padNumber(value, 2, '0'); }));
     var ampm = useRef(['AM', 'PM']);
+    var savedViewDate = useRef(lodash.cloneDeep(viewDate));
     var getMeridianHour = function (hour) { return (hour > 11 ? hour - 12 : hour); };
     var _b = useState(getMeridianHour(viewDate.getHours())), currentHour = _b[0], setCurrentHour = _b[1];
     var _c = useState(viewDate.getMinutes()), currentMinute = _c[0], setCurrentMinute = _c[1];
@@ -26179,15 +26159,13 @@ function DateTimeTimeSelector(_a) {
     };
     var setCurrentTime = function (hour, minute, meridian) {
         var correctHour = meridian === 1 ? hour + 12 : hour;
-        viewDate.setHours(correctHour, minute);
+        savedViewDate.current.setHours(correctHour, minute);
         dispatcher({
             type: DateTimeActionType.SetSelectedDate,
-            selectedDate: viewDate,
-        });
-        dispatcher({
-            type: DateTimeActionType.SetViewDate,
-            viewDate: viewDate,
+            selectedDate: savedViewDate.current,
+            viewDate: savedViewDate.current,
         });
+        onChange === null || onChange === void 0 ? void 0 : onChange(savedViewDate.current);
     };
     var onDateClicked = function () {
         dispatcher({
@@ -26317,7 +26295,6 @@ function DateTime(_a) {
                 ? DateTimeActionType.DaySelector
                 : DateTimeActionType.DateRangeSelector,
         currentViewDate: new Date(),
-        selectedDateChanged: false,
         dateInitialized: false,
     };
     var _l = useReducer(reducer, initialState), state = _l[0], dispatcher = _l[1];
@@ -26332,13 +26309,10 @@ function DateTime(_a) {
             : parseDateRange(dateString, loadedLocale.current);
         if (inputDate) {
             if (!Array.isArray(inputDate)) {
-                dispatcher({
-                    type: DateTimeActionType.SetViewDate,
-                    viewDate: inputDate,
-                });
                 dispatcher({
                     type: DateTimeActionType.SetSelectedDate,
                     selectedDate: inputDate,
+                    viewDate: inputDate,
                 });
             }
             else {
@@ -26370,7 +26344,7 @@ function DateTime(_a) {
             type: DateTimeActionType.ClearDates,
         });
         setSelectorOpen(false);
-        onChange && onChange();
+        onChange === null || onChange === void 0 ? void 0 : onChange();
     };
     var onInputElementCreated = function (element) {
         if (!inputElementRef.current) {
@@ -26391,21 +26365,6 @@ function DateTime(_a) {
                     ? DateTimeActionType.DaySelector
                     : DateTimeActionType.DateRangeSelector,
         });
-        if (onChange && dateSelection !== DateSelectionType.DateRange && state.selectedDate && state.selectedDateChanged) {
-            onChange(state.selectedDate);
-            dispatcher({
-                type: DateTimeActionType.ResetSelectedDateChanged,
-                selectedDate: state.selectedDate,
-            });
-        }
-        else if (onChange && state.selectedStartDate && state.selectedEndDate && state.selectedDateChanged) {
-            onChange([state.selectedStartDate, state.selectedEndDate]);
-            dispatcher({
-                type: DateTimeActionType.ResetSelectedDateRangeChanged,
-                selectedStartDate: state.selectedStartDate,
-                selectedEndDate: state.selectedEndDate,
-            });
-        }
     };
     var getDateTimeStyle = function () {
         switch (dateFormat) {
@@ -26503,7 +26462,7 @@ function DateTime(_a) {
                 jsx(OverlayPanel, __assign({ visible: selectorOpen, target: dropDownTarget, shouldTargetCloseOverlay: false, shouldScrollCloseOverlay: true, shouldCheckZIndex: true, hidden: onDateTimeHidden, unmountWhenHidden: true }, { children: jsxs(Fragment$1, { children: [state.currentSelector === DateTimeActionType.DaySelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
-                                loadedLocale.current && (jsx(DateTimeDaySelector, { selectedDate: state.selectedDate, viewDate: state.currentViewDate, locale: loadedLocale.current, showTimeSelector: dateSelection === DateSelectionType.DateTime, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher }, void 0)),
+                                loadedLocale.current && (jsx(DateTimeDaySelector, { selectedDate: state.selectedDate, viewDate: state.currentViewDate, locale: loadedLocale.current, showTimeSelector: dateSelection === DateSelectionType.DateTime, selectableDate: selectableDate, isValidDate: isValidDate, dispatcher: dispatcher, onChange: onChange }, void 0)),
                             state.currentSelector === DateTimeActionType.MonthSelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
@@ -26515,11 +26474,11 @@ function DateTime(_a) {
                             state.currentSelector === DateTimeActionType.TimeSelector &&
                                 canShowTimeSelector &&
                                 state.dateInitialized &&
-                                loadedLocale.current && (jsx(DateTimeTimeSelector, { viewDate: state.currentViewDate, showDateSelector: dateSelection === DateSelectionType.DateTime, locale: loadedLocale.current, timeConstraints: timeConstraints, dispatcher: dispatcher }, void 0)),
+                                loadedLocale.current && (jsx(DateTimeTimeSelector, { viewDate: state.currentViewDate, showDateSelector: dateSelection === DateSelectionType.DateTime, locale: loadedLocale.current, timeConstraints: timeConstraints, onChange: onChange, dispatcher: dispatcher }, void 0)),
                             state.currentSelector === DateTimeActionType.DateRangeSelector &&
                                 canShowDateSelectors &&
                                 state.dateInitialized &&
-                                loadedLocale.current && (jsx(DateTimeRangeSelector, { viewDate: state.currentViewDate, selectedStartDate: state.selectedStartDate, selectedEndDate: state.selectedEndDate, locale: loadedLocale.current, dispatcher: dispatcher }, void 0))] }, void 0) }), void 0)] }), void 0) }), void 0));
+                                loadedLocale.current && (jsx(DateTimeRangeSelector, { viewDate: state.currentViewDate, selectedStartDate: state.selectedStartDate, selectedEndDate: state.selectedEndDate, locale: loadedLocale.current, onChange: onChange, dispatcher: dispatcher }, void 0))] }, void 0) }), void 0)] }), void 0) }), void 0));
 }
 
 function styleInject(css, ref) {