rsuite 5.75.0 → 6.0.0-canary-20241227

package/esm/DateRangePicker/DateRangePicker.js

@@ -1,14 +1,9 @@
 '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";
-var _templateObject, _templateObject2;
-var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "calendarSnapping", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showMeridiem", "showHeader", "style", "size", "caretAs", "value", "monthDropdownProps", "hideHours", "hideMinutes", "hideSeconds", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"];
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import isNil from 'lodash/isNil';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
-import PropTypes from 'prop-types';
 import CalendarIcon from '@rsuite/icons/Calendar';
 import TimeIcon from '@rsuite/icons/Time';
 import Toolbar from "../DatePicker/Toolbar.js";
@@ -22,10 +17,9 @@ import useDateDisabled from "./hooks/useDateDisabled.js";
 import useCustomizedInput from "../DatePicker/hooks/useCustomizedInput.js";
 import Calendar from "./Calendar.js";
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from "./utils.js";
-import { deprecatePropTypeNew, oneOf } from "../internals/propTypes/index.js";
 import { DATERANGE_DISABLED_TARGET as TARGET } from "../internals/constants/index.js";
 import { useClassNames, useControlled, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
-import { omitTriggerPropKeys, PickerPopup, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
+import { omitTriggerPropKeys, PickerPopup, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { createChainedFunction, mergeRefs, partitionHTMLProps, getStringLength } from "../internals/utils/index.js";
 import { addMonths, addDays, copyTime, calendarOnlyProps, endOfDay, isValid, isBefore, isSameDay, isAfter, isSameMonth, reverseDateRangeOmitTime, startOfDay, DateMode, useDateMode } from "../internals/utils/date/index.js";
 import { useCustom } from "../CustomProvider/index.js";
@@ -34,111 +28,101 @@ import { useCustom } from "../CustomProvider/index.js";
  *
  * @see https://rsuitejs.com/components/date-range-picker
  */
-var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _ref, _ref2, _merge;
-  var _useCustom = useCustom('DateRangePicker', props),
-    formatDate = _useCustom.formatDate,
-    propsWithDefaults = _useCustom.propsWithDefaults;
-  var _propsWithDefaults$as = propsWithDefaults.as,
-    Component = _propsWithDefaults$as === void 0 ? 'div' : _propsWithDefaults$as,
-    _propsWithDefaults$cl = propsWithDefaults.classPrefix,
-    classPrefix = _propsWithDefaults$cl === void 0 ? 'picker' : _propsWithDefaults$cl,
-    className = propsWithDefaults.className,
-    _propsWithDefaults$ap = propsWithDefaults.appearance,
-    appearance = _propsWithDefaults$ap === void 0 ? 'default' : _propsWithDefaults$ap,
-    _propsWithDefaults$ed = propsWithDefaults.editable,
-    editable = _propsWithDefaults$ed === void 0 ? true : _propsWithDefaults$ed,
-    _propsWithDefaults$cl2 = propsWithDefaults.cleanable,
-    cleanable = _propsWithDefaults$cl2 === void 0 ? true : _propsWithDefaults$cl2,
-    _propsWithDefaults$ch = propsWithDefaults.character,
-    character = _propsWithDefaults$ch === void 0 ? ' ~ ' : _propsWithDefaults$ch,
-    calendarSnapping = propsWithDefaults.calendarSnapping,
-    defaultCalendarValue = propsWithDefaults.defaultCalendarValue,
-    defaultValue = propsWithDefaults.defaultValue,
-    plaintext = propsWithDefaults.plaintext,
-    disabled = propsWithDefaults.disabled,
-    DEPRECATED_disabledDate = propsWithDefaults.disabledDate,
-    shouldDisableDate = propsWithDefaults.shouldDisableDate,
-    shouldDisableHour = propsWithDefaults.shouldDisableHour,
-    shouldDisableMinute = propsWithDefaults.shouldDisableMinute,
-    shouldDisableSecond = propsWithDefaults.shouldDisableSecond,
-    format = propsWithDefaults.format,
-    hoverRange = propsWithDefaults.hoverRange,
-    idProp = propsWithDefaults.id,
-    _propsWithDefaults$is = propsWithDefaults.isoWeek,
-    isoWeek = _propsWithDefaults$is === void 0 ? false : _propsWithDefaults$is,
-    _propsWithDefaults$we = propsWithDefaults.weekStart,
-    weekStart = _propsWithDefaults$we === void 0 ? 0 : _propsWithDefaults$we,
-    _propsWithDefaults$li = propsWithDefaults.limitEndYear,
-    limitEndYear = _propsWithDefaults$li === void 0 ? 1000 : _propsWithDefaults$li,
-    limitStartYear = propsWithDefaults.limitStartYear,
-    locale = propsWithDefaults.locale,
-    loading = propsWithDefaults.loading,
-    label = propsWithDefaults.label,
-    menuClassName = propsWithDefaults.menuClassName,
-    menuStyle = propsWithDefaults.menuStyle,
-    oneTap = propsWithDefaults.oneTap,
-    _propsWithDefaults$pl = propsWithDefaults.placeholder,
-    placeholder = _propsWithDefaults$pl === void 0 ? '' : _propsWithDefaults$pl,
-    _propsWithDefaults$pl2 = propsWithDefaults.placement,
-    placement = _propsWithDefaults$pl2 === void 0 ? 'bottomStart' : _propsWithDefaults$pl2,
-    ranges = propsWithDefaults.ranges,
-    readOnly = propsWithDefaults.readOnly,
-    _propsWithDefaults$sh = propsWithDefaults.showOneCalendar,
-    showOneCalendar = _propsWithDefaults$sh === void 0 ? false : _propsWithDefaults$sh,
-    showWeekNumbers = propsWithDefaults.showWeekNumbers,
-    DEPRECATED_showMeridian = propsWithDefaults.showMeridian,
-    _propsWithDefaults$sh2 = propsWithDefaults.showMeridiem,
-    showMeridiem = _propsWithDefaults$sh2 === void 0 ? DEPRECATED_showMeridian : _propsWithDefaults$sh2,
-    _propsWithDefaults$sh3 = propsWithDefaults.showHeader,
-    showHeader = _propsWithDefaults$sh3 === void 0 ? true : _propsWithDefaults$sh3,
-    style = propsWithDefaults.style,
-    size = propsWithDefaults.size,
-    caretAsProp = propsWithDefaults.caretAs,
-    valueProp = propsWithDefaults.value,
-    monthDropdownProps = propsWithDefaults.monthDropdownProps,
-    hideHours = propsWithDefaults.hideHours,
-    hideMinutes = propsWithDefaults.hideMinutes,
-    hideSeconds = propsWithDefaults.hideSeconds,
-    onChange = propsWithDefaults.onChange,
-    onClean = propsWithDefaults.onClean,
-    onEnter = propsWithDefaults.onEnter,
-    onExit = propsWithDefaults.onExit,
-    onOk = propsWithDefaults.onOk,
-    onSelect = propsWithDefaults.onSelect,
-    onShortcutClick = propsWithDefaults.onShortcutClick,
-    renderTitle = propsWithDefaults.renderTitle,
-    renderValue = propsWithDefaults.renderValue,
-    restProps = _objectWithoutPropertiesLoose(propsWithDefaults, _excluded);
-  var id = useUniqueId('rs-', 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 formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';
-  var rangeFormatStr = "" + formatStr + character + formatStr;
-  var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
-    value = _useControlled[0],
-    setValue = _useControlled[1];
-  var _useDateMode = useDateMode(formatStr),
-    mode = _useDateMode.mode,
-    has = _useDateMode.has;
+const DateRangePicker = /*#__PURE__*/React.forwardRef((props, ref) => {
+  var _ref, _ref2;
+  const {
+    formatDate,
+    propsWithDefaults
+  } = useCustom('DateRangePicker', props);
+  const {
+    as: Component = 'div',
+    classPrefix = 'picker',
+    className,
+    appearance = 'default',
+    editable = true,
+    cleanable = true,
+    character = ' ~ ',
+    calendarSnapping,
+    defaultCalendarValue,
+    defaultValue,
+    plaintext,
+    disabled,
+    disabledDate: DEPRECATED_disabledDate,
+    shouldDisableDate,
+    shouldDisableHour,
+    shouldDisableMinute,
+    shouldDisableSecond,
+    format,
+    hoverRange,
+    id: idProp,
+    isoWeek = false,
+    weekStart = 0,
+    limitEndYear = 1000,
+    limitStartYear,
+    locale,
+    loading,
+    label,
+    menuClassName,
+    menuStyle,
+    oneTap,
+    placeholder = '',
+    placement = 'bottomStart',
+    ranges,
+    readOnly,
+    showOneCalendar = false,
+    showWeekNumbers,
+    showMeridian: DEPRECATED_showMeridian,
+    showMeridiem = DEPRECATED_showMeridian,
+    showHeader = true,
+    style,
+    size,
+    caretAs: caretAsProp,
+    value: valueProp,
+    monthDropdownProps,
+    hideHours,
+    hideMinutes,
+    hideSeconds,
+    onChange,
+    onClean,
+    onEnter,
+    onExit,
+    onOk,
+    onSelect,
+    onShortcutClick,
+    renderTitle,
+    renderValue,
+    ...restProps
+  } = propsWithDefaults;
+  const id = useUniqueId('rs-', idProp);
+  const {
+    trigger,
+    root,
+    target,
+    overlay
+  } = usePickerRef(ref);
+  const {
+    merge,
+    prefix
+  } = useClassNames(classPrefix);
+  const formatStr = format || (locale === null || locale === void 0 ? void 0 : locale.shortDateFormat) || 'yyyy-MM-dd';
+  const rangeFormatStr = `${formatStr}${character}${formatStr}`;
+  const [value, setValue] = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+  const {
+    mode,
+    has
+  } = useDateMode(formatStr);
 
   // Show only the calendar month panel. formatStr = 'yyyy-MM'
-  var onlyShowMonth = mode === DateMode.Month;
+  const onlyShowMonth = mode === DateMode.Month;
 
   // Only show the time panel. formatStr = 'HH:mm:ss'
-  var onlyShowTime = mode === DateMode.Time;
+  const onlyShowTime = mode === DateMode.Time;
 
   // Allows two calendar panels to display the same month.
-  var allowSameMonth = onlyShowMonth || showOneCalendar || onlyShowTime;
+  const allowSameMonth = onlyShowMonth || showOneCalendar || onlyShowTime;
 
   // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
-  var calendarGap = allowSameMonth ? 0 : 1;
+  const calendarGap = allowSameMonth ? 0 : 1;
 
   /**
    * Whether to complete the selection.
@@ -146,9 +130,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    *
    * In `oneTap` mode, select action will not change this value, its value should be true always.
    */
-  var _useState = useState(true),
-    isSelectedIdle = _useState[0],
-    setSelectedIdle = _useState[1];
+  const [isSelectedIdle, setSelectedIdle] = useState(true);
 
   /**
    * The currently selected date range.
@@ -158,44 +140,36 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * the second click to determine the end date of the date range.
    *
    */
-  var _useState2 = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
-    selectedDates = _useState2[0],
-    setSelectedDates = _useState2[1];
+  const [selectedDates, setSelectedDates] = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []);
 
   // The date of the current hover, used to reduce the calculation of `handleMouseMove`
-  var _useState3 = useState(value),
-    hoverDateRange = _useState3[0],
-    setHoverDateRange = _useState3[1];
+  const [hoverDateRange, setHoverDateRange] = useState(value);
 
   // The displayed calendar panel is rendered based on this value.
-  var _useState4 = useState(getSafeCalendarDate({
-      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null,
-      allowSameMonth: allowSameMonth
-    })),
-    calendarDateRange = _useState4[0],
-    setCalendarDateRangeValue = _useState4[1];
+  const [calendarDateRange, setCalendarDateRangeValue] = useState(getSafeCalendarDate({
+    value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null,
+    allowSameMonth
+  }));
 
   /**
    * 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 = useRef(null);
+  const selectRangeValueRef = useRef(null);
 
   /**
    *
    * The key of the currently active calendar panel.
    * Used to switch when only one calendar panel is displayed.
    */
-  var _useState5 = useState(),
-    activeCalendarKey = _useState5[0],
-    setActiveCalendarKey = _useState5[1];
+  const [activeCalendarKey, setActiveCalendarKey] = useState();
 
   /**
    * Get the time on the calendar.
    */
-  var getCalendarDatetime = function getCalendarDatetime(calendarKey) {
-    var index = calendarKey === 'start' ? 0 : 1;
+  const getCalendarDatetime = calendarKey => {
+    const index = calendarKey === 'start' ? 0 : 1;
     return (calendarDateRange === null || calendarDateRange === void 0 ? void 0 : calendarDateRange[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);
   };
 
@@ -203,19 +177,21 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * 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 setCalendarDateRange = function setCalendarDateRange(_ref3) {
-    var dateRange = _ref3.dateRange,
-      calendarKey = _ref3.calendarKey,
-      eventName = _ref3.eventName;
-    var nextValue = dateRange;
+  const setCalendarDateRange = _ref3 => {
+    let {
+      dateRange,
+      calendarKey,
+      eventName
+    } = _ref3;
+    let nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
     if (has('time') && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
-      var startDate = copyTime({
+      const startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
       });
-      var endDate = copyTime({
+      const endDate = copyTime({
         from: getCalendarDatetime('end'),
         to: dateRange.length === 1 ? addMonths(startDate, calendarGap) : dateRange[1]
       });
@@ -224,28 +200,27 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       // Make the calendar render the value of defaultCalendarValue after clearing the value.
       nextValue = defaultCalendarValue;
     }
-    var nextCalendarDate = getSafeCalendarDate({
+    const nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
-      calendarKey: calendarKey,
-      allowSameMonth: allowSameMonth
+      calendarKey,
+      allowSameMonth
     });
     setCalendarDateRangeValue(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
       setSelectedDates(nextCalendarDate);
     }
   };
-  useEffect(function () {
+  useEffect(() => {
     // If value changes, update the selected and hover date values on the calendar panel.
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
-  var getInputHtmlSize = function getInputHtmlSize() {
-    var padding = 4;
-    var strings = rangeFormatStr;
+  const getInputHtmlSize = () => {
+    const padding = 4;
+    let strings = rangeFormatStr;
     if (value) {
-      var startDate = value[0],
-        endDate = value[1];
-      strings = "" + formatDate(startDate, formatStr) + character + formatDate(endDate, formatStr);
+      const [startDate, endDate] = value;
+      strings = `${formatDate(startDate, formatStr)}${character}${formatDate(endDate, formatStr)}`;
     }
     return getStringLength(strings) + padding;
   };
@@ -253,27 +228,25 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * preset hover range
    */
-  var getHoverRangeValue = function getHoverRangeValue(date) {
+  const getHoverRangeValue = date => {
     function getHoverRangeFunc() {
       if (hoverRange === 'week') {
-        return function (date) {
-          return getWeekHoverRange(date, {
-            isoWeek: isoWeek,
-            weekStart: weekStart,
-            locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale
-          });
-        };
+        return date => getWeekHoverRange(date, {
+          isoWeek,
+          weekStart,
+          locale: locale === null || locale === void 0 ? void 0 : locale.dateLocale
+        });
       } else if (hoverRange === 'month') {
         return getMonthHoverRange;
       }
       return hoverRange;
     }
-    var hoverRangeFunc = getHoverRangeFunc();
+    const hoverRangeFunc = getHoverRangeFunc();
     if (isNil(hoverRangeFunc)) {
       return null;
     }
-    var hoverValues = hoverRangeFunc(date);
-    var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;
+    let hoverValues = hoverRangeFunc(date);
+    const isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;
     if (!isHoverRangeValid) {
       return null;
     }
@@ -282,7 +255,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return hoverValues;
   };
-  var setDateRange = function setDateRange(event, nextValue, closeOverlay) {
+  const setDateRange = function (event, nextValue, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
@@ -303,8 +276,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * 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 onMouseMove = useEventCallback(function (date) {
-    var nextHoverDateRange = getHoverRangeValue(date);
+  const onMouseMove = useEventCallback(date => {
+    const nextHoverDateRange = getHoverRangeValue(date);
 
     // If hasDoneSelect is false,
     // it means there's already one selected date
@@ -312,15 +285,13 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!isSelectedIdle) {
       // 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]];
+        let nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
         if (isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
           nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
         setSelectedDates(nextSelectedDates);
       } else {
-        setHoverDateRange(function (prevHoverValue) {
-          return isNil(prevHoverValue) ? null : [prevHoverValue[0], date];
-        });
+        setHoverDateRange(prevHoverValue => isNil(prevHoverValue) ? null : [prevHoverValue[0], date]);
       }
 
       // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated
@@ -332,11 +303,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Callback for selecting a date cell in the calendar grid
    */
-  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);
-    var noHoverRangeValid = isNil(hoverRangeValue);
+  const handleSelectDate = useEventCallback((index, date, event) => {
+    const calendarKey = index === 0 ? 'start' : 'end';
+    let nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
+    const hoverRangeValue = getHoverRangeValue(date);
+    const noHoverRangeValid = isNil(hoverRangeValue);
 
     // in `oneTap` mode
     if (oneTap) {
@@ -390,7 +361,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!isSameMonth(calendarDateRange[index], date) || calendarSnapping) {
       setCalendarDateRange({
         dateRange: nextSelectDates,
-        calendarKey: calendarKey,
+        calendarKey,
         eventName: 'changeDate'
       });
     }
@@ -403,32 +374,32 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * 1. Check if the selection is completed.
    * 2. if the selection is completed, set the temporary `hoverValue` empty.
    */
-  useEffect(function () {
-    var selectValueLength = selectedDates.length;
-    var doneSelected = selectValueLength === 0 || selectValueLength === 2;
+  useEffect(() => {
+    const selectValueLength = selectedDates.length;
+    const doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var onChangeCalendarMonth = useEventCallback(function (index, date) {
-    var calendarKey = index === 0 ? 'start' : 'end';
-    var nextCalendarDate = Array.from(calendarDateRange);
+  const onChangeCalendarMonth = useEventCallback((index, date) => {
+    const calendarKey = index === 0 ? 'start' : 'end';
+    const nextCalendarDate = Array.from(calendarDateRange);
     nextCalendarDate[index] = date;
     setCalendarDateRange({
       dateRange: nextCalendarDate,
-      calendarKey: calendarKey,
+      calendarKey,
       eventName: 'changeMonth'
     });
   });
-  var onChangeCalendarTime = useEventCallback(function (index, date) {
-    var calendarKey = index === 0 ? 'start' : 'end';
-    var nextCalendarDate = Array.from(calendarDateRange);
+  const onChangeCalendarTime = useEventCallback((index, date) => {
+    const calendarKey = index === 0 ? 'start' : 'end';
+    const nextCalendarDate = Array.from(calendarDateRange);
     nextCalendarDate[index] = date;
     setCalendarDateRange({
       dateRange: nextCalendarDate,
-      calendarKey: calendarKey,
+      calendarKey,
       eventName: 'changeTime'
     });
-    setSelectedDates(function (prev) {
-      var next = [].concat(prev);
+    setSelectedDates(prev => {
+      const next = [...prev];
 
       // if next[index] is not empty, only update the time after aligning the year, month and day
       next[index] = next[index] ? copyTime({
@@ -438,17 +409,16 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return next;
     });
   });
-  var handleEnter = useEventCallback(function () {
-    var nextCalendarDate;
+  const handleEnter = useEventCallback(() => {
+    let nextCalendarDate;
     if (value && value.length) {
-      var startDate = value[0],
-        endData = value[1];
+      const [startDate, endData] = value;
       nextCalendarDate = [startDate, isSameMonth(startDate, endData) ? addMonths(endData, calendarGap) : endData];
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = getSafeCalendarDate({
         value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null,
-        allowSameMonth: allowSameMonth
+        allowSameMonth
       });
     }
     setSelectedDates(value !== null && value !== void 0 ? value : []);
@@ -456,18 +426,18 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dateRange: nextCalendarDate
     });
   });
-  var handleExit = useEventCallback(function () {
+  const handleExit = useEventCallback(() => {
     setSelectedIdle(true);
   });
 
   /**
    * Toolbar operation callback function
    */
-  var handleShortcutPageDate = useEventCallback(function (range, closeOverlay, event) {
+  const handleShortcutPageDate = useEventCallback(function (range, closeOverlay, event) {
     if (closeOverlay === void 0) {
       closeOverlay = false;
     }
-    var value = range.value;
+    const value = range.value;
     setCalendarDateRange({
       dateRange: value,
       eventName: 'shortcutSelection'
@@ -482,22 +452,19 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // End unfinished selections.
     setSelectedIdle(true);
   });
-  var calculateDateRange = function calculateDateRange() {
-    var _selectedDates$ = selectedDates[0],
-      start = _selectedDates$ === void 0 ? calendarDateRange[0] : _selectedDates$,
-      _selectedDates$2 = selectedDates[1],
-      end = _selectedDates$2 === void 0 ? calendarDateRange[1] : _selectedDates$2;
+  const calculateDateRange = () => {
+    const [start = calendarDateRange[0], end = calendarDateRange[1]] = selectedDates;
     if (onlyShowTime) {
       return [start, end];
     }
     return selectedDates;
   };
-  var handleClickOK = useEventCallback(function (event) {
-    var nextValue = calculateDateRange();
+  const handleClickOK = useEventCallback(event => {
+    const nextValue = calculateDateRange();
     setDateRange(event, nextValue);
     onOk === null || onOk === void 0 || onOk(nextValue, event);
   });
-  var handleClean = useEventCallback(function (event) {
+  const handleClean = useEventCallback(event => {
     setCalendarDateRange({
       dateRange: null
     });
@@ -509,13 +476,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Callback after the input box value is changed.
    */
-  var handleInputChange = useEventCallback(function (value, event) {
+  const handleInputChange = useEventCallback((value, event) => {
     if (!value) {
       return;
     }
-    var startDate = value[0],
-      endDate = value[1];
-    var selectValue = [startDate, endDate];
+    const [startDate, endDate] = value;
+    const selectValue = [startDate, endDate];
     setHoverDateRange(selectValue);
     setSelectedDates(selectValue);
     setCalendarDateRange({
@@ -527,22 +493,22 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Check if the date is disabled
    */
-  var isDateDisabled = useDateDisabled({
-    shouldDisableDate: shouldDisableDate,
-    DEPRECATED_disabledDate: DEPRECATED_disabledDate
+  const isDateDisabled = useDateDisabled({
+    shouldDisableDate,
+    DEPRECATED_disabledDate
   });
 
   /**
    * Check if a date range is disabled
    */
-  var isRangeDisabled = function isRangeDisabled(start, end, target) {
+  const isRangeDisabled = (start, end, target) => {
     if (isDateDisabled) {
       // If the date is between the start and the end the button is disabled
       while (isBefore(start, end) || isSameDay(start, end)) {
         if (isDateDisabled(start, {
           selectDate: selectedDates,
           selectedDone: isSelectedIdle,
-          target: target
+          target
         })) {
           return true;
         }
@@ -555,10 +521,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Determine if the OK button should be disabled
    */
-  var shouldDisableOkButton = function shouldDisableOkButton() {
-    var _calculateDateRange = calculateDateRange(),
-      startDate = _calculateDateRange[0],
-      endDate = _calculateDateRange[1];
+  const shouldDisableOkButton = () => {
+    const [startDate, endDate] = calculateDateRange();
 
     // Check if start or end dates are missing
     if (!startDate || !endDate) {
@@ -580,13 +544,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Check if a shortcut is disabled based on the selected date range
    */
-  var shouldDisableShortcut = function shouldDisableShortcut(selectedDates) {
+  const shouldDisableShortcut = function (selectedDates) {
     if (selectedDates === void 0) {
       selectedDates = [];
     }
-    var _selectedDates = selectedDates,
-      startDate = _selectedDates[0],
-      endDate = _selectedDates[1];
+    const [startDate, endDate] = selectedDates;
 
     // Disable if either start or end date is missing
     if (!startDate || !endDate) {
@@ -596,17 +558,18 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // Check if the date range is disabled for the shortcut
     return isRangeDisabled(startDate, endDate, TARGET.TOOLBAR_SHORTCUT);
   };
-  var handleClose = useEventCallback(function () {
+  const handleClose = useEventCallback(() => {
     var _trigger$current, _trigger$current$clos;
     (_trigger$current = trigger.current) === null || _trigger$current === void 0 || (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 || _trigger$current$clos.call(_trigger$current);
   });
-  var handleInputKeyDown = useEventCallback(function (event) {
+  const handleInputKeyDown = useEventCallback(event => {
     onMenuKeyDown(event, {
       esc: handleClose,
-      enter: function enter() {
+      enter: () => {
         var _trigger$current2;
-        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
-          open = _ref4.open;
+        const {
+          open
+        } = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {};
         if (!open) {
           var _trigger$current3;
           (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 || _trigger$current3.open();
@@ -614,19 +577,21 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
     });
   });
-  var disableCalendarDate = isDateDisabled ? function (date, values, type) {
+  const disableCalendarDate = isDateDisabled ? (date, values, type) => {
     return isDateDisabled(date, {
       selectDate: values,
       selectedDone: isSelectedIdle,
       target: type
     });
   } : undefined;
-  var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
-    var left = positionProps.left,
-      top = positionProps.top,
-      className = positionProps.className;
-    var classes = merge(className, menuClassName, prefix('popup-daterange'));
-    var panelClasses = prefix('daterange-panel', {
+  const renderCalendarOverlay = (positionProps, speakerRef) => {
+    const {
+      left,
+      top,
+      className
+    } = positionProps;
+    const classes = merge(className, menuClassName, prefix('popup-daterange'));
+    const panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar,
       'daterange-panel-only-time': onlyShowTime
     });
@@ -635,40 +600,41 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
      * Set a min-width (528px) when there are two calendars
      * @see https://github.com/rsuite/rsuite/issues/3522
      */
-    var panelStyles = {
+    const panelStyles = {
       minWidth: showOneCalendar || onlyShowTime ? 'auto' : 528
     };
-    var styles = _extends({}, menuStyle, {
-      left: left,
-      top: top
-    });
-    var calendarProps = {
-      locale: locale,
-      isoWeek: isoWeek,
-      weekStart: weekStart,
-      limitEndYear: limitEndYear,
-      showMeridiem: showMeridiem,
-      calendarDateRange: calendarDateRange,
-      limitStartYear: limitStartYear,
-      showWeekNumbers: showWeekNumbers,
+    const styles = {
+      ...menuStyle,
+      left,
+      top
+    };
+    const calendarProps = {
+      locale,
+      isoWeek,
+      weekStart,
+      limitEndYear,
+      showMeridiem,
+      calendarDateRange,
+      limitStartYear,
+      showWeekNumbers,
       format: formatStr,
       value: selectedDates,
-      monthDropdownProps: monthDropdownProps,
+      monthDropdownProps,
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
-      hideHours: hideHours,
-      hideMinutes: hideMinutes,
-      hideSeconds: hideSeconds,
+      hideHours,
+      hideMinutes,
+      hideSeconds,
       disabledHours: shouldDisableHour,
       disabledMinutes: shouldDisableMinute,
       disabledSeconds: shouldDisableSecond,
       disabledDate: disableCalendarDate,
       onSelect: handleSelectDate,
-      onChangeCalendarMonth: onChangeCalendarMonth,
-      onChangeCalendarTime: onChangeCalendarTime,
-      onMouseMove: onMouseMove,
-      renderTitle: renderTitle
+      onChangeCalendarMonth,
+      onChangeCalendarTime,
+      onMouseMove,
+      renderTitle
     };
-    var getCalendars = function getCalendars() {
+    const getCalendars = () => {
       if (showOneCalendar) {
         return /*#__PURE__*/React.createElement(Calendar, _extends({
           index: activeCalendarKey === 'end' ? 1 : 0
@@ -680,15 +646,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         index: 1
       }, calendarProps)));
     };
-    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
-    })) || [];
-    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
-    });
+    const sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'left')) || [];
+    const bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(range => (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined);
     return /*#__PURE__*/React.createElement(PickerPopup, {
       role: "dialog",
-      "aria-labelledby": label ? id + "-label" : undefined,
+      "aria-labelledby": label ? `${id}-label` : undefined,
       tabIndex: -1,
       className: classes,
       ref: mergeRefs(overlay, speakerRef),
@@ -719,10 +681,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       activeKey: activeCalendarKey,
       onSelect: setActiveCalendarKey
     }), /*#__PURE__*/React.createElement("div", {
-      className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
+      className: prefix(`daterange-calendar-${showOneCalendar ? 'single' : 'group'}`)
     }, /*#__PURE__*/React.createElement(DateRangePickerProvider, {
       value: {
-        isSelectedIdle: isSelectedIdle
+        isSelectedIdle
       }
     }, getCalendars()))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
@@ -735,23 +697,22 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ranges: bottomRanges
     })))));
   };
-  var hasValue = !isNil(value) && value.length > 1;
-  var _usePickerClassName = usePickerClassName(_extends({}, props, {
-      classPrefix: classPrefix,
-      name: 'daterange',
-      appearance: appearance,
-      hasValue: hasValue,
-      cleanable: cleanable
-    })),
-    classes = _usePickerClassName[0],
-    usedClassNamePropKeys = _usePickerClassName[1];
-  var caretAs = useMemo(function () {
+  const hasValue = !isNil(value) && value.length > 1;
+  const [classes, usedClassNamePropKeys] = usePickerClassName({
+    ...props,
+    classPrefix,
+    name: 'daterange',
+    appearance,
+    hasValue,
+    cleanable
+  });
+  const caretAs = useMemo(() => {
     if (caretAsProp === null) {
       return null;
     }
     return caretAsProp || (onlyShowTime ? TimeIcon : CalendarIcon);
   }, [caretAsProp, onlyShowTime]);
-  var isErrorValue = function isErrorValue(value) {
+  const isErrorValue = value => {
     if (!value) {
       return false;
     }
@@ -760,15 +721,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (Array.isArray(value) && value.length === 0) {
       return false;
     }
-    var startDate = value[0],
-      endDate = value[1];
+    const [startDate, endDate] = value;
     if (!isValid(startDate) || !isValid(endDate)) {
       return true;
     }
     if (isBefore(endDate, startDate)) {
       return true;
     }
-    var disabledOptions = {
+    const disabledOptions = {
       selectDate: value,
       selectedDone: isSelectedIdle,
       target: TARGET.INPUT
@@ -778,27 +738,26 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     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);
-  var _useCustomizedInput = useCustomizedInput({
-      mode: 'dateRange',
-      value: value,
-      formatStr: formatStr,
-      renderValue: renderValue,
-      readOnly: readOnly,
-      editable: editable,
-      loading: loading
-    }),
-    customValue = _useCustomizedInput.customValue,
-    inputReadOnly = _useCustomizedInput.inputReadOnly,
-    Input = _useCustomizedInput.Input,
-    events = _useCustomizedInput.events;
+  const [ariaProps, rest] = partitionHTMLProps(restProps, {
+    htmlProps: [],
+    includeAria: true
+  });
+  const showCleanButton = cleanable && hasValue && !readOnly;
+  const invalidValue = value && isErrorValue(value);
+  const {
+    customValue,
+    inputReadOnly,
+    Input,
+    events
+  } = useCustomizedInput({
+    mode: 'dateRange',
+    value,
+    formatStr,
+    renderValue,
+    readOnly,
+    editable,
+    loading
+  });
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     ref: trigger,
@@ -809,24 +768,26 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/React.createElement(Component, {
     ref: root,
-    className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
+    className: merge(className, classes, {
+      [prefix('error')]: invalidValue
+    }),
     style: style
   }, plaintext ? /*#__PURE__*/React.createElement(DateRangeInput, {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
+  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [...omitTriggerPropKeys, ...usedClassNamePropKeys, ...calendarOnlyProps]), {
     inside: true,
-    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input-group"]))),
+    className: prefix`input-group`,
     disabled: disabled,
     size: size
   }), /*#__PURE__*/React.createElement(PickerLabel, {
-    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["label"]))),
-    id: id + "-label"
+    className: prefix`label`,
+    id: `${id}-label`
   }, label), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
-    "aria-labelledby": label ? id + "-label" : undefined
+    "aria-labelledby": label ? `${id}-label` : undefined
   }, ariaProps, {
     ref: target,
     id: id,
@@ -847,28 +808,4 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }))));
 });
 DateRangePicker.displayName = 'DateRangePicker';
-DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
-  ranges: PropTypes.array,
-  value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  defaultValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  defaultCalendarValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  hoverRange: PropTypes.oneOfType([oneOf(['week', 'month']), PropTypes.func]),
-  format: PropTypes.string,
-  hideHours: PropTypes.func,
-  hideMinutes: PropTypes.func,
-  hideSeconds: PropTypes.func,
-  isoWeek: PropTypes.bool,
-  weekStart: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
-  oneTap: PropTypes.bool,
-  limitEndYear: PropTypes.number,
-  limitStartYear: PropTypes.number,
-  onChange: PropTypes.func,
-  onOk: PropTypes.func,
-  disabledDate: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableDate" property instead.'),
-  shouldDisableDate: PropTypes.func,
-  onSelect: PropTypes.func,
-  showWeekNumbers: PropTypes.bool,
-  showMeridiem: PropTypes.bool,
-  showOneCalendar: PropTypes.bool
-});
 export default DateRangePicker;