rsuite 5.60.0 → 5.60.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [5.60.1](https://github.com/rsuite/rsuite/compare/v5.60.0...v5.60.1) (2024-05-03)
+
+
+### Bug Fixes
+
+* **DateRangePicker:** fix not auto switching to the end calendar when only one calendar is displayed ([#3781](https://github.com/rsuite/rsuite/issues/3781)) ([5322f9c](https://github.com/rsuite/rsuite/commit/5322f9cc747750b865e8184dcab36609e906b274))
+* **DateRangePicker:** fix not updating time on calendar when typing to change time ([#3777](https://github.com/rsuite/rsuite/issues/3777)) ([d1a7350](https://github.com/rsuite/rsuite/commit/d1a73502908026ceb20b5f2f49709b4dd03f334a))
+* **toggle:** block pointer events when disabled ([#3774](https://github.com/rsuite/rsuite/issues/3774)) ([d833a0a](https://github.com/rsuite/rsuite/commit/d833a0ab1c759b568bba6d87d697687e3ca7cbed))
+* **Toggle:** fix the height problem of the switch element ([#3780](https://github.com/rsuite/rsuite/issues/3780)) ([ff1570c](https://github.com/rsuite/rsuite/commit/ff1570c7d8776f2a120f1c048237725597157143))
+
+
+
 # [5.60.0](https://github.com/rsuite/rsuite/compare/v5.59.2...v5.60.0) (2024-04-26)
 
 
@@ -5,13 +17,12 @@
 
 * **Fade:** fix Picker not working in Drawer without backdrop ([#3759](https://github.com/rsuite/rsuite/issues/3759)) ([930a321](https://github.com/rsuite/rsuite/commit/930a3212b58202f4d0bf05a8bb191195944d589c))
 * **TagPicker:** fix misalignment of large size tag with textbox ([#3755](https://github.com/rsuite/rsuite/issues/3755)) ([2bcd793](https://github.com/rsuite/rsuite/commit/2bcd793cd7cf1b181643125fe92f4ffb0e18f771))
+* **TagPicker:** fix text flicker when entering ([#3758](https://github.com/rsuite/rsuite/issues/3758)) ([f7058d1](https://github.com/rsuite/rsuite/commit/f7058d1e9234e43c9f8d7884636a09d83f40fcb9))
 
 
 ### Features
 
 * **Form:** add support for onSubmit and onReset ([#3750](https://github.com/rsuite/rsuite/issues/3750)) ([d9b747e](https://github.com/rsuite/rsuite/commit/d9b747e97f3aaaa1d0b047ab81150d2a01764ed1))
-* **TagPicker:** fix text flicker when entering ([#3758](https://github.com/rsuite/rsuite/issues/3758)) ([f7058d1](https://github.com/rsuite/rsuite/commit/f7058d1e9234e43c9f8d7884636a09d83f40fcb9))
-
 
 
 ## [5.59.2](https://github.com/rsuite/rsuite/compare/v5.59.1...v5.59.2) (2024-04-19)

package/DateRangePicker/styles/index.css

@@ -4017,9 +4017,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-  max-width: 255px;
-}
 .rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
@@ -4058,6 +4055,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   bottom: -1px;
   border-bottom: 2px solid #3498ff;
   left: 0;
+  -webkit-transition: left 0.3s;
+  transition: left 0.3s;
 }
 .rs-picker-daterange-header.rs-picker-tab-active-end::after {
   left: 50%;

package/DateRangePicker/styles/index.less

@@ -62,11 +62,11 @@
     }
   }
 
-  .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-    max-width: @date-range-picker-calendar-default-width;
-
-    &-ranges {
-      width: 190px;
+  .rs-picker-daterange-panel-show-one-calendar {
+    .rs-picker-toolbar {
+      &-ranges {
+        width: 190px;
+      }
     }
   }
 
@@ -105,6 +105,7 @@
       bottom: -1px;
       border-bottom: 2px solid #3498ff;
       left: 0;
+      transition: left 0.3s;
     }
   }
 

package/Toggle/styles/index.css

@@ -114,6 +114,7 @@
 }
 .rs-toggle {
   position: relative;
+  display: inline-block;
 }
 .rs-toggle .rs-toggle-loader {
   width: 18px;
@@ -239,7 +240,7 @@
   -webkit-box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
           box-shadow: inset 0 0 0 1px #fff;
           box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-toggle-checked .rs-toggle-presentation {
   background-color: #3498ff;

package/Toggle/styles/index.less

@@ -10,6 +10,7 @@
 // todo: Consider renaming as .rs-toggle
 .rs-toggle {
   position: relative;
+  display: inline-block;
 
   // Default size is middle.
   .toggle(md);
@@ -70,7 +71,7 @@
     background-color: var(--rs-toggle-disabled-bg);
     color: var(--rs-toggle-disabled-thumb);
     box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-    cursor: not-allowed;
+    pointer-events: none;
   }
 
   // checked state

package/cjs/DateRangePicker/DateRangePicker.js

@@ -108,7 +108,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     prefix = _useClassNames.prefix;
   var _useCustom = (0, _utils.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 = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
@@ -135,7 +136,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var _useState2 = (0, _react.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 = (0, _react.useState)(null),
+  var _useState3 = (0, _react.useState)(value),
     hoverDateRange = _useState3[0],
     setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
@@ -171,14 +172,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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' && eventName !== 'shortcutSelection') {
+    if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       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]
+        to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, calendarGap) : dateRange[1]
       });
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
@@ -188,7 +189,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var nextCalendarDate = (0, _utils2.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') {
@@ -337,6 +340,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
+    if (isSelectedIdle) {
+      setActiveCalendarKey('end');
+    } else {
+      setActiveCalendarKey('start');
+    }
     setSelectedDates(nextSelectDates);
     setCalendarDateRange({
       dateRange: nextSelectDates,
@@ -408,7 +416,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (value && value.length) {
       var _startDate3 = value[0],
         endData = value[1];
-      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
+      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = (0, _utils2.getSafeCalendarDate)({
@@ -737,11 +745,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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.default.createElement(_Picker.PickerIndicator, {
     loading: loading,
     caretAs: caretAs,

package/cjs/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/cjs/DateRangePicker/utils.js

@@ -10,10 +10,10 @@ 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 = (0, _dateUtils.differenceInCalendarMonths)(value[1], value[0]);
     if (calendarKey === 'start') {

package/dist/rsuite-no-reset-rtl.css

@@ -4662,9 +4662,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
 .rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
-  max-width: 255px;
-}
 .rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
@@ -4703,6 +4700,8 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   bottom: -1px;
   border-bottom: 2px solid #3498ff;
   right: 0;
+  -webkit-transition: right 0.3s;
+  transition: right 0.3s;
 }
 .rs-picker-daterange-header.rs-picker-tab-active-end::after {
   right: 50%;
@@ -14471,6 +14470,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 }
 .rs-toggle {
   position: relative;
+  display: inline-block;
 }
 .rs-toggle .rs-toggle-loader {
   width: 18px;
@@ -14596,7 +14596,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   -webkit-box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
           box-shadow: inset 0 0 0 1px #fff;
           box-shadow: inset 0 0 0 1px var(--rs-toggle-disabled-thumb);
-  cursor: not-allowed;
+  pointer-events: none;
 }
 .rs-toggle-checked .rs-toggle-presentation {
   background-color: #3498ff;