rsuite 5.21.0 → 5.22.1

package/DatePicker/styles/index.less

@@ -34,6 +34,17 @@
   }
 }
 
+// Predefined Ranges
+.rs-picker-date-predefined {
+  height: 325px;
+  border-right: 1px solid var(--rs-border-primary);
+  padding: 4px 0;
+
+  .rs-btn {
+    display: block;
+  }
+}
+
 // Calendar in DatePicker popup
 .rs-picker-menu {
   @calendar-width: (

package/Table/styles/index.less

@@ -60,13 +60,6 @@
     box-shadow: none;
   }
 
-  // Added transition for hover
-  &-row,
-  &-cell-group,
-  &-cell {
-    transition: background-color 0.3s linear;
-  }
-
   &-hover &-row:not(&-row-header):hover,
   &-hover &-row:hover &-cell-group,
   &-hover &-row:hover &-cell {
@@ -215,6 +208,18 @@
     }
   }
 
+  &-cell-full-text {
+    &:hover {
+      z-index: 1 !important;
+      width: auto !important;
+      box-shadow: inset @table-cell-hover-color 0px 0px 2px;
+
+      .rs-table-cell-content {
+        width: auto !important;
+      }
+    }
+  }
+
   &-cell-header-sortable &-cell-content {
     cursor: pointer;
   }

package/cjs/Calendar/Calendar.js

@@ -100,7 +100,7 @@ var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     renderCell: customRenderCell,
     onMoveForward: handleChange,
     onMoveBackward: handleChange,
-    onChangePageDate: handleChange,
+    onChangeMonth: handleChange,
     onSelect: handleSelect
   }));
 });

package/cjs/Calendar/CalendarContainer.d.ts

@@ -39,9 +39,9 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     /** Custom locale */
     locale: CalendarLocale;
     /** Callback after the date has changed */
-    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    onChangeMonth?: (nextPageDate: Date, event: React.MouseEvent) => void;
     /** Callback after the time has changed */
-    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    onChangeTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
     /** Callback after mouse enter other date cell */
     onMouseMove?: (date: Date) => void;
     /** Switch to the callback triggered after the previous month. */

package/cjs/Calendar/CalendarContainer.js

@@ -53,8 +53,8 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       limitEndYear = props.limitEndYear,
       locale = props.locale,
-      onChangePageDate = props.onChangePageDate,
-      onChangePageTime = props.onChangePageTime,
+      onChangeMonth = props.onChangeMonth,
+      onChangeTime = props.onChangeTime,
       onMouseMove = props.onMouseMove,
       onMoveBackward = props.onMoveBackward,
       onMoveForward = props.onMoveForward,
@@ -69,7 +69,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       showMeridian = props.showMeridian,
       showWeekNumbers = props.showWeekNumbers,
       inline = props.inline,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangePageDate", "onChangePageTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "inSameMonth", "isoWeek", "limitEndYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "renderCell", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -141,10 +141,10 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = (0, _pick.default)(rest, _dateUtils.calendarOnlyProps);
