rsuite 5.60.0 → 5.60.1

package/esm/DateRangePicker/DateRangePicker.js

@@ -102,7 +102,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix;
   var _useCustom = useCustom('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    formatDate = _useCustom.formatDate; // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  var calendarGap = showOneCalendar ? 0 : 1;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
@@ -129,7 +130,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState2 = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
     selectedDates = _useState2[0],
     setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-  var _useState3 = useState(null),
+  var _useState3 = useState(value),
     hoverDateRange = _useState3[0],
     setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = useState(getSafeCalendarDate({
@@ -165,14 +166,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime' && eventName !== 'shortcutSelection') {
+    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       var _startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
       var _endDate = copyTime({
         from: getCalendarDatetime('end'),
-        to: dateRange.length === 1 ? addMonths(_startDate, 1) : dateRange[1]
+        to: dateRange.length === 1 ? addMonths(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -182,7 +183,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
       calendarKey: calendarKey,
-      allowAameMonth: onlyShowMonth
+      // When only the month is displayed and only one calendar is displayed,
+      // there is no need to add a month and two calendar panels are allowed to display the same month
+      allowSameMonth: onlyShowMonth || showOneCalendar
     });
     setCalendarDate(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
@@ -331,6 +334,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
+    if (isSelectedIdle) {
+      setActiveCalendarKey('end');
+    } else {
+      setActiveCalendarKey('start');
+    }
     setSelectedDates(nextSelectDates);
     setCalendarDateRange({
       dateRange: nextSelectDates,
@@ -402,7 +410,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, 1) : endData];
+      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = getSafeCalendarDate({
@@ -731,11 +739,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    onChange: handleInputChange,
     readOnly: readOnly || !editable || loading,
     plaintext: plaintext,
-    onKeyDown: handleInputKeyDown,
-    htmlSize: getInputHtmlSize()
+    htmlSize: getInputHtmlSize(),
+    onChange: handleInputChange,
+    onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
     loading: loading,
     caretAs: caretAs,

package/esm/DateRangePicker/utils.d.ts

@@ -1,8 +1,8 @@
 import { DateRange } from './types';
-export declare function getSafeCalendarDate({ value, calendarKey, allowAameMonth }: {
+export declare function getSafeCalendarDate({ value, calendarKey, allowSameMonth }: {
     value: [] | [Date] | [Date, Date] | null;
     calendarKey?: 'start' | 'end';
-    allowAameMonth?: boolean;
+    allowSameMonth?: boolean;
 }): DateRange;
 export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
 export declare const getMonthHoverRange: (date: Date) => DateRange;

package/esm/DateRangePicker/utils.js

@@ -5,10 +5,10 @@ export function getSafeCalendarDate(_ref) {
   var value = _ref.value,
     _ref$calendarKey = _ref.calendarKey,
     calendarKey = _ref$calendarKey === void 0 ? 'start' : _ref$calendarKey,
-    allowAameMonth = _ref.allowAameMonth;
+    allowSameMonth = _ref.allowSameMonth;
   // Update calendarDate if the value is not null
   value = (_value = value) !== null && _value !== void 0 ? _value : [];
-  var gap = allowAameMonth ? 0 : 1;
+  var gap = allowSameMonth ? 0 : 1;
   if (value[0] && value[1]) {
     var diffMonth = differenceInCalendarMonths(value[1], value[0]);
     if (calendarKey === 'start') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.60.0",
+  "version": "5.60.1",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/variables.less

@@ -774,7 +774,6 @@
 @date-range-picker-header-padding-vertical:       8px;
 @date-range-picker-header-font-size:              @font-size-base;
 @date-range-picker-header-line-height:            @line-height-base;
-@date-range-picker-calendar-default-width:        255px;
 
 // Input Picker