rsuite 5.2.3 → 5.4.1

package/cjs/DateRangePicker/DateRangePicker.js

@@ -13,7 +13,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 
-var _isUndefined = _interopRequireDefault(require("lodash/isUndefined"));
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
 
 var _omit = _interopRequireDefault(require("lodash/omit"));
 
@@ -42,7 +42,7 @@ var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 var _utils2 = require("./utils");
 
 var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _ref, _merge;
+  var _ref, _ref2, _merge;
 
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -62,7 +62,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       _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,6 +79,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       _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,
@@ -90,7 +92,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOk = props.onOk,
       onOpen = props.onOpen,
       onSelect = props.onSelect,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -103,7 +105,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var rangeFormatStr = "" + formatStr + character + formatStr;
 
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : []),
+  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
       value = _useControlled[0],
       setValue = _useControlled[1];
   /**
@@ -125,17 +127,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   var _useState = (0, _react.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 = (0, _react.useState)([]),
-      hoverValue = _useState2[0],
-      setHoverValue = _useState2[1]; // The displayed calendar panel is rendered based on this value.
+  var _useState2 = (0, _react.useState)(null),
+      hoverDateRange = _useState2[0],
+      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
 
   var _useState3 = (0, _react.useState)((0, _utils2.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];
@@ -163,18 +165,18 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }, []); // if valueProp changed then update selectValue/hoverValue
 
   (0, _react.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 = (0, _react.useState)(false),
       isPickerToggleActive = _useState5[0],
       setPickerToggleActive = _useState5[1];
 
-  var rootRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var triggerRef = (0, _react.useRef)();
+  var rootRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var triggerRef = (0, _react.useRef)(null);
   var handleCloseDropdown = (0, _react.useCallback)(function () {
     var _triggerRef$current, _triggerRef$current$c;
 
@@ -187,14 +189,10 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rootRef: rootRef
   });
   var getDisplayString = (0, _react.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(_dateUtils.compareAsc);
@@ -213,35 +211,33 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return isPlaintext ? '' : placeholder || rangeFormatStr;
-  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue, value]);
+  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
   /**
    * preset hover range
    */
 
   var getHoverRangeValue = (0, _react.useCallback)(function (date) {
-    if (!hoverRange) {
-      return [];
-    }
-
-    var hoverRangeFunc = hoverRange;
+    function getHoverRangeFunc() {
+      if (hoverRange === 'week') {
+        return (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
+      } else if (hoverRange === 'month') {
+        return _utils2.getMonthHoverRange;
+      }
 
-    if (hoverRange === 'week') {
-      hoverRangeFunc = (0, _partial.default)(_utils2.getWeekHoverRange, isoWeek);
+      return hoverRange;
     }
 
-    if (hoverRangeFunc === 'month') {
-      hoverRangeFunc = _utils2.getMonthHoverRange;
-    }
+    var hoverRangeFunc = getHoverRangeFunc();
 
-    if (typeof hoverRangeFunc !== 'function') {
-      return [];
+    if ((0, _isNil.default)(hoverRangeFunc)) {
+      return null;
     }
 
     var hoverValues = hoverRangeFunc(date);
     var isHoverRangeValid = hoverValues instanceof Array && hoverValues.length === 2;
 
     if (!isHoverRangeValid) {
-      return [];
+      return null;
     }
 
     if (_utils.DateUtils.isAfter(hoverValues[0], hoverValues[1])) {
@@ -250,13 +246,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
     return hoverValues;
   }, [hoverRange, isoWeek]);
-  var handleValueUpdate = (0, _react.useCallback)(function (event, nextSelectValue, closeOverlay) {
+  var handleValueUpdate = (0, _react.useCallback)(function (event, nextValue, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
 
-    var nextValue = !(0, _isUndefined.default)(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 (!(0, _utils2.isSameRange)(nextValue, value, formatStr)) {
       setValue(nextValue);
@@ -267,40 +263,45 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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 = (0, _react.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 (!(0, _isNil.default)(nextHoverDateRange)) {
+        var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
 
-        if (_utils.DateUtils.isBefore(hoverRangeValue[0], selectRangeValueRef.current[0])) {
-          nextHoverValue[0] = hoverRangeValue[0];
-          nextHoverValue[1] = selectRangeValueRef.current[1];
+        if (_utils.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 (0, _isNil.default)(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 (!(0, _isNil.default)(nextHoverDateRange)) {
+      setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, hoverRange]);
-  var handleSelectValueChange = (0, _react.useCallback)(function (date, event) {
-    var nextSelectValue = Array.from(hoverValue);
+  }, [getHoverRangeValue]);
+  /**
+   * Callback for selecting a date cell in the calendar grid
+   */
+
+  var handleSelectDate = (0, _react.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 = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
 
     if (hasDoneSelect.current && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [(0, _utils2.setTimingMargin)(date), (0, _utils2.setTimingMargin)(date, 'right')] : hoverRangeValue);
@@ -312,32 +313,32 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     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 && _utils.DateUtils.isAfter(nextSelectValue[0], nextSelectValue[1])) {
-      nextSelectValue.reverse();
+    if (nextSelectDates.length === 2 && _utils.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.
@@ -345,19 +346,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
   (0, _react.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 = (0, _react.useCallback)(function (index, date) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
     updateCalendarDate(nextCalendarDate);
   }, [calendarDate, updateCalendarDate]);
   var handleChangeCalendarTime = (0, _react.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
 
@@ -370,20 +369,42 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     handleChangeCalendarDate(index, date);
   }, [handleChangeCalendarDate]);
+  /**
+   * The callback triggered when PM/AM is switched.
+   */
+
+  var handleToggleMeridian = (0, _react.useCallback)(function (index) {
+    var next = Array.from(calendarDate);
+    var clonedDate = new Date(next[index].valueOf());
+
+    var hours = _utils.DateUtils.getHours(clonedDate);
+
+    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
+    next[index] = _utils.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 = (0, _react.useCallback)(function (value, closeOverlay, event) {
+    if (closeOverlay === void 0) {
+      closeOverlay = false;
+    }
+
     handleValueUpdate(event, value, closeOverlay);
   }, [handleValueUpdate]);
   var handleOK = (0, _react.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 = (0, _react.useCallback)(function (event) {
-    updateCalendarDate();
-    handleValueUpdate(event, []);
+    updateCalendarDate(null);
+    handleValueUpdate(event, null);
   }, [handleValueUpdate, updateCalendarDate]);
   /**
    * Callback after the input box value is changed.
@@ -412,13 +433,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       return;
     }
 
-    if (disabledDate(startDate, selectValue, true, _utils.DATERANGE_DISABLED_TARGET.CALENDAR)) {
+    if (isDateDisabled(startDate, selectValue, true, _utils.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]);
@@ -428,11 +449,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
 
   var handleInputPressEnd = (0, _react.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 = (0, _react.useCallback)(function () {
     var nextCalendarDate;
 
@@ -442,13 +463,13 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       nextCalendarDate = [_startDate, (0, _dateUtils.isSameMonth)(_startDate, endData) ? (0, _dateUtils.addMonths)(endData, 1) : endData];
     } else {
       nextCalendarDate = (0, _utils2.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 = (0, _react.useCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setPickerToggleActive(true);
@@ -458,17 +479,16 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasDoneSelect.current = true;
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
-  var disabledDate = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {
-    return disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target);
+  var isDateDisabled = (0, _react.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 = (0, _react.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 (_utils.DateUtils.isBefore(start, end) || _utils.DateUtils.isSameDay(start, end)) {
-      if (disabledDate(start, nextSelectValue, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
         return true;
       }
 
@@ -476,17 +496,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return false;
-  }, [disabledDate, selectValue]);
+  }, [isDateDisabled, selectedDates]);
   var disabledOkButton = (0, _react.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, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectValue]);
+  }, [disabledByBetween, selectedDates]);
   var disabledShortcutButton = (0, _react.useCallback)(function (value) {
     if (value === void 0) {
       value = [];
@@ -503,8 +523,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   }, [disabledByBetween]);
   var handleDisabledDate = (0, _react.useCallback)(function (date, values, type) {
-    return disabledDate(date, values, hasDoneSelect.current, type);
-  }, [disabledDate]);
+    return isDateDisabled(date, values, hasDoneSelect.current, type);
+  }, [isDateDisabled]);
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -528,17 +548,19 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       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.default.createElement(_Picker.PickerOverlay, {
       className: classes,
@@ -551,7 +573,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix('daterange-content')
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-header')
-    }, getDisplayString(selectValue)), /*#__PURE__*/_react.default.createElement("div", {
+    }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
@@ -559,7 +581,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       index: 1
     }, panelProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
-      calendarDate: selectValue,
+      calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,
       disabledShortcut: disabledShortcutButton,
       hideOkBtn: oneTap,
@@ -569,7 +591,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     })));
   };
 
-  var hasValue = value && value.length > 1;
+  var hasValue = !(0, _isNil.default)(value) && value.length > 1;
 
   var _usePickerClassName = (0, _Picker.usePickerClassName)((0, _extends2.default)({}, props, {
     classPrefix: classPrefix,
@@ -610,9 +632,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     hasValue: hasValue,
     active: isPickerToggleActive,
     placement: placement,
-    caretComponent: _Calendar.default,
+    caretAs: _Calendar.default,
     disabled: disabled
-  }), getDisplayString())));
+  }), getDisplayString(value))));
 });
 
 DateRangePicker.after = disabledDateUtils.after;
@@ -634,11 +656,12 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   isoWeek: _propTypes.default.bool,
   oneTap: _propTypes.default.bool,
   limitEndYear: _propTypes.default.number,
-  showWeekNumbers: _propTypes.default.bool,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
+  showWeekNumbers: _propTypes.default.bool,
+  showMeridian: _propTypes.default.bool,
   showOneCalendar: _propTypes.default.bool
 });
 var _default = DateRangePicker;

package/cjs/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/cjs/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/cjs/DateRangePicker/utils.js

@@ -52,10 +52,15 @@ var getDefaultRanges = function getDefaultRanges() {
 exports.getDefaultRanges = getDefaultRanges;
 
 var isSameRange = function isSameRange(source, dest, format) {
-  var result = _utils.DateUtils.isSameDay(source === null || source === void 0 ? void 0 : source[0], dest === null || dest === void 0 ? void 0 : dest[0]) && _utils.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 = _utils.DateUtils.isSameDay(source[0], dest[0]) && _utils.DateUtils.isSameDay(source[1], dest[1]);
 
   if (_utils.DateUtils.shouldTime(format)) {
-    result && (result = _utils.DateUtils.isSameSecond(source === null || source === void 0 ? void 0 : source[0], dest === null || dest === void 0 ? void 0 : dest[0]) && _utils.DateUtils.isSameSecond(source === null || source === void 0 ? void 0 : source[1], dest === null || dest === void 0 ? void 0 : dest[1]));
+    result && (result = _utils.DateUtils.isSameSecond(source[0], dest[0]) && _utils.DateUtils.isSameSecond(source[1], dest[1]));
   }
 
   return result;

package/cjs/Disclosure/Disclosure.js

@@ -56,12 +56,14 @@ function Disclosure(props) {
       openState = _useReducer[0].open,
       dispatch = _useReducer[1];
 
-  var containerElementRef = (0, _react.useRef)();
+  var containerElementRef = (0, _react.useRef)(null);
   var open = openProp !== null && openProp !== void 0 ? openProp : openState;
   (0, _useClickOutside.default)({
     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({
@@ -69,7 +71,7 @@ function Disclosure(props) {
       });
     }
   });
-  var context = (0, _react.useMemo)(function () {
+  var contextValue = (0, _react.useMemo)(function () {
     return [{
       open: open
     }, dispatch, {
@@ -77,7 +79,7 @@ function Disclosure(props) {
     }];
   }, [open, dispatch, onToggle]);
   return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {
-    value: context
+    value: contextValue
   }, children({
     open: open
   }, containerElementRef));

package/cjs/Disclosure/DisclosureButton.js

@@ -1,24 +1,26 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports.default = void 0;
 
 var _react = require("react");
 
-var _DisclosureContext = _interopRequireWildcard(require("./DisclosureContext"));
+var _DisclosureContext = require("./DisclosureContext");
 
 var _utils = require("../utils");
 
+var _useDisclosureContext2 = _interopRequireDefault(require("./useDisclosureContext"));
+
 function DisclosureButton(props) {
   var children = props.children;
-  var buttonRef = (0, _react.useRef)();
+  var buttonRef = (0, _react.useRef)(null);
 
-  var _useContext = (0, _react.useContext)(_DisclosureContext.default),
-      open = _useContext[0].open,
-      dispatch = _useContext[1],
-      onToggle = _useContext[2].onToggle;
+  var _useDisclosureContext = (0, _useDisclosureContext2.default)(DisclosureButton.displayName),
+      open = _useDisclosureContext[0].open,
+      dispatch = _useDisclosureContext[1],
+      onToggle = _useDisclosureContext[2].onToggle;
 
   var toggle = (0, _react.useCallback)(function (event) {
     if (!open) {