rsuite 5.39.0 → 5.41.0

package/cjs/DateRangePicker/DateRangePicker.js

@@ -1,138 +1,108 @@
+'use client';
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 exports.__esModule = true;
 exports.default = void 0;
-
 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 _isNil = _interopRequireDefault(require("lodash/isNil"));
-
 var _omit = _interopRequireDefault(require("lodash/omit"));
-
 var _partial = _interopRequireDefault(require("lodash/partial"));
-
 var _pick = _interopRequireDefault(require("lodash/pick"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _CustomProvider = require("../CustomProvider");
-
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
-
 var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));
-
 var _Stack = _interopRequireDefault(require("../Stack"));
-
 var _Picker = require("../Picker");
-
 var _utils = require("../utils");
-
 var _dateUtils = require("../utils/dateUtils");
-
 var _Calendar2 = _interopRequireDefault(require("./Calendar"));
-
 var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
-
 var _utils2 = require("./utils");
-
 var _deprecatePropType = require("../utils/deprecatePropType");
-
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
-
 var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _ref, _ref2, _merge;
-
   var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
-      className = props.className,
-      _props$appearance = props.appearance,
-      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-      _props$editable = props.editable,
-      editable = _props$editable === void 0 ? true : _props$editable,
-      _props$cleanable = props.cleanable,
-      cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
-      _props$character = props.character,
-      character = _props$character === void 0 ? ' ~ ' : _props$character,
-      defaultCalendarValue = props.defaultCalendarValue,
-      defaultValue = props.defaultValue,
-      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,
-      _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,
-      menuClassName = props.menuClassName,
-      menuStyle = props.menuStyle,
-      oneTap = props.oneTap,
-      _props$placeholder = props.placeholder,
-      placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
-      ranges = props.ranges,
-      renderValue = props.renderValue,
-      _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,
-      valueProp = props.value,
-      onChange = props.onChange,
-      onClean = props.onClean,
-      onClose = props.onClose,
-      onEnter = props.onEnter,
-      onEntered = props.onEntered,
-      onExited = props.onExited,
-      onOk = props.onOk,
-      onOpen = props.onOpen,
-      onSelect = props.onSelect,
-      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", "renderTitle"]);
-
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
+    className = props.className,
+    _props$appearance = props.appearance,
+    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    _props$cleanable = props.cleanable,
+    cleanable = _props$cleanable === void 0 ? true : _props$cleanable,
+    _props$character = props.character,
+    character = _props$character === void 0 ? ' ~ ' : _props$character,
+    defaultCalendarValue = props.defaultCalendarValue,
+    defaultValue = props.defaultValue,
+    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,
+    _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,
+    menuClassName = props.menuClassName,
+    menuStyle = props.menuStyle,
+    oneTap = props.oneTap,
+    _props$placeholder = props.placeholder,
+    placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
+    ranges = props.ranges,
+    renderValue = props.renderValue,
+    _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,
+    valueProp = props.value,
+    onChange = props.onChange,
+    onClean = props.onClean,
+    onClose = props.onClose,
+    onEnter = props.onEnter,
+    onEntered = props.onEntered,
+    onExited = props.onExited,
+    onOk = props.onOk,
+    onOpen = props.onOpen,
+    onSelect = props.onSelect,
+    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", "renderTitle"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-      merge = _useClassNames.merge,
-      prefix = _useClassNames.prefix;
-
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
   var _useCustom = (0, _utils.useCustom)('DateRangePicker', overrideLocale),
-      locale = _useCustom.locale,
-      formatDate = _useCustom.formatDate,
-      parseDate = _useCustom.parseDate;
-
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate,
+    parseDate = _useCustom.parseDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
-
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
-      value = _useControlled[0],
-      setValue = _useControlled[1];
+    value = _useControlled[0],
+    setValue = _useControlled[1];
   /**
    * 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.
    *
    * In `oneTap` mode, select action will not change this value, its value should be true always.
    */
-
-
   var _useState = (0, _react.useState)(true),
-      isSelectedIdle = _useState[0],
-      setSelectedIdle = _useState[1];
+    isSelectedIdle = _useState[0],
+    setSelectedIdle = _useState[1];
   /**
    * The currently selected date range.
    *
@@ -141,93 +111,80 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * the second click to determine the end date of the date range.
    *
    */
-
-
   var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
-      selectedDates = _useState2[0],
-      setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-
-
+    selectedDates = _useState2[0],
+    setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
   var _useState3 = (0, _react.useState)(null),
-      hoverDateRange = _useState3[0],
-      setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
-
-
+    hoverDateRange = _useState3[0],
+    setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
   var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
-    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
-  })),
-      calendarDate = _useState4[0],
-      setCalendarDate = _useState4[1];
-
+      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
+    })),
+    calendarDate = _useState4[0],
+    setCalendarDate = _useState4[1];
   var _useState5 = (0, _react.useState)(),
-      inputState = _useState5[0],
-      setInputState = _useState5[1];
+    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,
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
-
-
   var selectRangeValueRef = (0, _react.useRef)(null);