-  var handleChangePageDate = (0, _react.useCallback)(function (date, event) {
+  var handleChangeMonth = (0, _react.useCallback)(function (date, event) {
     reset();
-    onChangePageDate === null || onChangePageDate === void 0 ? void 0 : onChangePageDate(date, event);
-  }, [onChangePageDate, reset]);
+    onChangeMonth === null || onChangeMonth === void 0 ? void 0 : onChangeMonth(date, event);
+  }, [onChangeMonth, reset]);
   var contextValue = (0, _react.useMemo)(function () {
     return {
       date: calendarDate,
@@ -155,15 +155,15 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
       inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
       isoWeek: isoWeek,
       locale: locale,
-      onChangePageDate: handleChangePageDate,
-      onChangePageTime: onChangePageTime,
+      onChangeMonth: handleChangeMonth,
+      onChangeTime: onChangeTime,
       onMouseMove: onMouseMove,
       onSelect: onSelect,
       renderCell: renderCell,
       showWeekNumbers: showWeekNumbers,
       inline: inline
     };
-  }, [calendarDate, dateRange, format, handleChangePageDate, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
+  }, [calendarDate, dateRange, format, handleChangeMonth, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangeTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
   return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, (0, _dateUtils.omitHideDisabledProps)(rest), {
@@ -214,8 +214,8 @@ CalendarContainer.propTypes = {
   isoWeek: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
   locale: _propTypes.default.object,
-  onChangePageDate: _propTypes.default.func,
-  onChangePageTime: _propTypes.default.func,
+  onChangeMonth: _propTypes.default.func,
+  onChangeTime: _propTypes.default.func,
   onMoveBackward: _propTypes.default.func,
   onMoveForward: _propTypes.default.func,
   onSelect: _propTypes.default.func,

package/cjs/Calendar/MonthDropdownItem.js

@@ -36,7 +36,7 @@ var MonthDropdownItem = /*#__PURE__*/_react.default.forwardRef(function (props,
 
   var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
       date = _useCalendarContext.date,
-      onSelect = _useCalendarContext.onChangePageDate;
+      onSelect = _useCalendarContext.onChangeMonth;
 
   var handleClick = (0, _react.useCallback)(function (event) {
     if (disabled) {

package/cjs/Calendar/TimeDropdown.js

@@ -125,7 +125,7 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       locale = _useCalendarContext.locale,
       format = _useCalendarContext.format,
       date = _useCalendarContext.date,
-      onSelect = _useCalendarContext.onChangePageTime;
+      onSelect = _useCalendarContext.onChangeTime;
 
   var rowRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {

package/cjs/Calendar/types.d.ts

@@ -8,8 +8,8 @@ export interface CalendarInnerContextValue {
     hoverRangeValue?: [Date, Date];
     inSameMonth?: (date: Date) => boolean;
     isoWeek: boolean;
-    onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
-    onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    onChangeMonth?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    onChangeTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
     onSelect?: (date: Date, event: React.MouseEvent) => void;
     renderCell?: (date: Date) => React.ReactNode;

package/cjs/DatePicker/DatePicker.js

@@ -31,6 +31,10 @@ var _useCalendarDate2 = _interopRequireDefault(require("../Calendar/useCalendarD
 
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 
+var _Stack = _interopRequireDefault(require("../Stack"));
+
+var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
+
 var _utils = require("../utils");
 
 var _Picker = require("../Picker");
@@ -154,7 +158,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    *  A callback triggered when the time on the calendar changes.
    */
 
-  var handleChangePageTime = (0, _react.useCallback)(function (nextPageTime) {
+  var handleChangeTime = (0, _react.useCallback)(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   }, [handleDateChange, setCalendarDate]);
@@ -255,7 +259,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    *  A callback triggered when the date on the calendar changes.
    */
 
-  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate, event) {
+  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate); // Show only the calendar month panel. formatStr = 'yyyy-MM'
 
@@ -360,11 +364,18 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelect: handleSelect,
     onToggleMonthDropdown: onToggleMonthDropdown,
     onToggleTimeDropdown: onToggleTimeDropdown,
-    onChangePageDate: handleChangePageDate,
-    onChangePageTime: handleChangePageTime,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: handleChangeTime,
     onToggleMeridian: handleToggleMeridian
   }));
 
+  var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+  })) || [];
+  var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+    return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+  })) || [];
+
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
         top = positionProps.top,
@@ -380,16 +391,27 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       style: styles,
       target: triggerRef
-    }, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
+      alignItems: "flex-start"
+    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+      direction: "column",
+      spacing: 0,
+      className: prefix('date-predefined'),
+      ranges: sideRanges,
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledToolbarHandle,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
-      ranges: ranges,
+      ranges: bottomRanges,
       calendarDate: calendarDate,
       disabledOkBtn: disabledToolbarHandle,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
-    }));
+    }))));
   };
 
   var hasValue = !!value;

