rsuite 5.2.4 → 5.4.2

package/esm/DateRangePicker/Calendar.js

@@ -48,7 +48,7 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setCalendarState(undefined);
   }, [index, onChangeCalendarDate]);
   var handleChangePageTime = useCallback(function (nextPageDate) {
-    onChangeCalendarTime(index, nextPageDate);
+    onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
   var handleToggleMeridian = useCallback(function (event) {
     onToggleMeridian(index, event);

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { PickerComponent } from '../Picker';
-import { DisabledDateFunction, RangeType, ValueType } from './types';
-export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
+import { DisabledDateFunction, RangeType, DateRange } from './types';
+export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null> {
     /** Configure shortcut options */
     ranges?: RangeType[];
     /** Format date */
     format?: string;
     /** The date range that will be selected when you click on the date */
-    hoverRange?: 'week' | 'month' | ((date: Date) => ValueType);
+    hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
     /** Whether to click once on selected date range，Can be used with hoverRange */
     oneTap?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
@@ -22,7 +22,7 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     /** Meridian format */
     showMeridian?: boolean;
     /** Set default date for calendar */
-    defaultCalendarValue?: ValueType;
+    defaultCalendarValue?: DateRange;
     /** The character that separates two dates */
     character?: string;
     /** Disabled date */
@@ -30,11 +30,11 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     /** Called when the option is selected */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: ValueType, event: React.SyntheticEvent) => void;
+    onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */
-    renderValue?: (value: ValueType, format: string) => React.ReactNode;
+    renderValue?: (value: DateRange, format: string) => React.ReactNode;
 }
 export interface DateRangePicker extends PickerComponent<DateRangePickerProps> {
     /** Allow the maximum number of days specified, other dates are disabled */

package/esm/DateRangePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
-import isUndefined from 'lodash/isUndefined';
+import isNil from 'lodash/isNil';
 import omit from 'lodash/omit';
 import partial from 'lodash/partial';
 import pick from 'lodash/pick';
@@ -16,7 +16,7 @@ import Calendar from './Calendar';
 import * as disabledDateUtils from './disabledDateUtils';
 import { getCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange, setTimingMargin } from './utils';
 var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _ref, _merge;
+  var _ref, _ref2, _merge;
 
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -36,7 +36,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$format = props.format,
       formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
       hoverRange = props.hoverRange,
-      isoWeek = props.isoWeek,
+      _props$isoWeek = props.isoWeek,
+      isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
       _props$limitEndYear = props.limitEndYear,
       limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
       overrideLocale = props.locale,
@@ -78,7 +79,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
-  var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
+  var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
       value = _useControlled[0],
       setValue = _useControlled[1];
   /**
@@ -100,17 +101,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
   var _useState = useState((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
-      selectValue = _useState[0],
-      setSelectValue = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
+      selectedDates = _useState[0],
+      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
 
-  var _useState2 = useState([]),
-      hoverValue = _useState2[0],
-      setHoverValue = _useState2[1]; // The displayed calendar panel is rendered based on this value.
+  var _useState2 = useState(null),
+      hoverDateRange = _useState2[0],
+      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
   var _useState3 = useState(getCalendarDate({
-    value: valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue
+    value: (_ref2 = valueProp !== null && valueProp !== void 0 ? valueProp : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
       calendarDate = _useState3[0],
       setCalendarDate = _useState3[1];
@@ -138,18 +139,18 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, []); // if valueProp changed then update selectValue/hoverValue
 
   useEffect(function () {
-    setSelectValue(valueProp !== null && valueProp !== void 0 ? valueProp : []);
-    setHoverValue(valueProp !== null && valueProp !== void 0 ? valueProp : []);
+    setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
+    setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
 
   var _useState5 = useState(false),
       isPickerToggleActive = _useState5[0],
       setPickerToggleActive = _useState5[1];
 
-  var rootRef = useRef();
-  var overlayRef = useRef();
-  var targetRef = useRef();
-  var triggerRef = useRef();
+  var rootRef = useRef(null);
+  var overlayRef = useRef(null);
+  var targetRef = useRef(null);
+  var triggerRef = useRef(null);
   var handleCloseDropdown = useCallback(function () {
     var _triggerRef$current, _triggerRef$current$c;
 
@@ -162,14 +163,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     rootRef: rootRef
   });
   var getDisplayString = useCallback(function (nextValue, isPlaintext) {
-    var _nextValue, _nextValue2;
+    var _nextValue$, _nextValue$2;
 
-    if (nextValue === void 0) {
-      nextValue = value;
-    }
-
-    var startDate = (_nextValue = nextValue) === null || _nextValue === void 0 ? void 0 : _nextValue[0];
-    var endDate = (_nextValue2 = nextValue) === null || _nextValue2 === void 0 ? void 0 : _nextValue2[1];
+    var startDate = (_nextValue$ = nextValue === null || nextValue === void 0 ? void 0 : nextValue[0]) !== null && _nextValue$ !== void 0 ? _nextValue$ : null;
+    var endDate = (_nextValue$2 = nextValue === null || nextValue === void 0 ? void 0 : nextValue[1]) !== null && _nextValue$2 !== void 0 ? _nextValue$2 : null;
 
     if (startDate && endDate) {
       var displayValue = [startDate, endDate].sort(compareAsc);
@@ -188,35 +185,33 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return isPlaintext ? '' : placeholder || rangeFormatStr;
-  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue, value]);
+  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
   /**
    * preset hover range
    */
 
   var getHoverRangeValue = useCallback(function (date) {
-    if (!hoverRange) {
-      return [];
-    }
-
-    var hoverRangeFunc = hoverRange;
+    function getHoverRangeFunc() {
+      if (hoverRange === 'week') {
+        return partial(getWeekHoverRange, isoWeek);
+      } else if (hoverRange === 'month') {
+        return getMonthHoverRange;
+      }
 
-    if (hoverRange === 'week') {
-      hoverRangeFunc = partial(getWeekHoverRange, isoWeek);
+      return hoverRange;
     }
 
-    if (hoverRangeFunc === 'month') {
-      hoverRangeFunc = getMonthHoverRange;
-    }
+    var hoverRangeFunc = getHoverRangeFunc();
 
-    if (typeof hoverRangeFunc !== 'function') {
-      return [];
+    if (isNil(hoverRangeFunc)) {
+      return null;
     }
 
     var hoverValues = hoverRangeFunc(date);
     var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;
 
     if (!isHoverRangeValid) {
-      return [];
+      return null;
     }
 
     if (DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
@@ -225,13 +220,13 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     return hoverValues;
   }, [hoverRange, isoWeek]);
-  var handleValueUpdate = useCallback(function (event, nextSelectValue, closeOverlay) {
+  var handleValueUpdate = useCallback(function (event, nextValue, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
 
-    var nextValue = !isUndefined(nextSelectValue) ? nextSelectValue : selectValue;
-    setSelectValue(nextValue || []);
+    // If nextValue is null, it means that the user is erasing the selected dates.
+    setSelectedDates(nextValue !== null && nextValue !== void 0 ? nextValue : []);
 
     if (!isSameRange(nextValue, value, formatStr)) {
       setValue(nextValue);
@@ -242,40 +237,45 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [formatStr, handleCloseDropdown, onChange, selectValue, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
    */
 
   var handleMouseMove = useCallback(function (date) {
-    var hoverRangeValue = getHoverRangeValue(date); // After the first click
+    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 (!hasDoneSelect.current) {
-      // If hoverRange is set, you need to change the value of hoverValue according to the rules
-      if (hoverRange) {
-        var nextHoverValue = [selectRangeValueRef.current[0], hoverRangeValue[1]];
+      // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
+      if (!isNil(nextHoverDateRange)) {
+        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
 
-        if (DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
-          nextHoverValue[0] = hoverRangeValue[0];
-          nextHoverValue[1] = selectRangeValueRef.current[1];
+        if (DateUtils.isBefore(nextHoverDateRange[0], selectRangeValueRef.current[0])) {
+          nextSelectedDates = [nextHoverDateRange[0], selectRangeValueRef.current[1]];
         }
 
-        setSelectValue(nextHoverValue);
+        setSelectedDates(nextSelectedDates);
       } else {
-        setHoverValue(function (prevHoverValue) {
-          return [prevHoverValue[0], date];
+        setHoverDateRange(function (prevHoverValue) {
+          return isNil(prevHoverValue) ? null : [prevHoverValue[0], date];
         });
-      } // Before the first click, if hoverRangeValue has a value, hoverValue needs to be updated
+      } // Before the first click, if nextHoverDateRange has a value, hoverDateRange needs to be updated
 
-    } else if (hoverRange && hoverRangeValue.length) {
-      setHoverValue(hoverRangeValue);
+    } else if (!isNil(nextHoverDateRange)) {
+      setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, hoverRange]);
-  var handleSelectValueChange = useCallback(function (date, event) {
-    var nextSelectValue = Array.from(hoverValue);
+  }, [getHoverRangeValue]);
+  /**
+   * Callback for selecting a date cell in the calendar grid
+   */
+
+  var handleSelectDate = useCallback(function (date, event) {
+    var nextSelectDates = hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : [];
     var hoverRangeValue = getHoverRangeValue(date);
-    var noHoverRangeValid = hoverRangeValue.length !== 2; // in `oneTap` mode
+    var noHoverRangeValid = isNil(hoverRangeValue); // in `oneTap` mode
 
     if (hasDoneSelect.current && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [setTimingMargin(date), setTimingMargin(date, 'right')] : hoverRangeValue);
@@ -287,32 +287,32 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (noHoverRangeValid) {
       // start select
       if (hasDoneSelect.current) {
-        nextSelectValue = [date];
+        nextSelectDates = [date];
       } else {
         // finish select
-        nextSelectValue[1] = date;
+        nextSelectDates[1] = date;
       }
     } else {
       if (!hasDoneSelect.current) {
-        nextSelectValue = selectValue;
+        nextSelectDates = selectedDates;
         selectRangeValueRef.current = null;
       } else {
-        nextSelectValue = hoverRangeValue;
+        nextSelectDates = hoverRangeValue;
         selectRangeValueRef.current = hoverRangeValue;
       }
     } // If user have completed the selection, then sort
 
 
-    if (nextSelectValue.length === 2 && DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
-      nextSelectValue.reverse();
+    if (nextSelectDates.length === 2 && DateUtils.isAfter(nextSelectDates[0], nextSelectDates[1])) {
+      nextSelectDates.reverse();
     }
 
-    setHoverValue(nextSelectValue);
-    setSelectValue(nextSelectValue);
-    updateCalendarDate(nextSelectValue);
+    setHoverDateRange(nextSelectDates.length === 2 ? nextSelectDates : [nextSelectDates[0], nextSelectDates[0]]);
+    setSelectedDates(nextSelectDates);
+    updateCalendarDate(nextSelectDates);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
     hasDoneSelect.current = !hasDoneSelect.current;
-  }, [getHoverRangeValue, handleValueUpdate, hoverValue, onSelect, oneTap, selectValue, updateCalendarDate]);
+  }, [getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDate]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -320,19 +320,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
   useEffect(function () {
-    var _selectValue$length;
-
-    var selectValueLength = (_selectValue$length = selectValue === null || selectValue === void 0 ? void 0 : selectValue.length) !== null && _selectValue$length !== void 0 ? _selectValue$length : 0;
+    var selectValueLength = selectedDates.length;
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
-    doneSelected && setHoverValue([]);
-  }, [selectValue]);
+    doneSelected && setHoverDateRange(null);
+  }, [selectedDates]);
   var handleChangeCalendarDate = useCallback(function (index, date) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
     updateCalendarDate(nextCalendarDate);
   }, [calendarDate, updateCalendarDate]);
   var handleChangeCalendarTime = useCallback(function (index, date) {
-    setSelectValue(function (prev) {
+    setSelectedDates(function (prev) {
       var next = [].concat(prev);
       var clonedDate = new Date(date.valueOf()); // if next[index] is not empty, only update the time after aligning the year, month and day
 
@@ -357,24 +355,28 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     next[index] = DateUtils.setHours(clonedDate, nextHours);
     setCalendarDate(next); // If the value already exists, update the value again.
 
-    if (selectValue.length === 2) {
-      setSelectValue(next);
+    if (selectedDates.length === 2) {
+      setSelectedDates(next);
     }
-  }, [calendarDate, selectValue]);
+  }, [calendarDate, selectedDates]);
   /**
    * Toolbar operation callback function
    */
 
   var handleShortcutPageDate = useCallback(function (value, closeOverlay, event) {
+    if (closeOverlay === void 0) {
+      closeOverlay = false;
+    }
+
     handleValueUpdate(event, value, closeOverlay);
   }, [handleValueUpdate]);
   var handleOK = useCallback(function (event) {
-    handleValueUpdate(event);
-    onOk === null || onOk === void 0 ? void 0 : onOk(selectValue, event);
-  }, [handleValueUpdate, onOk, selectValue]);
+    handleValueUpdate(event, selectedDates);
+    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
+  }, [handleValueUpdate, onOk, selectedDates]);
   var handleClean = useCallback(function (event) {
-    updateCalendarDate();
-    handleValueUpdate(event, []);
+    updateCalendarDate(null);
+    handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDate]);
   /**
    * Callback after the input box value is changed.
@@ -403,13 +405,13 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return;
     }
 
-    if (disabledDate(startDate, selectValue, true, DATERANGE_DISABLED_TARGET.CALENDAR)) {
+    if (isDateDisabled(startDate, selectValue, true, DATERANGE_DISABLED_TARGET.CALENDAR)) {
       setInputState('Error');
       return;
     }
 
-    setHoverValue(selectValue);
-    setSelectValue(selectValue);
+    setHoverDateRange(selectValue);
+    setSelectedDates(selectValue);
     updateCalendarDate(selectValue);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [character, rangeFormatStr, updateCalendarDate]);
@@ -419,11 +421,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var handleInputPressEnd = useCallback(function (event) {
     if (inputState === 'Typing') {
-      handleValueUpdate(event, selectValue);
+      handleValueUpdate(event, selectedDates.length === 2 ? selectedDates : null);
     }
 
     setInputState('Initial');
-  }, [handleValueUpdate, selectValue, inputState]);
+  }, [handleValueUpdate, selectedDates, inputState]);
   var handleEnter = useCallback(function () {
     var nextCalendarDate;
 
@@ -433,13 +435,13 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       nextCalendarDate = [_startDate, isSameMonth(_startDate, endData) ? addMonths(endData, 1) : endData];
     } else {
       nextCalendarDate = getCalendarDate({
-        value: defaultCalendarValue
+        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
       });
     }
 
-    setSelectValue(value);
+    setSelectedDates(value !== null && value !== void 0 ? value : []);
     updateCalendarDate(nextCalendarDate);
-  }, [defaultCalendarValue, updateCalendarDate, setSelectValue, value]);
+  }, [defaultCalendarValue, updateCalendarDate, setSelectedDates, value]);
   var handleEntered = useCallback(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setPickerToggleActive(true);
@@ -449,17 +451,16 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasDoneSelect.current = true;
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
-  var disabledDate = useCallback(function (date, selectDate, selectedDone, target) {
-    return disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target);
+  var isDateDisabled = useCallback(function (date, selectDate, selectedDone, target) {
+    var _disabledDateProp;
+
+    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
   }, [disabledDateProp]);
   var disabledByBetween = useCallback(function (start, end, type) {
-    var selectStartDate = selectValue[0],
-        selectEndDate = selectValue[1];
-    var nextSelectValue = [selectStartDate, selectEndDate]; // If the date is between the start and the end
+    // If the date is between the start and the end
     // the button is disabled
-
     while (DateUtils.isBefore(start, end) || DateUtils.isSameDay(start, end)) {
-      if (disabledDate(start, nextSelectValue, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
         return true;
       }
 
@@ -467,17 +468,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return false;
-  }, [disabledDate, selectValue]);
+  }, [isDateDisabled, selectedDates]);
   var disabledOkButton = useCallback(function () {
-    var start = selectValue[0],
-        end = selectValue[1];
+    var start = selectedDates[0],
+        end = selectedDates[1];
 
     if (!start || !end || !hasDoneSelect.current) {
       return true;
     }
 
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectValue]);
+  }, [disabledByBetween, selectedDates]);
   var disabledShortcutButton = useCallback(function (value) {
     if (value === void 0) {
       value = [];
@@ -494,8 +495,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = useCallback(function (date, values, type) {
-    return disabledDate(date, values, hasDoneSelect.current, type);
-  }, [disabledDate]);
+    return isDateDisabled(date, values, hasDoneSelect.current, type);
+  }, [isDateDisabled]);
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -521,18 +522,18 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       calendarDate: calendarDate,
       disabledDate: handleDisabledDate,
       format: formatStr,
-      hoverRangeValue: hoverValue,
+      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
       isoWeek: isoWeek,
       limitEndYear: limitEndYear,
       locale: locale,
       showOneCalendar: showOneCalendar,
       showWeekNumbers: showWeekNumbers,
-      value: selectValue,
+      value: selectedDates,
       showMeridian: showMeridian,
       onChangeCalendarDate: handleChangeCalendarDate,
       onChangeCalendarTime: handleChangeCalendarTime,
       onMouseMove: handleMouseMove,
-      onSelect: handleSelectValueChange,
+      onSelect: handleSelectDate,
       onToggleMeridian: handleToggleMeridian
     };
     return /*#__PURE__*/React.createElement(PickerOverlay, {
@@ -546,7 +547,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix('daterange-content')
     }, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-header')
-    }, getDisplayString(selectValue)), /*#__PURE__*/React.createElement("div", {
+    }, getDisplayString(selectedDates)), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 0
@@ -554,7 +555,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       index: 1
     }, panelProps)))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
-      calendarDate: selectValue,
+      calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,
       disabledShortcut: disabledShortcutButton,
       hideOkBtn: oneTap,
@@ -564,7 +565,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })));
   };
 
-  var hasValue = value && value.length > 1;
+  var hasValue = !isNil(value) && value.length > 1;
 
   var _usePickerClassName = usePickerClassName(_extends({}, props, {
     classPrefix: classPrefix,
@@ -605,9 +606,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: IconCalendar,
+    caretAs: IconCalendar,
     disabled: disabled
-  }), getDisplayString())));
+  }), getDisplayString(value))));
 });
 DateRangePicker.after = disabledDateUtils.after;
 DateRangePicker.afterToday = disabledDateUtils.afterToday;

