rsuite 5.21.0 → 5.22.0

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/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");
@@ -365,6 +369,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     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/DateRangePicker.js

@@ -161,6 +161,22 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
 
   var selectRangeValueRef = (0, _react.useRef)(null);
+  /**
+   * Get the time on the second calendar as the end of the date range.
+   */
+
+  var getCalendarEndDatetime = (0, _react.useCallback)(function (date) {
+    var getHours = _utils.DateUtils.getHours,
+        getMinutes = _utils.DateUtils.getMinutes,
+        getSeconds = _utils.DateUtils.getSeconds,
+        set = _utils.DateUtils.set;
+    var calendarEndDate = (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[1]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[1]);
+    return set(date, {
+      hours: getHours(calendarEndDate),
+      minutes: getMinutes(calendarEndDate),
+      seconds: getSeconds(calendarEndDate)
+    });
+  }, [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)].
@@ -168,21 +184,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   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;
+    var shouldRenderTime = _utils.DateUtils.shouldRenderTime;
 
-    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.
+    if (shouldRenderTime(formatStr) && calendarKey === undefined && selectedDate !== null && selectedDate !== void 0 && selectedDate.length) {
+      var _startDate = selectedDate[0];
 
-      var _endDate = set((0, _dateUtils.addMonths)(_startDate, 1), {
-        hours: getHours(calendarEndDate),
-        minutes: getMinutes(calendarEndDate),
-        seconds: getSeconds(calendarEndDate)
-      });
+      var _endDate = getCalendarEndDatetime((0, _dateUtils.addMonths)(_startDate, 1));
 
       nextValue = [_startDate, _endDate];
     }
@@ -191,7 +198,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
+  }, [getCalendarEndDatetime, formatStr]); // if valueProp changed then update selectValue/hoverValue
 
   (0, _react.useEffect)(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -355,19 +362,31 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
-    } // If user have completed the selection, then sort
+    }
 
+    var shouldRenderTime = _utils.DateUtils.shouldRenderTime,
+        isAfter = _utils.DateUtils.isAfter;
 
-    if (nextSelectDates.length === 2 && _utils.DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {
-      nextSelectDates.reverse();
+    if (nextSelectDates.length === 2) {
+      // If user have completed the selection, then sort the selected dates.
+      if (isAfter(nextSelectDates[0], nextSelectDates[1])) {
+        nextSelectDates.reverse();
+      }
+
+      if (shouldRenderTime(formatStr)) {
+        nextSelectDates[1] = getCalendarEndDatetime(nextSelectDates[1]);
+      }
+
+      setHoverDateRange(nextSelectDates);
+    } else {
+      setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
 
-    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
     setSelectedDates(nextSelectDates);
     updateCalendarDateRange(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+  }, [formatStr, getCalendarEndDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.

package/dist/rsuite-rtl.css

@@ -4358,6 +4358,15 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-date-inline .rs-calendar {
   height: 286px;
 }
+.rs-picker-date-predefined {
+  height: 325px;
+  border-left: 1px solid #e5e5ea;
+  border-left: 1px solid var(--rs-border-primary);
+  padding: 4px 0;
+}
+.rs-picker-date-predefined .rs-btn {
+  display: block;
+}
 .rs-picker-menu .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -14277,12 +14286,6 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   -webkit-box-shadow: none;
           box-shadow: none;
 }
-.rs-table-row,
-.rs-table-cell-group,
-.rs-table-cell {
-  -webkit-transition: background-color 0.3s linear;
-  transition: background-color 0.3s linear;
-}
 .rs-table-hover .rs-table-row:not(.rs-table-row-header):hover,
 .rs-table-hover .rs-table-row:hover .rs-table-cell-group,
 .rs-table-hover .rs-table-row:hover .rs-table-cell {
@@ -14444,6 +14447,17 @@ textarea.rs-picker-menu .rs-picker-search-bar .rs-picker-search-bar-input {
   border-bottom: 1px solid #f2f2f5 !important;
   border-bottom: 1px solid var(--rs-border-secondary) !important;
 }
+.rs-table-cell-full-text:hover {
+  z-index: 1 !important;
+  width: auto !important;
+  -webkit-box-shadow: inset #3498ff 0px 0px 2px;
+  -webkit-box-shadow: inset var(--rs-primary-500) 0px 0px 2px;
+          box-shadow: inset #3498ff 0px 0px 2px;
+          box-shadow: inset var(--rs-primary-500) 0px 0px 2px;
+}
+.rs-table-cell-full-text:hover .rs-table-cell-content {
+  width: auto !important;
+}
 .rs-table-cell-header-sortable .rs-table-cell-content {
   cursor: pointer;
 }