+
   /**
    * Get the time on the calendar.
    */
-
   var getCalendarDatetime = (0, _react.useCallback)(function (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 dateRange = _ref3.dateRange,
-        calendarKey = _ref3.calendarKey,
-        eventName = _ref3.eventName;
-    var nextValue = dateRange; // The time should remain the same when the dates in the date range are changed.
+      calendarKey = _ref3.calendarKey,
+      eventName = _ref3.eventName;
+    var nextValue = dateRange;
 
+    // The time should remain the same when the dates in the date range are changed.
     if ((0, _dateUtils.shouldRenderTime)(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && eventName !== 'changeTime') {
       var _startDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
-
       var _endDate = (0, _dateUtils.copyTime)({
         from: getCalendarDatetime('end'),
         to: dateRange.length === 1 ? (0, _dateUtils.addMonths)(_startDate, 1) : dateRange[1]
       });
-
       nextValue = [_startDate, _endDate];
     } else if (dateRange === null && typeof defaultCalendarValue !== 'undefined') {
       // Make the calendar render the value of defaultCalendarValue after clearing the value.
       nextValue = defaultCalendarValue;
     }
-
     setCalendarDate((0, _utils2.getSafeCalendarDate)({
       value: nextValue,
       calendarKey: calendarKey
     }));
-  }, [formatStr, defaultCalendarValue, getCalendarDatetime]); // if valueProp changed then update selectValue/hoverValue
+  }, [formatStr, defaultCalendarValue, getCalendarDatetime]);
 
+  // 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];
-
+    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, {
@@ -238,17 +195,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   });
   var getDisplayString = (0, _react.useCallback)(function (nextValue, isPlaintext) {
     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, {
         date: displayValue[0],
         formatStr: formatStr
@@ -257,13 +210,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         formatStr: formatStr
       }));
     }
-
     return isPlaintext ? '' : placeholder || rangeFormatStr;
   }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
+
   /**
    * preset hover range
    */
-
   var getHoverRangeValue = (0, _react.useCallback)(function (date) {
     function getHoverRangeFunc() {
       if (hoverRange === 'week') {
@@ -271,94 +223,86 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       } else if (hoverRange === 'month') {
         return _utils2.getMonthHoverRange;
       }
-
       return hoverRange;
     }
-
     var hoverRangeFunc = getHoverRangeFunc();
-
     if ((0, _isNil.default)(hoverRangeFunc)) {
       return null;
     }
-
     var hoverValues = hoverRangeFunc(date);
     var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;
-
     if (!isHoverRangeValid) {
       return null;
     }
-
     if ((0, _dateUtils.isAfter)(hoverValues[0], hoverValues[1])) {
       hoverValues = (0, _dateUtils.reverseDateRangeOmitTime)(hoverValues);
     }
-
     return hoverValues;
   }, [hoverRange, isoWeek]);
   var handleValueUpdate = (0, _react.useCallback)(function (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 : []);
-
     if (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {
       setValue(nextValue);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
-    } // `closeOverlay` default value is `true`
-
+    }
 
+    // `closeOverlay` default value is `true`
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
   }, [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 nextHoverDateRange = getHoverRangeValue(date); // If hasDoneSelect is false,
+    var nextHoverDateRange = getHoverRangeValue(date);
+
+    // If hasDoneSelect is false,
     // it means there's already one selected date
     // and waiting for user to select the second date to complete the selection.
-
     if (!isSelectedIdle) {
       // 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])) {
           nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
-
         setSelectedDates(nextSelectedDates);
       } else {
         setHoverDateRange(function (prevHoverValue) {
           return (0, _isNil.default)(prevHoverValue) ? null : [prevHoverValue[0], date];
         });
-      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated
+      }
 
+      // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated
     } 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 calendarKey = index === 0 ? 'start' : 'end';
     var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
-    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
+    var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);
 
+    // in `oneTap` mode
     if (isSelectedIdle && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
       setSelectedIdle(false);
       return;
-    } // no preset hover range can use
-
+    }
 
+    // no preset hover range can use
     if (noHoverRangeValid) {
       // start select
       if (isSelectedIdle) {
@@ -376,13 +320,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         selectRangeValueRef.current = hoverRangeValue;
       }
     }
-
     if (nextSelectDates.length === 2) {
       // If user have completed the selection, then sort the selected dates.
       if ((0, _dateUtils.isAfter)(nextSelectDates[0], nextSelectDates[1])) {
         nextSelectDates = (0, _dateUtils.reverseDateRangeOmitTime)(nextSelectDates);
       }
-
       if ((0, _dateUtils.shouldRenderTime)(formatStr)) {
         nextSelectDates = [(0, _dateUtils.copyTime)({
           from: getCalendarDatetime('start'),
@@ -392,12 +334,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           to: nextSelectDates[1]
         })];
       }
-
       setHoverDateRange(nextSelectDates);
     } else {
       setHoverDateRange([nextSelectDates[0], nextSelectDates[0]]);
     }