package/cjs/DatePicker/types.d.ts

@@ -4,6 +4,7 @@ export interface RangeType<T> {
     label: ReactNode;
     closeOverlay?: boolean;
     value: T | ((value: T) => T);
+    placement?: 'bottom' | 'left';
 }
 export interface InnerRange<T> extends Omit<RangeType<T>, 'value'> {
     value: T;

package/cjs/DateRangePicker/Calendar.d.ts

@@ -14,11 +14,11 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     isoWeek?: boolean;
     limitEndYear?: number;
     locale?: DatePickerLocale;
-    onChangeCalendarDate?: (index: number, date: Date) => void;
+    onChangeCalendarMonth?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
     onToggleMeridian: (index: number, event: React.MouseEvent) => void;
+    onSelect?: (index: number, date: Date, event: React.SyntheticEvent) => void;
     onMouseMove?: (date: Date) => void;
-    onSelect?: (date: Date, event: React.SyntheticEvent) => void;
     showWeekNumbers?: boolean;
     value?: [] | [Date] | [Date, Date];
 }

package/cjs/DateRangePicker/Calendar.js

@@ -32,22 +32,26 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$index = props.index,
       index = _props$index === void 0 ? 0 : _props$index,
       limitEndYear = props.limitEndYear,
-      onChangeCalendarDate = props.onChangeCalendarDate,
+      onChangeCalendarMonth = props.onChangeCalendarMonth,
       onChangeCalendarTime = props.onChangeCalendarTime,
       onToggleMeridian = props.onToggleMeridian,
+      onSelect = props.onSelect,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
   var onMoveForward = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
   var onMoveBackward = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
