rsuite 5.48.1 → 5.50.0

package/esm/DateRangePicker/DateRangePicker.js

@@ -1,26 +1,31 @@
 'use client';
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import IconCalendar from '@rsuite/icons/legacy/Calendar';
+var _templateObject;
+import React, { useEffect, useRef, useState, useMemo } from 'react';
 import isNil from 'lodash/isNil';
 import omit from 'lodash/omit';
 import partial from 'lodash/partial';
 import pick from 'lodash/pick';
-import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import IconCalendar from '@rsuite/icons/legacy/Calendar';
+import IconClockO from '@rsuite/icons/legacy/ClockO';
 import { FormattedDate } from '../CustomProvider';
 import Toolbar from '../DatePicker/Toolbar';
 import PredefinedRanges from '../DatePicker/PredefinedRanges';
 import Stack from '../Stack';
-import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
-import { createChainedFunction, DATERANGE_DISABLED_TARGET, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
-import { addMonths, compareAsc, isSameMonth, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, reverseDateRangeOmitTime, getReversedTimeMeridian } from '../utils/dateUtils';
+import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, onMenuKeyDown } from '../Picker';
+import { createChainedFunction, DATERANGE_DISABLED_TARGET, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps, getStringLength } from '../utils';
+import { addMonths, compareAsc, isValid, isBefore, isSameDay, addDays, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, isSameMonth, shouldRenderMonth, shouldRenderDate, reverseDateRangeOmitTime, getReversedTimeMeridian, calendarOnlyProps, shouldOnlyRenderTime } from '../utils/dateUtils';
 import Calendar from './Calendar';
 import * as disabledDateUtils from './disabledDateUtils';
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
 import { deprecatePropTypeNew } from '../utils/deprecatePropType';
 import DateRangePickerContext from './DateRangePickerContext';
+import DateRangeInput from '../DateRangeInput';
+import InputGroup from '../InputGroup';
+import usePickerRef from '../Picker/usePickerRef';
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -43,18 +48,22 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     character = _props$character === void 0 ? ' ~ ' : _props$character,
     defaultCalendarValue = props.defaultCalendarValue,
     defaultValue = props.defaultValue,
+    plaintext = props.plaintext,
     disabled = props.disabled,
     DEPRECATED_disabledDateProp = props.disabledDate,
     shouldDisableDate = props.shouldDisableDate,
     _props$format = props.format,
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     hoverRange = props.hoverRange,
+    idProp = props.id,
     _props$isoWeek = props.isoWeek,
     isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
     _props$limitEndYear = props.limitEndYear,
     limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
     limitStartYear = props.limitStartYear,
     overrideLocale = props.locale,
+    loading = props.loading,
+    label = props.label,
     menuClassName = props.menuClassName,
     menuStyle = props.menuStyle,
     oneTap = props.oneTap,
@@ -63,14 +72,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
     ranges = props.ranges,
-    renderValue = props.renderValue,
+    readOnly = props.readOnly,
     _props$showOneCalenda = props.showOneCalendar,
     showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
     showWeekNumbers = props.showWeekNumbers,
     showMeridian = props.showMeridian,
     style = props.style,
-    toggleAs = props.toggleAs,
-    caretAs = props.caretAs,
+    size = props.size,
+    caretAsProp = props.caretAs,
     valueProp = props.value,
     onChange = props.onChange,
     onClean = props.onClean,