-
     setSelectedDates(nextSelectDates);
     updateCalendarDateRange({
       dateRange: nextSelectDates,
@@ -407,12 +347,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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.
    * 1. Check if the selection is completed.
    * 2. if the selection is completed, set the temporary `hoverValue` empty.
    */
-
   (0, _react.useEffect)(function () {
     var selectValueLength = selectedDates.length;
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
@@ -438,8 +378,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       eventName: 'changeTime'
     });
     setSelectedDates(function (prev) {
-      var next = [].concat(prev); // if next[index] is not empty, only update the time after aligning the year, month and day
+      var next = [].concat(prev);
 
+      // if next[index] is not empty, only update the time after aligning the year, month and day
       next[index] = next[index] ? (0, _dateUtils.copyTime)({
         from: date,
         to: next[index]
@@ -447,41 +388,40 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return next;
     });
   }, [calendarDate, updateCalendarDateRange]);
+
   /**
    * The callback triggered when PM/AM is switched.
    */
-
   var handleToggleMeridian = (0, _react.useCallback)(function (index) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);
-    setCalendarDate(nextCalendarDate); // If the value already exists, update the value again.
+    setCalendarDate(nextCalendarDate);
 
+    // If the value already exists, update the value again.
     if (selectedDates.length === 2) {
       var nextSelectedDates = Array.from(selectedDates);
       nextSelectedDates[index] = (0, _dateUtils.getReversedTimeMeridian)(nextSelectedDates[index]);
       setSelectedDates(nextSelectedDates);
     }
   }, [calendarDate, selectedDates]);
+
   /**
    * Toolbar operation callback function
    */
-
   var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {
     if (closeOverlay === void 0) {
       closeOverlay = false;
     }
-
     updateCalendarDateRange({
       dateRange: value
     });
-
     if (closeOverlay) {
       handleValueUpdate(event, value, closeOverlay);
     } else {
       setSelectedDates(value !== null && value !== void 0 ? value : []);
-    } // End unfinished selections.
-
+    }
 
+    // End unfinished selections.
     setSelectedIdle(true);
   }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = (0, _react.useCallback)(function (event) {
@@ -494,15 +434,16 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDateRange]);
+
   /**
    * 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
+    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, {
@@ -511,45 +452,40 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setInputState('Error');
       return;
     }
-
     var startDate = parseDate(rangeValue[0], formatStr);
     var endDate = parseDate(rangeValue[1], formatStr);
     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({
       dateRange: selectValue
     });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  },
+  // 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 handleEnter = (0, _react.useCallback)(function () {
     var nextCalendarDate;
-
     if (value && value.length) {
       var _startDate2 = value[0],
-          endData = value[1];
+        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
@@ -557,7 +493,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
     }
-
     setSelectedDates(value !== null && value !== void 0 ? value : []);
     updateCalendarDateRange({
       dateRange: nextCalendarDate
@@ -576,11 +511,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date, selectDate, selectedDone, target);
     }
-
     if (typeof DEPRECATED_disabledDateProp === 'function') {
       return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
     }
-
     return false;
   }, [DEPRECATED_disabledDateProp, shouldDisableDate]);
   var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {
@@ -590,35 +523,28 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
         return true;
       }
-
       start = _utils.DateUtils.addDays(start, 1);
     }
-
     return false;
   }, [isDateDisabled, isSelectedIdle, selectedDates]);
   var disabledOkButton = (0, _react.useCallback)(function () {
     var start = selectedDates[0],
-        end = selectedDates[1];
-
+      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) {
     if (value === void 0) {
       value = [];
     }
-
     var _value = value,
-        start = _value[0],
-        end = _value[1];
-
+      start = _value[0],
+      end = _value[1];
     if (!start || !end) {
       return true;
     }
-
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
@@ -630,11 +556,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     active: isPickerToggleActive,
     onExit: handleClean
   }, rest));
-
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
-        top = positionProps.top,
-        className = positionProps.className;
+      top = positionProps.top,
+      className = positionProps.className;
     var classes = merge(className, menuClassName, prefix('daterange-menu'));
     var panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar
@@ -712,19 +637,16 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       ranges: bottomRanges
     })))));
   };
-
   var hasValue = !(0, _isNil.default)(value) && value.length > 1;
-
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
-    classPrefix: classPrefix,
-    name: 'daterange',
-    appearance: appearance,
-    hasValue: hasValue,
-    cleanable: cleanable
-  })),
-      classes = _usePickerClassName[0],
-      usedClassNamePropKeys = _usePickerClassName[1];
-
+      classPrefix: classPrefix,
+      name: 'daterange',
+      appearance: appearance,
+      hasValue: hasValue,
+      cleanable: cleanable
+    })),
+    classes = _usePickerClassName[0],
+    usedClassNamePropKeys = _usePickerClassName[1];
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: triggerRef,
@@ -758,7 +680,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     caretAs: caretAs || _Calendar.default
   }), getDisplayString(value))));
 });
-
 DateRangePicker.after = disabledDateUtils.after;
 DateRangePicker.afterToday = disabledDateUtils.afterToday;
 DateRangePicker.allowedDays = disabledDateUtils.allowedDays;