-  var handleChangePageDate = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(index, nextPageDate);
-  }, [index, onChangeCalendarDate]);
-  var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
+  var handleSelect = (0, _react.useCallback)(function (date, event) {
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
+  }, [index, onSelect]);
+  var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate) {
+    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
+  }, [index, onChangeCalendarMonth]);
+  var handleChangeTime = (0, _react.useCallback)(function (nextPageDate) {
     onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
   var handleToggleMeridian = (0, _react.useCallback)(function (event) {
@@ -75,11 +79,12 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     inSameMonth: inSameMonth,
     index: index,
     limitEndYear: limitEndYear,
-    onChangePageDate: handleChangePageDate,
-    onChangePageTime: handleChangePageTime,
+    onChangeMonth: handleChangeMonth,
+    onChangeTime: handleChangeTime,
     onMoveBackward: handleMoveBackward,
     onMoveForward: handleMoveForward,
     onToggleMeridian: handleToggleMeridian,
+    onSelect: handleSelect,
     calendarDate: getCalendarDate(),
     ref: ref
   }));
@@ -98,7 +103,7 @@ Calendar.propTypes = {
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   onMouseMove: _propTypes.default.func,
-  onChangeCalendarDate: _propTypes.default.func
+  onChangeCalendarMonth: _propTypes.default.func
 };
 var _default = Calendar;
 exports.default = _default;

package/cjs/DateRangePicker/DateRangePicker.js

@@ -144,8 +144,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
-  var _useState3 = (0, _react.useState)((0, _utils2.getCalendarDate)({
-    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
+  var _useState3 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
+    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
       calendarDate = _useState3[0],
       setCalendarDate = _useState3[1];
@@ -161,37 +161,47 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
 
   var selectRangeValueRef = (0, _react.useRef)(null);
+  /**
+   * Get the time on the calendar.
+   */
+
+  var getCalendarDatetime = (0, _react.useCallback)(function (calendarKey) {
+    var index = calendarKey === 'start' ? 0 : 1;
+    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);
+  }, [calendarDate, defaultCalendarValue]);
   /**
    * Call this function to update the calendar panel rendering benchmark value.
    * If params `value` is not passed, it defaults to [new Date(), addMonth(new Date(), 1)].
    */
 
-  var updateCalendarDateRange = (0, _react.useCallback)(function (selectedDate, calendarKey) {
-    var nextValue = selectedDate;
-    var shouldRenderTime = _utils.DateUtils.shouldRenderTime,
-        getHours = _utils.DateUtils.getHours,
-        getMinutes = _utils.DateUtils.getMinutes,
-        getSeconds = _utils.DateUtils.getSeconds,
-        set = _utils.DateUtils.set;
-
-    if (shouldRenderTime(formatStr) && calendarKey === undefined && (selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate.length) === 1) {
-      var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[1]);
-      var _startDate = selectedDate[0]; // When updating the start date, the time of the end date should keep the time set by the user by default.
-
-      var _endDate = set((0, _dateUtils.addMonths)(_startDate, 1), {
-        hours: getHours(calendarEndDate),
-        minutes: getMinutes(calendarEndDate),
-        seconds: getSeconds(calendarEndDate)
+  var updateCalendarDateRange = (0, _react.useCallback)(function (_ref3) {
+    var dateRange = _ref3.dateRange,
+        calendarKey = _ref3.calendarKey,
+        eventName = _ref3.eventName;
+    var nextValue = dateRange; // The time should remain the same when the dates in the date range are changed.
+
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
+      var _startDate = (0, _dateUtils.copyTime)({
+        from: getCalendarDatetime('start'),
+        to: dateRange[0]
+      });
+
+      var _endDate = (0, _dateUtils.copyTime)({
+        from: getCalendarDatetime('end'),
+        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]
       });
 
       nextValue = [_startDate, _endDate];
+    } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
+      // Make the calendar render the value of defaultCalendarValue after clearing the value.
+      nextValue = defaultCalendarValue;
     }
 
-    setCalendarDate((0, _utils2.getCalendarDate)({
+    setCalendarDate((0, _utils2.getSafeCalendarDate)({
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
+  }, [formatStr, defaultCalendarValue, getCalendarDatetime]); // if valueProp changed then update selectValue/hoverValue
 
   (0, _react.useEffect)(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -269,8 +279,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return null;
     }
 
-    if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
-      hoverValues.reverse();
+    if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {
+      hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);
     }
 
     return hoverValues;
@@ -327,7 +337,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * Callback for selecting a date cell in the calendar grid
    */
 
-  var handleSelectDate = (0, _react.useCallback)(function (date, event) {
+  var handleSelectDate = (0, _react.useCallback)(function (index, date, event) {
+    var calendarKey = index === 0 ? 'start' : 'end';
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
     var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
@@ -355,19 +366,38 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
-    } // If user have completed the selection, then sort
+    }
 
+    if (nextSelectDates.length === 2) {
+      // If user have completed the selection, then sort the selected dates.
+      if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {
+        nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);
+      }
+
+      if ((0, _dateUtils.shouldRenderTime)(formatStr)) {
+        nextSelectDates = [(0, _dateUtils.copyTime)({
+          from: getCalendarDatetime('start'),
+          to: nextSelectDates[0]
+        }), (0, _dateUtils.copyTime)({
+          from: getCalendarDatetime('end'),
+          to: nextSelectDates[1]
+        })];
+      }
 
-    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {
-      nextSelectDates.reverse();
+      setHoverDateRange(nextSelectDates);
+    } else {
+      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
-    updateCalendarDateRange(nextSelectDates);
+    updateCalendarDateRange({
+      dateRange: nextSelectDates,
+      calendarKey: calendarKey,
+      eventName: 'changeDate'
+    });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -379,41 +409,48 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var updateSingleCalendarDate = (0, _react.useCallback)(function (index, date) {
+  var updateSingleCalendarMonth = (0, _react.useCallback)(function (index, date) {
+    var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
-    updateCalendarDateRange(nextCalendarDate, index === 0 ? 'start' : 'end');
+    updateCalendarDateRange({
+      dateRange: nextCalendarDate,
+      calendarKey: calendarKey,
+      eventName: 'changeMonth'
+    });
   }, [calendarDate, updateCalendarDateRange]);
   var updateSingleCalendarTime = (0, _react.useCallback)(function (index, date) {
+    var calendarKey = index === 0 ? 'start' : 'end';
+    var nextCalendarDate = Array.from(calendarDate);
+    nextCalendarDate[index] = date;
+    updateCalendarDateRange({
+      dateRange: nextCalendarDate,
+      calendarKey: calendarKey,
+      eventName: 'changeTime'
+    });
     setSelectedDates(function (prev) {
-      var next = [].concat(prev);
-      var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day
+      var next = [].concat(prev); // if next[index] is not empty, only update the time after aligning the year, month and day
 
-      if (next[index]) {
-        clonedDate.setFullYear(next[index].getFullYear(), next[index].getMonth(), next[index].getDate());
-      }
-
-      next[index] = clonedDate;
+      next[index] = next[index] ? (0, _dateUtils.copyTime)({
+        from: date,
+        to: next[index]
+      }) : new Date(date.valueOf());
       return next;
     });
-    updateSingleCalendarDate(index, date);
-  }, [updateSingleCalendarDate]);
+  }, [calendarDate, updateCalendarDateRange]);
   /**
    * The callback triggered when PM/AM is switched.
    */
 
   var handleToggleMeridian = (0, _react.useCallback)(function (index) {
-    var next = Array.from(calendarDate);
-    var clonedDate = new Date(next[index].valueOf());
-
-    var hours = _utils.DateUtils.getHours(clonedDate);
-
-    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    next[index] = _utils.DateUtils.setHours(clonedDate, nextHours);
-    setCalendarDate(next); // If the value already exists, update the value again.
+    var nextCalendarDate = Array.from(calendarDate);
+    nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);
+    setCalendarDate(nextCalendarDate); // If the value already exists, update the value again.
 
     if (selectedDates.length === 2) {
-      setSelectedDates(next);
+      var nextSelectedDates = Array.from(selectedDates);
+      nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);
+      setSelectedDates(nextSelectedDates);
     }
   }, [calendarDate, selectedDates]);
   /**
@@ -425,7 +462,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       closeOverlay = false;
     }
 
-    updateCalendarDateRange(value);
+    updateCalendarDateRange({
+      dateRange: value
+    });
 
     if (closeOverlay) {
       handleValueUpdate(event, value, closeOverlay);
@@ -441,7 +480,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
   }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    updateCalendarDateRange(null);
+    updateCalendarDateRange({
+      dateRange: null
+    });
     handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDateRange]);
   /**
@@ -478,7 +519,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     setHoverDateRange(selectValue);
     setSelectedDates(selectValue);
-    updateCalendarDateRange(selectValue);
+    updateCalendarDateRange({
+      dateRange: selectValue
+    });
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [character, rangeFormatStr, updateCalendarDateRange]);
   /**
@@ -501,13 +544,15 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextCalendarDate = [_startDate2, (0, _dateUtils.isSameMonth)(_startDate2, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
       // Reset the date on the calendar to the default date
-      nextCalendarDate = (0, _utils2.getCalendarDate)({
+      nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
         value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
     }
 
     setSelectedDates(value !== null && value !== void 0 ? value : []);
-    updateCalendarDateRange(nextCalendarDate);
+    updateCalendarDateRange({
+      dateRange: nextCalendarDate
+    });
   }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);
   var handleEntered = (0, _react.useCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
@@ -594,7 +639,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
       showMeridian: showMeridian,
-      onChangeCalendarDate: updateSingleCalendarDate,
+      onChangeCalendarMonth: updateSingleCalendarMonth,
       onChangeCalendarTime: updateSingleCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectDate,

package/cjs/DateRangePicker/utils.d.ts

@@ -1,5 +1,5 @@
 import { DateRange } from './types';
-export declare function getCalendarDate({ value, calendarKey }: {
+export declare function getSafeCalendarDate({ value, calendarKey }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
 }): DateRange;