rsuite 5.21.0 → 5.22.0

package/esm/DatePicker/DatePicker.js

@@ -10,6 +10,8 @@ import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
 import useCalendarDate from '../Calendar/useCalendarDate';
 import Toolbar from './Toolbar';
+import Stack from '../Stack';
+import PredefinedRanges from './PredefinedRanges';
 import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
@@ -334,6 +336,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChangePageTime: handleChangePageTime,
     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,
@@ -350,16 +358,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ref: mergeRefs(overlayRef, speakerRef),
       style: styles,
       target: triggerRef
-    }, calendar, /*#__PURE__*/React.createElement(Toolbar, {
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "flex-start"
+    }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
+      direction: "column",
+      spacing: 0,
+      className: prefix('date-predefined'),
+      ranges: sideRanges,
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledToolbarHandle,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, calendar, /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
-      ranges: ranges,
+      ranges: bottomRanges,
       calendarDate: calendarDate,
       disabledOkBtn: disabledToolbarHandle,
       disabledShortcut: disabledToolbarHandle,
       onClickShortcut: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
-    }));
+    }))));
   };
 
   var hasValue = !!value;

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

@@ -133,6 +133,22 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 
   var selectRangeValueRef = useRef(null);
+  /**
+   * Get the time on the second calendar as the end of the date range.
+   */
+
+  var getCalendarEndDatetime = useCallback(function (date) {
+    var getHours = DateUtils.getHours,
+        getMinutes = DateUtils.getMinutes,
+        getSeconds = DateUtils.getSeconds,
+        set = 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)].
@@ -140,21 +156,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var updateCalendarDateRange = useCallback(function (selectedDate, calendarKey) {
     var nextValue = selectedDate;
-    var shouldRenderTime = DateUtils.shouldRenderTime,
-        getHours = DateUtils.getHours,
-        getMinutes = DateUtils.getMinutes,
-        getSeconds = DateUtils.getSeconds,
-        set = DateUtils.set;
+    var shouldRenderTime = 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(addMonths(_startDate, 1), {
-        hours: getHours(calendarEndDate),
-        minutes: getMinutes(calendarEndDate),
-        seconds: getSeconds(calendarEndDate)
-      });
+      var _endDate = getCalendarEndDatetime(addMonths(_startDate, 1));
 
       nextValue = [_startDate, _endDate];
     }
@@ -163,7 +170,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [calendarDate, defaultCalendarValue, formatStr]); // if valueProp changed then update selectValue/hoverValue
+  }, [getCalendarEndDatetime, formatStr]); // if valueProp changed then update selectValue/hoverValue
 
   useEffect(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
@@ -327,19 +334,31 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
-    } // If user have completed the selection, then sort
+    }
 
+    var shouldRenderTime = DateUtils.shouldRenderTime,
+        isAfter = DateUtils.isAfter;
 
-    if (nextSelectDates.length === 2 && 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.21.0",
+  "version": "5.22.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -24,7 +24,7 @@
     "url": "git@github.com:rsuite/rsuite.git"
   },
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
+    "@babel/runtime": "^7.19.4",
     "@juggle/resize-observer": "^3.4.0",
     "@rsuite/icons": "^1.0.2",
     "@types/chai": "^4.3.3",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.8.1",
     "react-window": "^1.8.7",
-    "rsuite-table": "^5.7.2",
+    "rsuite-table": "^5.8.0",
     "schema-typed": "^2.0.3"
   },
   "peerDependencies": {

package/styles/variables.less

@@ -224,6 +224,7 @@
 @table-content-padding-horizontal:      10px; // @deprecated use @table-cell-padding-x instead
 @table-cell-padding-y:                  @table-body-content-padding-vertical;
 @table-cell-padding-x:                  @table-content-padding-horizontal;
+@table-cell-hover-color:                var(--rs-primary-500);
 
 @table-scrollbar-timing-duration:       0.1s;
 @table-scrollbar-width:                 10px;