@@ -83,18 +92,25 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
+    restProps = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "size", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
+  var id = useUniqueId(classPrefix + "-", idProp);
+  var _usePickerRef = usePickerRef(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay;
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var _useCustom = useCustom('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate,
-    parseDate = _useCustom.parseDate;
+    formatDate = _useCustom.formatDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
-    setValue = _useControlled[1];
+    setValue = _useControlled[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
+
   /**
    * Whether to complete the selection.
    * Everytime selection will change this value. If the value is false, it means that the selection has not been completed.
@@ -123,9 +139,6 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })),
     calendarDate = _useState4[0],
     setCalendarDate = _useState4[1];
-  var _useState5 = useState(),
-    inputState = _useState5[0],
-    setInputState = _useState5[1];
   /**
    * When hoverRange is set, `selectValue` will be updated during the hover process,
    * which will cause the `selectValue` to be updated after the first click,
@@ -136,16 +149,16 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Get the time on the calendar.
    */
-  var getCalendarDatetime = useCallback(function (calendarKey) {
+  var getCalendarDatetime = function getCalendarDatetime(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 = useCallback(function (_ref3) {
+  var setCalendarDateRange = function setCalendarDateRange(_ref3) {
     var dateRange = _ref3.dateRange,
       calendarKey = _ref3.calendarKey,
       eventName = _ref3.eventName;
@@ -166,44 +179,29 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       // Make the calendar render the value of defaultCalendarValue after clearing the value.
       nextValue = defaultCalendarValue;
     }
-    setCalendarDate(getSafeCalendarDate({
+    var nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
-      calendarKey: calendarKey
-    }));
-  }, [formatStr, defaultCalendarValue, getCalendarDatetime]);
+      calendarKey: calendarKey,
+      allowAameMonth: onlyShowMonth
+    });
+    setCalendarDate(nextCalendarDate);
+    if (onlyShowMonth && eventName === 'changeMonth') {
+      setSelectedDates(nextCalendarDate);
+    }
+  };
 
   // if valueProp changed then update selectValue/hoverValue
   useEffect(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
-  var _useState6 = useState(false),
-    isPickerToggleActive = _useState6[0],
-    setPickerToggleActive = _useState6[1];
-  var rootRef = useRef(null);
-  var overlayRef = useRef(null);
-  var targetRef = useRef(null);
-  var triggerRef = useRef(null);
-  var handleCloseDropdown = useCallback(function () {
-    var _triggerRef$current, _triggerRef$current$c;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : (_triggerRef$current$c = _triggerRef$current.close) === null || _triggerRef$current$c === void 0 ? void 0 : _triggerRef$current$c.call(_triggerRef$current);
-  }, []);
-  usePublicMethods(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    rootRef: rootRef
-  });
-  var getDisplayString = useCallback(function (nextValue, isPlaintext) {
+  var getDateRangeString = function getDateRangeString(nextValue) {
     var _nextValue$, _nextValue$2;
     var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;
     var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;
     if (startDate && endDate) {
       var displayValue = [startDate, endDate].sort(compareAsc);
-      if (isPlaintext) {
-        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);
-      }
-      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedDate, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedDate, {
         date: displayValue[0],
         formatStr: formatStr
       }), character, /*#__PURE__*/React.createElement(FormattedDate, {
@@ -211,13 +209,23 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         formatStr: formatStr
       }));
     }
-    return isPlaintext ? '' : placeholder || rangeFormatStr;
-  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
+    return rangeFormatStr;
+  };
+  var getInputHtmlSize = function getInputHtmlSize() {
+    var padding = 4;
+    var strings = rangeFormatStr;
+    if (value) {
+      var _startDate2 = value[0],
+        _endDate2 = value[1];
+      strings = "" + formatDate(_startDate2, formatStr) + character + formatDate(_endDate2, formatStr);
+    }
+    return getStringLength(strings) + padding;
+  };
 
   /**
    * preset hover range
    */
-  var getHoverRangeValue = useCallback(function (date) {
+  var getHoverRangeValue = function getHoverRangeValue(date) {
     function getHoverRangeFunc() {
       if (hoverRange === 'week') {
         return partial(getWeekHoverRange, isoWeek);
@@ -239,29 +247,29 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hoverValues = reverseDateRangeOmitTime(hoverValues);
     }
     return hoverValues;
-  }, [hoverRange, isoWeek]);
-  var handleValueUpdate = useCallback(function (event, nextValue, closeOverlay) {
+  };
+  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
     // If nextValue is null, it means that the user is erasing the selected dates.
     setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);
+    setValue(nextValue);
     if (!isSameRange(nextValue, value, formatStr)) {
-      setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     }
 
     // `closeOverlay` default value is `true`
     if (closeOverlay !== false) {
-      handleCloseDropdown();
+      handleClose();
     }
-  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);
+  };
 
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
    */
-  var handleMouseMove = useCallback(function (date) {
+  var handleMouseMove = useEventCallback(function (date) {
     var nextHoverDateRange = getHoverRangeValue(date);
 
     // If hasDoneSelect is false,
@@ -271,7 +279,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
       if (!isNil(nextHoverDateRange) && !isNil(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
-        if (DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
+        if (isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
           nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
         setSelectedDates(nextSelectedDates);
@@ -285,12 +293,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (!isNil(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, isSelectedIdle]);
+  });
 
   /**
    * Callback for selecting a date cell in the calendar grid
    */
-  var handleSelectDate = useCallback(function (index, date, event) {
+  var handleSelectDate = useEventCallback(function (index, date, event) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
@@ -298,7 +306,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     // in `oneTap` mode
     if (isSelectedIdle && oneTap) {
-      handleValueUpdate(event, noHoverRangeValid ? [startOfDay(date), endOfDay(date)] : hoverRangeValue);
+      setDateRange(event, noHoverRangeValid ? [startOfDay(date), endOfDay(date)] : hoverRangeValue);
       setSelectedIdle(false);
       return;
     }
@@ -340,14 +348,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
     setSelectedDates(nextSelectDates);
-    updateCalendarDateRange({
+    setCalendarDateRange({
       dateRange: nextSelectDates,
       calendarKey: calendarKey,
       eventName: 'changeDate'
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     setSelectedIdle(!isSelectedIdle);
-  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, isSelectedIdle, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+  });
 
   /**
    * If `selectValue` changed, there will be the following effects.
@@ -359,21 +367,21 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var updateSingleCalendarMonth = useCallback(function (index, date) {
+  var handleSingleCalendarMonth = useEventCallback(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
-    updateCalendarDateRange({
+    setCalendarDateRange({
       dateRange: nextCalendarDate,
       calendarKey: calendarKey,
       eventName: 'changeMonth'
     });
-  }, [calendarDate, updateCalendarDateRange]);
-  var updateSingleCalendarTime = useCallback(function (index, date) {
+  });
+  var handleSingleCalendarTime = useEventCallback(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
-    updateCalendarDateRange({
+    setCalendarDateRange({
       dateRange: nextCalendarDate,
       calendarKey: calendarKey,
       eventName: 'changeTime'
@@ -388,12 +396,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }) : new Date(date.valueOf());
       return next;
     });
-  }, [calendarDate, updateCalendarDateRange]);
+  });
 
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var handleToggleMeridian = useCallback(function (index) {
+  var handleToggleMeridian = useEventCallback(function (index) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = getReversedTimeMeridian(nextCalendarDate[index]);
     setCalendarDate(nextCalendarDate);
@@ -404,21 +412,38 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       nextSelectedDates[index] = getReversedTimeMeridian(nextSelectedDates[index]);
       setSelectedDates(nextSelectedDates);
     }
-  }, [calendarDate, selectedDates]);
+  });
+  var handleEnter = useEventCallback(function () {
+    var nextCalendarDate;
+    if (value && value.length) {
+      var _startDate3 = value[0],
+        endData = value[1];
+      nextCalendarDate = [_startDate3, isSameMonth(_startDate3, endData) ? addMonths(endData, 1) : endData];
+    } else {
+      // Reset the date on the calendar to the default date
+      nextCalendarDate = getSafeCalendarDate({
+        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
+      });
+    }
+    setSelectedDates(value !== null && value !== void 0 ? value : []);
+    setCalendarDateRange({
+      dateRange: nextCalendarDate
+    });
+  });
 
   /**
    * Toolbar operation callback function
    */
-  var handleShortcutPageDate = useCallback(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = useEventCallback(function (range, closeOverlay, event) {
     if (closeOverlay === void 0) {
       closeOverlay = false;
     }
     var value = range.value;
-    updateCalendarDateRange({
+    setCalendarDateRange({
       dateRange: value
     });
     if (closeOverlay) {
-      handleValueUpdate(event, value, closeOverlay);
+      setDateRange(event, value, closeOverlay);
     } else {
       setSelectedDates(value !== null && value !== void 0 ? value : []);
     }
@@ -426,99 +451,41 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     // End unfinished selections.
     setSelectedIdle(true);
-  }, [handleValueUpdate, onShortcutClick, updateCalendarDateRange]);
-  var handleOK = useCallback(function (event) {
-    handleValueUpdate(event, selectedDates);
+  });
+  var handleOK = useEventCallback(function (event) {
+    setDateRange(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
-  }, [handleValueUpdate, onOk, selectedDates]);
-  var handleClean = useCallback(function (event) {
-    updateCalendarDateRange({
+  });
+  var handleClean = useEventCallback(function (event) {
+    setCalendarDateRange({
       dateRange: null
     });
-    handleValueUpdate(event, null);
-  }, [handleValueUpdate, updateCalendarDateRange]);
+    setDateRange(event, null);
+    onClean === null || onClean === void 0 ? void 0 : onClean(event);
+    event.stopPropagation();
+  });
 
   /**
    * Callback after the input box value is changed.
    */
-  var handleInputChange = useCallback(function (value) {
-    setInputState('Typing');
-    var rangeValue = value.split(character);
-
-    // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
-    // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!DateUtils.isMatch(rangeValue[0], formatStr, {
-      locale: locale.dateLocale
-    }) || !DateUtils.isMatch(rangeValue[1], formatStr, {
-      locale: locale.dateLocale
-    })) {
-      setInputState('Error');
+  var handleInputChange = useEventCallback(function (value, event) {
+    if (!value) {
       return;
     }
-    var startDate = parseDate(rangeValue[0], formatStr);
-    var endDate = parseDate(rangeValue[1], formatStr);
+    var startDate = value[0],
+      endDate = value[1];
     var selectValue = [startDate, endDate];
-    if (!DateUtils.isValid(startDate) || !DateUtils.isValid(endDate)) {
-      setInputState('Error');
-      return;
-    }
-    if (isDateDisabled(startDate, selectValue, true, DATERANGE_DISABLED_TARGET.CALENDAR)) {
-      setInputState('Error');
-      return;
-    }
     setHoverDateRange(selectValue);
     setSelectedDates(selectValue);
-    updateCalendarDateRange({
+    setCalendarDateRange({
       dateRange: selectValue
     });
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [character, rangeFormatStr, updateCalendarDateRange]);
-
-  /**
-   * The callback after the enter key is triggered on the input
-   */
-  var handleInputPressEnd = useCallback(function (event) {
-    if (inputState === 'Typing') {
-      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);
-    }
-    setInputState('Initial');
-  }, [handleValueUpdate, selectedDates, inputState]);
-  var handleInputBackspace = useCallback(function (event) {
-    var value = event.target.value;
-
-    // When the input box is empty, the date is cleared.
-    if (value === '') {
-      handleClean(event);
-    }
-  }, [handleClean]);
-  var handleEnter = useCallback(function () {
-    var nextCalendarDate;
-    if (value && value.length) {
-      var _startDate2 = value[0],
-        endData = value[1];
-      nextCalendarDate = [_startDate2, isSameMonth(_startDate2, endData) ? addMonths(endData, 1) : endData];
-    } else {
-      // Reset the date on the calendar to the default date
-      nextCalendarDate = getSafeCalendarDate({
-        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
-      });
-    }
-    setSelectedDates(value !== null && value !== void 0 ? value : []);
-    updateCalendarDateRange({
-      dateRange: nextCalendarDate
-    });
-  }, [defaultCalendarValue, updateCalendarDateRange, setSelectedDates, value]);
-  var handleEntered = useCallback(function () {
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    setPickerToggleActive(true);
-  }, [onOpen]);
-  var handleExited = useCallback(function () {
-    setPickerToggleActive(false);
-    setSelectedIdle(true);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  var isDateDisabled = useCallback(function (date, selectDate, selectedDone, target) {
+    setDateRange(event, selectValue);
+  });
+  var isDateDisabled = function isDateDisabled(date, options) {
+    var selectDate = options.selectDate,
+      selectedDone = options.selectedDone,
+      target = options.target;
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date, selectDate, selectedDone, target);
     }
@@ -526,27 +493,31 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
     }
     return false;
-  }, [DEPRECATED_disabledDateProp, shouldDisableDate]);
-  var disabledByBetween = useCallback(function (start, end, type) {
+  };
+  var disabledByBetween = function disabledByBetween(start, end, type) {
     // If the date is between the start and the end
     // the button is disabled
-    while (DateUtils.isBefore(start, end) || DateUtils.isSameDay(start, end)) {
-      if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
+    while (isBefore(start, end) || isSameDay(start, end)) {
+      if (isDateDisabled(start, {
+        selectDate: selectedDates,
+        selectedDone: isSelectedIdle,
+        target: type
+      })) {
         return true;
       }
-      start = DateUtils.addDays(start, 1);
+      start = addDays(start, 1);
     }
     return false;
-  }, [isDateDisabled, isSelectedIdle, selectedDates]);
-  var disabledOkButton = useCallback(function () {
+  };
+  var disabledOkButton = function disabledOkButton() {
     var start = selectedDates[0],
       end = selectedDates[1];
     if (!start || !end || !isSelectedIdle) {
       return true;
     }
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, isSelectedIdle, selectedDates]);
-  var disabledShortcutButton = useCallback(function (value) {
+  };
+  var disabledShortcutButton = function disabledShortcutButton(value) {
     if (value === void 0) {
       value = [];
     }
@@ -557,17 +528,26 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return true;
     }
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
-  }, [disabledByBetween]);
-  var handleDisabledDate = useCallback(function (date, values, type) {
-    return isDateDisabled(date, values, isSelectedIdle, type);
-  }, [isDateDisabled, isSelectedIdle]);
-  var onPickerKeyDown = useToggleKeyDownEvent(_extends({
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    active: isPickerToggleActive,
-    onExit: handleClean
-  }, rest));
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  };
+  var handleClose = useEventCallback(function () {
+    var _trigger$current, _trigger$current$clos;
+    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+  });
+  var handleInputKeyDown = useEventCallback(function (event) {
+    onMenuKeyDown(event, {
+      esc: handleClose,
+      enter: function enter() {
+        var _trigger$current2;
+        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
+          open = _ref4.open;
+        if (!open) {
+          var _trigger$current3;
+          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
+        }
+      }
+    });
+  });
+  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -575,13 +555,27 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar
     });
+
+    /**
+     * Set a min-width (528px) when there are two calendars
+     * @see https://github.com/rsuite/rsuite/issues/3522
+     */
+    var panelStyles = {
+      minWidth: showOneCalendar ? 'auto' : 528
+    };
     var styles = _extends({}, menuStyle, {
       left: left,
       top: top
     });
     var calendarProps = {
       calendarDate: calendarDate,
-      disabledDate: handleDisabledDate,
+      disabledDate: function disabledDate(date, values, type) {
+        return isDateDisabled(date, {
+          selectDate: values,
+          selectedDone: isSelectedIdle,
+          target: type
+        });
+      },
       format: formatStr,
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
       isoWeek: isoWeek,
@@ -591,8 +585,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
       showMeridian: showMeridian,
-      onChangeCalendarMonth: updateSingleCalendarMonth,
-      onChangeCalendarTime: updateSingleCalendarTime,
+      onChangeCalendarMonth: handleSingleCalendarMonth,
+      onChangeCalendarTime: handleSingleCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectDate,
       onToggleMeridian: handleToggleMeridian,
@@ -606,12 +600,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     return /*#__PURE__*/React.createElement(PickerOverlay, {
       role: "dialog",
+      "aria-labelledby": label ? id + "-label" : undefined,
+      tabIndex: -1,
       className: classes,
-      ref: mergeRefs(overlayRef, speakerRef),
-      target: triggerRef,
+      ref: mergeRefs(overlay, speakerRef),
+      target: trigger,
       style: styles
     }, /*#__PURE__*/React.createElement("div", {
-      className: panelClasses
+      className: panelClasses,
+      style: panelStyles
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
@@ -622,12 +619,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
-      onShortcutClick: handleShortcutPageDate
+      onShortcutClick: handleShortcutPageDate,
+      "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/React.createElement("div", {
-      className: prefix('daterange-header')
-    }, getDisplayString(selectedDates)), /*#__PURE__*/React.createElement("div", {
+      className: prefix('daterange-header'),
+      "data-testid": "daterange-header"
+    }, getDateRangeString(selectedDates)), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {
       value: {
@@ -658,39 +657,88 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
+  var caretAs = useMemo(function () {
+    if (caretAsProp === null) {
+      return null;
+    }
+    return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
+  }, [caretAsProp, formatStr]);
+  var isErrorValue = function isErrorValue(value) {
+    if (!value) {
+      return false;
+    }
+    var startDate = value[0],
+      endDate = value[1];
+    if (!isValid(startDate) || !isValid(endDate)) {
+      return true;
+    }
+    if (isBefore(endDate, startDate)) {
+      return true;
+    }
+    var disabledOptions = {
+      selectDate: value,
+      selectedDone: isSelectedIdle,
+      target: DATERANGE_DISABLED_TARGET.INPUT
+    };
+    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {
+      return true;
+    }
+    return false;
+  };
+  var _partitionHTMLProps = partitionHTMLProps(restProps, {
+      htmlProps: [],
+      includeAria: true
+    }),
+    ariaProps = _partitionHTMLProps[0],
+    rest = _partitionHTMLProps[1];
+  var showCleanButton = cleanable && hasValue && !readOnly;
+  var invalidValue = value && isErrorValue(value);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
+    trigger: "active",
+    ref: trigger,
     pickerProps: pick(props, pickTriggerPropKeys),
-    ref: triggerRef,
     placement: placement,
     onEnter: createChainedFunction(handleEnter, onEnter),
-    onEntered: createChainedFunction(handleEntered, onEntered),
-    onExited: createChainedFunction(handleExited, onExited),
-    speaker: renderDropdownMenu
+    onEntered: createChainedFunction(onOpen, onEntered),
+    onExited: createChainedFunction(onClose, onExited),
+    speaker: renderCalendarOverlay
   }, /*#__PURE__*/React.createElement(Component, {
-    ref: rootRef,
-    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = inputState === 'Error', _merge)),
+    ref: root,
+    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
     style: style
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, DateUtils.calendarOnlyProps)), {
-    as: toggleAs,
-    ref: targetRef,
-    appearance: appearance,
-    editable: editable,
-    inputMask: DateUtils.getDateMask(rangeFormatStr),
-    inputValue: value ? getDisplayString(value, true) : '',
-    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
-    onInputChange: handleInputChange,
-    onInputBlur: handleInputPressEnd,
-    onInputPressEnter: handleInputPressEnd,
-    onInputBackspace: debounce(handleInputBackspace, 10),
-    onKeyDown: onPickerKeyDown,
-    onClean: createChainedFunction(handleClean, onClean),
-    cleanable: cleanable && !disabled,
-    hasValue: hasValue,
-    active: isPickerToggleActive,
-    placement: placement,
+  }, plaintext ? /*#__PURE__*/React.createElement(DateRangeInput, {
+    value: value,
+    format: formatStr,
+    plaintext: plaintext
+  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
+    inside: true,
+    size: size
+  }), /*#__PURE__*/React.createElement(PickerLabel, {
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
+    id: id + "-label"
+  }, label), /*#__PURE__*/React.createElement(DateRangeInput, _extends({
+    "aria-haspopup": "dialog",
+    "aria-invalid": invalidValue,
+    "aria-labelledby": label ? id + "-label" : undefined
+  }, ariaProps, {
+    ref: target,
+    id: id,
+    value: value,
+    character: character,
+    format: formatStr,
+    placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    caretAs: caretAs || IconCalendar
-  }), getDisplayString(value))));
+    onChange: handleInputChange,
+    readOnly: readOnly || !editable || loading,
+    plaintext: plaintext,
+    onKeyDown: handleInputKeyDown,
+    htmlSize: getInputHtmlSize()
+  })), /*#__PURE__*/React.createElement(PickerIndicator, {
+    loading: loading,
+    caretAs: caretAs,
+    onClose: handleClean,
+    showCleanButton: showCleanButton
+  }))));
 });
 DateRangePicker.after = disabledDateUtils.after;
 DateRangePicker.afterToday = disabledDateUtils.afterToday;