rsuite 5.2.3 → 5.4.1

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,
@@ -52,6 +53,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$showOneCalenda = props.showOneCalendar,
       showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
       showWeekNumbers = props.showWeekNumbers,
+      showMeridian = props.showMeridian,
       style = props.style,
       toggleAs = props.toggleAs,
       valueProp = props.value,
@@ -64,7 +66,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect"]);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -77,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];
   /**
@@ -99,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];
@@ -137,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;
 
@@ -161,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);
@@ -187,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])) {
@@ -224,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);
@@ -241,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);
@@ -286,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.
@@ -319,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
 
@@ -344,20 +343,40 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * The callback triggered when PM/AM is switched.
+   */
+
+  var handleToggleMeridian = useCallback(function (index) {
+    var next = Array.from(calendarDate);
+    var clonedDate = new Date(next[index].valueOf());
+    var hours = DateUtils.getHours(clonedDate);
+    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
+    next[index] = DateUtils.setHours(clonedDate, nextHours);
+    setCalendarDate(next); // If the value already exists, update the value again.
+
+    if (selectedDates.length === 2) {
+      setSelectedDates(next);
+    }
+  }, [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.
@@ -386,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]);
@@ -402,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;
 
@@ -416,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);
@@ -432,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;
       }
 
@@ -450,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 = [];
@@ -477,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,
@@ -504,17 +522,19 @@ 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, {
       className: classes,
@@ -527,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
@@ -535,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,
@@ -545,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,
@@ -586,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;
@@ -609,11 +629,12 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   isoWeek: PropTypes.bool,
   oneTap: PropTypes.bool,
   limitEndYear: PropTypes.number,
-  showWeekNumbers: PropTypes.bool,
   onChange: PropTypes.func,
   onOk: PropTypes.func,
   disabledDate: PropTypes.func,
   onSelect: PropTypes.func,
+  showWeekNumbers: PropTypes.bool,
+  showMeridian: PropTypes.bool,
   showOneCalendar: PropTypes.bool
 });
 export default DateRangePicker;

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.js

@@ -41,12 +41,14 @@ function Disclosure(props) {
       openState = _useReducer[0].open,
       dispatch = _useReducer[1];
 
-  var containerElementRef = useRef();
+  var containerElementRef = useRef(null);
   var open = openProp !== null && openProp !== void 0 ? openProp : openState;
   useClickOutside({
     enabled: hideOnClickOutside,
     isOutside: function isOutside(event) {
-      return !containerElementRef.current.contains(event.target);
+      var _containerElementRef$;
+
+      return !((_containerElementRef$ = containerElementRef.current) !== null && _containerElementRef$ !== void 0 && _containerElementRef$.contains(event.target));
     },
     handle: function handle() {
       return dispatch({
@@ -54,7 +56,7 @@ function Disclosure(props) {
       });
     }
   });
-  var context = useMemo(function () {
+  var contextValue = useMemo(function () {
     return [{
       open: open
     }, dispatch, {
@@ -62,7 +64,7 @@ function Disclosure(props) {
     }];
   }, [open, dispatch, onToggle]);
   return /*#__PURE__*/React.createElement(DisclosureContext.Provider, {
-    value: context
+    value: contextValue
   }, children({
     open: open
   }, containerElementRef));

package/esm/Disclosure/DisclosureButton.js

@@ -1,15 +1,16 @@
-import { useCallback, useContext, useRef } from 'react';
-import DisclosureContext, { DisclosureActionTypes } from './DisclosureContext';
+import { useCallback, useRef } from 'react';
+import { DisclosureActionTypes } from './DisclosureContext';
 import { KEY_VALUES } from '../utils';
+import useDisclosureContext from './useDisclosureContext';
 
 function DisclosureButton(props) {
   var children = props.children;
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
 
-  var _useContext = useContext(DisclosureContext),
-      open = _useContext[0].open,
-      dispatch = _useContext[1],
-      onToggle = _useContext[2].onToggle;
+  var _useDisclosureContext = useDisclosureContext(DisclosureButton.displayName),
+      open = _useDisclosureContext[0].open,
+      dispatch = _useDisclosureContext[1],
+      onToggle = _useDisclosureContext[2].onToggle;
 
   var toggle = useCallback(function (event) {
     if (!open) {