package/esm/DateRangePicker/types.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import { DATERANGE_DISABLED_TARGET } from '../utils/constants';
 export declare type ValueType = [Date?, Date?];
+export declare type DateRange = [Date, Date];
 export interface RangeType {
     label: React.ReactNode;
     closeOverlay?: boolean;
-    value: ValueType | ((value?: ValueType) => ValueType);
+    value: DateRange | ((value?: ValueType) => DateRange);
 }
 export declare type DisabledDateFunction = (
 /** Date used to determine if disabling is required. */

package/esm/DateRangePicker/utils.d.ts

@@ -1,9 +1,9 @@
-import { RangeType, ValueType } from './types';
+import { DateRange, RangeType } from './types';
 export declare const setTimingMargin: (date: any, way?: string) => Date;
 export declare function getCalendarDate({ value }: {
-    value?: ValueType;
-}): ValueType;
+    value: [] | [Date] | [Date, Date] | null;
+}): DateRange;
 export declare const getDefaultRanges: () => RangeType[];
-export declare const isSameRange: (source: ValueType, dest: ValueType, format: string) => boolean;
-export declare const getMonthHoverRange: (date: Date) => ValueType;
-export declare const getWeekHoverRange: (isoWeek: boolean, date: Date) => ValueType;
+export declare const isSameRange: (source: DateRange | null, dest: DateRange | null, format: string) => boolean;
+export declare const getMonthHoverRange: (date: Date) => DateRange;
+export declare const getWeekHoverRange: (isoWeek: boolean, date: Date) => DateRange;

