rsuite 5.49.0 → 5.51.0

package/cjs/DateRangePicker/DateRangePicker.js

@@ -1,20 +1,21 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
+var _react = _interopRequireWildcard(require("react"));
 var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
+var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
+var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
 var _CustomProvider = require("../CustomProvider");
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));
@@ -27,6 +28,9 @@ var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 var _utils2 = require("./utils");
 var _deprecatePropType = require("../utils/deprecatePropType");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
+var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
+var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -49,18 +53,22 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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,
@@ -69,14 +77,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     _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,
@@ -89,18 +97,25 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useUniqueId)('rs-', idProp);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    root = _usePickerRef.root,
+    target = _usePickerRef.target,
+    overlay = _usePickerRef.overlay;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
   var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate,
-    parseDate = _useCustom.parseDate;
+    formatDate = _useCustom.formatDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = (0, _utils.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 = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.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.
@@ -129,9 +144,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     })),
     calendarDate = _useState4[0],
     setCalendarDate = _useState4[1];
-  var _useState5 = (0, _react.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,
@@ -142,16 +154,16 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * Get the time on the calendar.
    */
-  var getCalendarDatetime = (0, _react.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 = (0, _react.useCallback)(function (_ref3) {
+  var setCalendarDateRange = function setCalendarDateRange(_ref3) {
     var dateRange = _ref3.dateRange,
       calendarKey = _ref3.calendarKey,
       eventName = _ref3.eventName;
@@ -172,44 +184,29 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       // Make the calendar render the value of defaultCalendarValue after clearing the value.
       nextValue = defaultCalendarValue;
     }
-    setCalendarDate((0, _utils2.getSafeCalendarDate)({
+    var nextCalendarDate = (0, _utils2.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
   (0, _react.useEffect)(function () {
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
-  var _useState6 = (0, _react.useState)(false),
-    isPickerToggleActive = _useState6[0],
-    setPickerToggleActive = _useState6[1];
-  var rootRef = (0, _react.useRef)(null);
-  var overlayRef = (0, _react.useRef)(null);
-  var targetRef = (0, _react.useRef)(null);
-  var triggerRef = (0, _react.useRef)(null);
-  var handleCloseDropdown = (0, _react.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);
-  }, []);
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef,
-    targetRef: targetRef,
-    rootRef: rootRef
-  });
-  var getDisplayString = (0, _react.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(_dateUtils.compareAsc);
-      if (isPlaintext) {
-        return formatDate(displayValue[0], formatStr) + character + formatDate(displayValue[1], formatStr);
-      }
-      return renderValue ? renderValue(displayValue, formatStr) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
         date: displayValue[0],
         formatStr: formatStr
       }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
@@ -217,13 +214,23 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         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 (0, _utils.getStringLength)(strings) + padding;
+  };
 
   /**
    * preset hover range
    */
-  var getHoverRangeValue = (0, _react.useCallback)(function (date) {
+  var getHoverRangeValue = function getHoverRangeValue(date) {
     function getHoverRangeFunc() {
       if (hoverRange === 'week') {
         return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
@@ -245,29 +252,29 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);
     }
     return hoverValues;
-  }, [hoverRange, isoWeek]);
-  var handleValueUpdate = (0, _react.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 (!(0, _utils2.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 = (0, _react.useCallback)(function (date) {
+  var handleMouseMove = (0, _utils.useEventCallback)(function (date) {
     var nextHoverDateRange = getHoverRangeValue(date);
 
     // If hasDoneSelect is false,
@@ -277,7 +284,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
       if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
-        if (_utils.DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
+        if ((0, _dateUtils.isBefore)(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
           nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
         setSelectedDates(nextSelectedDates);
@@ -291,12 +298,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else if (!(0, _isNil.default)(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, isSelectedIdle]);
+  });
 
   /**
    * Callback for selecting a date cell in the calendar grid
    */
-  var handleSelectDate = (0, _react.useCallback)(function (index, date, event) {
+  var handleSelectDate = (0, _utils.useEventCallback)(function (index, date, event) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
@@ -304,7 +311,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     // in `oneTap` mode
     if (isSelectedIdle && oneTap) {
-      handleValueUpdate(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
+      setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
       setSelectedIdle(false);
       return;
     }
@@ -346,14 +353,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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.
@@ -365,21 +372,21 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var updateSingleCalendarMonth = (0, _react.useCallback)(function (index, date) {
+  var handleSingleCalendarMonth = (0, _utils.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 = (0, _react.useCallback)(function (index, date) {
+  });
+  var handleSingleCalendarTime = (0, _utils.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'
@@ -394,12 +401,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       }) : new Date(date.valueOf());
       return next;
     });
-  }, [calendarDate, updateCalendarDateRange]);
+  });
 
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var handleToggleMeridian = (0, _react.useCallback)(function (index) {
+  var handleToggleMeridian = (0, _utils.useEventCallback)(function (index) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);
     setCalendarDate(nextCalendarDate);
@@ -410,21 +417,38 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);
       setSelectedDates(nextSelectedDates);
     }
-  }, [calendarDate, selectedDates]);
+  });
+  var handleEnter = (0, _utils.useEventCallback)(function () {
+    var nextCalendarDate;
+    if (value && value.length) {
+      var _startDate3 = value[0],
+        endData = value[1];
+      nextCalendarDate = [_startDate3, (0, _dateUtils.isSameMonth)(_startDate3, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
+    } else {
+      // Reset the date on the calendar to the default date
+      nextCalendarDate = (0, _utils2.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 = (0, _react.useCallback)(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _utils.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 : []);
     }
@@ -432,99 +456,41 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     // End unfinished selections.
     setSelectedIdle(true);
-  }, [handleValueUpdate, onShortcutClick, updateCalendarDateRange]);
-  var handleOK = (0, _react.useCallback)(function (event) {
-    handleValueUpdate(event, selectedDates);
+  });
+  var handleOK = (0, _utils.useEventCallback)(function (event) {
+    setDateRange(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
-  }, [handleValueUpdate, onOk, selectedDates]);
-  var handleClean = (0, _react.useCallback)(function (event) {
-    updateCalendarDateRange({
+  });
+  var handleClean = (0, _utils.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 = (0, _react.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 (!_utils.DateUtils.isMatch(rangeValue[0], formatStr, {
-      locale: locale.dateLocale
-    }) || !_utils.DateUtils.isMatch(rangeValue[1], formatStr, {
-      locale: locale.dateLocale
-    })) {
-      setInputState('Error');
+  var handleInputChange = (0, _utils.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 (!_utils.DateUtils.isValid(startDate) || !_utils.DateUtils.isValid(endDate)) {
-      setInputState('Error');
-      return;
-    }
-    if (isDateDisabled(startDate, selectValue, true, _utils.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 = (0, _react.useCallback)(function (event) {
-    if (inputState === 'Typing') {
-      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);
-    }
-    setInputState('Initial');
-  }, [handleValueUpdate, selectedDates, inputState]);
-  var handleInputBackspace = (0, _react.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 = (0, _react.useCallback)(function () {
-    var nextCalendarDate;
-    if (value && value.length) {
-      var _startDate2 = value[0],
-        endData = value[1];
-      nextCalendarDate = [_startDate2, (0, _dateUtils.isSameMonth)(_startDate2, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
-    } else {
-      // Reset the date on the calendar to the default date
-      nextCalendarDate = (0, _utils2.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 = (0, _react.useCallback)(function () {
-    onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-    setPickerToggleActive(true);
-  }, [onOpen]);
-  var handleExited = (0, _react.useCallback)(function () {
-    setPickerToggleActive(false);
-    setSelectedIdle(true);
-    onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose]);
-  var isDateDisabled = (0, _react.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);
     }
@@ -532,27 +498,31 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
     }
     return false;
-  }, [DEPRECATED_disabledDateProp, shouldDisableDate]);
-  var disabledByBetween = (0, _react.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 (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {
-      if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
+    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
+      if (isDateDisabled(start, {
+        selectDate: selectedDates,
+        selectedDone: isSelectedIdle,
+        target: type
+      })) {
         return true;
       }
-      start = _utils.DateUtils.addDays(start, 1);
+      start = (0, _dateUtils.addDays)(start, 1);
     }
     return false;
-  }, [isDateDisabled, isSelectedIdle, selectedDates]);
-  var disabledOkButton = (0, _react.useCallback)(function () {
+  };
+  var disabledOkButton = function disabledOkButton() {
     var start = selectedDates[0],
       end = selectedDates[1];
     if (!start || !end || !isSelectedIdle) {
       return true;
     }
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, isSelectedIdle, selectedDates]);
-  var disabledShortcutButton = (0, _react.useCallback)(function (value) {
+  };
+  var disabledShortcutButton = function disabledShortcutButton(value) {
     if (value === void 0) {
       value = [];
     }
@@ -563,17 +533,26 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return true;
     }
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
-  }, [disabledByBetween]);
-  var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
-    return isDateDisabled(date, values, isSelectedIdle, type);
-  }, [isDateDisabled, isSelectedIdle]);
-  var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
-    triggerRef: triggerRef,
-    targetRef: targetRef,
-    active: isPickerToggleActive,
-    onExit: handleClean
-  }, rest));
-  var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
+  };
+  var handleClose = (0, _utils.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 = (0, _utils.useEventCallback)(function (event) {
+    (0, _Picker.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;
@@ -595,7 +574,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     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,
@@ -605,8 +590,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       showWeekNumbers: showWeekNumbers,
       value: selectedDates,
       showMeridian: showMeridian,
-      onChangeCalendarMonth: updateSingleCalendarMonth,
-      onChangeCalendarTime: updateSingleCalendarTime,
+      onChangeCalendarMonth: handleSingleCalendarMonth,
+      onChangeCalendarTime: handleSingleCalendarTime,
       onMouseMove: handleMouseMove,
       onSelect: handleSelectDate,
       onToggleMeridian: handleToggleMeridian,
@@ -618,11 +603,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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;
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
       role: "dialog",
+      "aria-labelledby": label ? id + "-label" : undefined,
+      tabIndex: -1,
       className: classes,
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
-      target: triggerRef,
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
+      target: trigger,
       style: styles
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: panelClasses,
@@ -637,13 +624,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
-      onShortcutClick: handleShortcutPageDate
+      onShortcutClick: handleShortcutPageDate,
+      "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-header'),
       "data-testid": "daterange-header"
-    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
+    }, getDateRangeString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {
       value: {
@@ -674,39 +662,88 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     })),
     classes = _usePickerClassName[0],
     usedClassNamePropKeys = _usePickerClassName[1];
+  var caretAs = (0, _react.useMemo)(function () {
+    if (caretAsProp === null) {
+      return null;
+    }
+    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
+  }, [caretAsProp, formatStr]);
+  var isErrorValue = function isErrorValue(value) {
+    if (!value) {
+      return false;
+    }
+    var startDate = value[0],
+      endDate = value[1];
+    if (!(0, _dateUtils.isValid)(startDate) || !(0, _dateUtils.isValid)(endDate)) {
+      return true;
+    }
+    if ((0, _dateUtils.isBefore)(endDate, startDate)) {
+      return true;
+    }
+    var disabledOptions = {
+      selectDate: value,
+      selectedDone: isSelectedIdle,
+      target: _utils.DATERANGE_DISABLED_TARGET.INPUT
+    };
+    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {
+      return true;
+    }
+    return false;
+  };
+  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(restProps, {
+      htmlProps: [],
+      includeAria: true
+    }),
+    ariaProps = _partitionHTMLProps[0],
+    rest = _partitionHTMLProps[1];
+  var showCleanButton = cleanable && hasValue && !readOnly;
+  var invalidValue = value && isErrorValue(value);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
+    trigger: "active",
+    ref: trigger,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
-    ref: triggerRef,
     placement: placement,
     onEnter: (0, _utils.createChainedFunction)(handleEnter, onEnter),
-    onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
-    onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
-    speaker: renderDropdownMenu
+    onEntered: (0, _utils.createChainedFunction)(onOpen, onEntered),
+    onExited: (0, _utils.createChainedFunction)(onClose, onExited),
+    speaker: renderCalendarOverlay
   }, /*#__PURE__*/_react.default.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.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {
-    as: toggleAs,
-    ref: targetRef,
-    appearance: appearance,
-    editable: editable,
-    inputMask: _utils.DateUtils.getDateMask(rangeFormatStr),
-    inputValue: value ? getDisplayString(value, true) : '',
-    inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : rangeFormatStr,
-    onInputChange: handleInputChange,
-    onInputBlur: handleInputPressEnd,
-    onInputPressEnter: handleInputPressEnd,
-    onInputBackspace: (0, _debounce.default)(handleInputBackspace, 10),
-    onKeyDown: onPickerKeyDown,
-    onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
-    cleanable: cleanable && !disabled,
-    hasValue: hasValue,
-    active: isPickerToggleActive,
-    placement: placement,
+  }, plaintext ? /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, {
+    value: value,
+    format: formatStr,
+    plaintext: plaintext
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
+    inside: true,
+    size: size
+  }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
+    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
+    id: id + "-label"
+  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({
+    "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 || _Calendar.default
-  }), getDisplayString(value))));
+    onChange: handleInputChange,
+    readOnly: readOnly || !editable || loading,
+    plaintext: plaintext,
+    onKeyDown: handleInputKeyDown,
+    htmlSize: getInputHtmlSize()
+  })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
+    loading: loading,
+    caretAs: caretAs,
+    onClose: handleClean,
+    showCleanButton: showCleanButton
+  }))));
 });
 DateRangePicker.after = disabledDateUtils.after;
 DateRangePicker.afterToday = disabledDateUtils.afterToday;