package/esm/DateRangePicker/utils.js

@@ -37,10 +37,14 @@ export var getDefaultRanges = function getDefaultRanges() {
   }];
 };
 export var isSameRange = function isSameRange(source, dest, format) {
-  var result = DateUtils.isSameDay(source === null || source === void 0 ? void 0 : source[0], dest === null || dest === void 0 ? void 0 : dest[0]) && DateUtils.isSameDay(source === null || source === void 0 ? void 0 : source[1], dest === null || dest === void 0 ? void 0 : dest[1]);
+  // If both are null, reguard as same
+  if (null === source && null === dest) return true; // If only one is null, regard as different
+
+  if (null === source || null === dest) return false;
+  var result = DateUtils.isSameDay(source[0], dest[0]) && DateUtils.isSameDay(source[1], dest[1]);
 
   if (DateUtils.shouldTime(format)) {
-    result && (result = DateUtils.isSameSecond(source === null || source === void 0 ? void 0 : source[0], dest === null || dest === void 0 ? void 0 : dest[0]) && DateUtils.isSameSecond(source === null || source === void 0 ? void 0 : source[1], dest === null || dest === void 0 ? void 0 : dest[1]));
+    result && (result = DateUtils.isSameSecond(source[0], dest[0]) && DateUtils.isSameSecond(source[1], dest[1]));
   }
 
   return result;

package/esm/Disclosure/Disclosure.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import DisclosureButton from './DisclosureButton';
 import DisclosureContent from './DisclosureContent';
-export interface DisclosureRenderProps {
+export declare type DisclosureTrigger = 'click' | 'mouseover';
+export interface DisclosureRenderProps extends Pick<React.HTMLAttributes<HTMLElement>, 'onMouseOver' | 'onMouseOut'> {
     open: boolean;
 }
 export interface DisclosureProps {
@@ -13,10 +14,12 @@ export interface DisclosureProps {
     hideOnClickOutside?: boolean;
     /** Callback when disclosure button is being activated to update the open state */
     onToggle?: (open: boolean, event: React.SyntheticEvent) => void;
+    /** What mouse events should disclosure reacts to */
+    trigger?: DisclosureTrigger[];
 }
-declare function Disclosure(props: DisclosureProps): JSX.Element;
-declare namespace Disclosure {
-    var Button: typeof DisclosureButton;
-    var Content: typeof DisclosureContent;
+export interface DisclosureComponent extends React.FC<DisclosureProps> {
+    Button: typeof DisclosureButton;
+    Content: typeof DisclosureContent;
 }
+declare const Disclosure: DisclosureComponent;
 export default Disclosure;