rsuite 5.28.3 → 5.30.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [5.30.0](https://github.com/rsuite/rsuite/compare/v5.29.0...v5.30.0) (2023-03-31)
+
+### Bug Fixes
+
+- **Cascader:** fix infinite load state on inline mode and fix typo ([#3131](https://github.com/rsuite/rsuite/issues/3131)) ([faa05f0](https://github.com/rsuite/rsuite/commit/faa05f03df1ab890f0bcf13ebd173e52129400df))
+- **DatePicker:** fix abnormal time display in the calendar header ([#3136](https://github.com/rsuite/rsuite/issues/3136)) ([860df1a](https://github.com/rsuite/rsuite/commit/860df1a7bd03b40371ac6891e45f3295b9edc72f))
+- **DateRangePicker:** fix the error of invalid time during date selection ([#3135](https://github.com/rsuite/rsuite/issues/3135)) ([adeafdc](https://github.com/rsuite/rsuite/commit/adeafdc44162fd2ef9e2470094a52cb17b5cddb3))
+
+# [5.29.0](https://github.com/rsuite/rsuite/compare/v5.28.3...v5.29.0) (2023-03-24)
+
+### Bug Fixes
+
+- **Affix:** fix misalignment due to DOM content updates ([#3124](https://github.com/rsuite/rsuite/issues/3124)) ([76d21e9](https://github.com/rsuite/rsuite/commit/76d21e9e950da8c2df52d1fbc96abcada633d908))
+- **Picker:** fix async container update cause offset error ([#3126](https://github.com/rsuite/rsuite/issues/3126)) ([c3e15c5](https://github.com/rsuite/rsuite/commit/c3e15c512319b0240236e35a5b28432bea1d25f3))
+
 ## [5.28.3](https://github.com/rsuite/rsuite/compare/v5.28.2...v5.28.3) (2023-03-17)
 
 ### Bug Fixes

package/cjs/Affix/Affix.d.ts

@@ -1,11 +1,13 @@
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { Offset, RsRefForwardingComponent, WithAsProps } from '../@types/common';
 export interface AffixProps extends WithAsProps {
+    /** Specify the container. */
+    container?: HTMLElement | (() => HTMLElement);
     /** Distance from top */
     top?: number;
     /** Callback after the state changes. */
     onChange?: (fixed?: boolean) => void;
-    /** Specify the container. */
-    container?: HTMLElement | (() => HTMLElement);
+    /** Callback after the offset changes. */
+    onOffsetChange?: (offset?: Offset) => void;
 }
 declare const Affix: RsRefForwardingComponent<'div', AffixProps>;
 export default Affix;

package/cjs/Affix/Affix.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 var _getOffset = _interopRequireDefault(require("dom-lib/getOffset"));
 
 var _utils = require("../utils");
@@ -22,14 +24,26 @@ var _utils = require("../utils");
 /**
  * Get the layout size and offset of the mount element
  */
-function useOffset(mountRef) {
+function useOffset(mountRef, onOffsetChange) {
   var _useState = (0, _react.useState)(null),
       offset = _useState[0],
       setOffset = _useState[1];
 
   var updateOffset = (0, _react.useCallback)(function () {
-    setOffset((0, _getOffset.default)(mountRef.current));
-  }, [mountRef]); // Update after the element size changes
+    if (!mountRef.current) {
+      return;
+    }
+
+    var newOffset = (0, _getOffset.default)(mountRef.current);
+
+    if ((newOffset === null || newOffset === void 0 ? void 0 : newOffset.height) !== (offset === null || offset === void 0 ? void 0 : offset.height) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.width) !== (offset === null || offset === void 0 ? void 0 : offset.width) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.top) !== (offset === null || offset === void 0 ? void 0 : offset.top) || (newOffset === null || newOffset === void 0 ? void 0 : newOffset.left) !== (offset === null || offset === void 0 ? void 0 : offset.left)) {
+      setOffset(newOffset);
+
+      if (offset !== null && newOffset !== null) {
+        onOffsetChange === null || onOffsetChange === void 0 ? void 0 : onOffsetChange(newOffset);
+      }
+    }
+  }, [mountRef, offset, onOffsetChange]); // Update after the element size changes
 
   (0, _utils.useElementResize)(function () {
     return mountRef.current;
@@ -37,7 +51,9 @@ function useOffset(mountRef) {
 
   (0, _utils.useMount)(updateOffset); // Update after window size changes
 
-  (0, _utils.useEventListener)(window, 'resize', updateOffset, false);
+  (0, _utils.useEventListener)(window, 'resize', updateOffset, false); // Update after window scroll
+
+  (0, _utils.useEventListener)(window, 'scroll', (0, _debounce.default)(updateOffset, 100), false);
   return offset;
 }
 /**
@@ -80,7 +96,7 @@ function useFixed(offset, containerOffset, props) {
 
     var scrollY = window.scrollY || window.pageYOffset; // When the scroll distance exceeds the element's top value, it is fixed.
 
-    var nextFixed = scrollY - (Number(offset.top) - Number(top)) >= 0; // If the current element is specified in the container,
+    var nextFixed = scrollY - (Number(offset === null || offset === void 0 ? void 0 : offset.top) - Number(top)) >= 0; // If the current element is specified in the container,
     // add to determine whether the current container is in the window range.
 
     if (containerOffset) {
@@ -91,7 +107,7 @@ function useFixed(offset, containerOffset, props) {
       setFixed(nextFixed);
       onChange === null || onChange === void 0 ? void 0 : onChange(nextFixed);
     }
-  }, [fixed, offset, containerOffset, onChange, top]); // Add scroll event to window
+  }, [offset, top, containerOffset, fixed, onChange]); // Add scroll event to window
 
   (0, _utils.useEventListener)(window, 'scroll', handleScroll, false);
   return fixed;
@@ -110,9 +126,10 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       _props$top = props.top,
       top = _props$top === void 0 ? 0 : _props$top,
       onChange = props.onChange,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "container", "top", "onChange"]);
+      onOffsetChange = props.onOffsetChange,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "children", "container", "top", "onChange", "onOffsetChange"]);
   var mountRef = (0, _react.useRef)(null);
-  var offset = useOffset(mountRef);
+  var offset = useOffset(mountRef, onOffsetChange);
   var containerOffset = useContainerOffset(container);
   var fixed = useFixed(offset, containerOffset, {
     top: top,
@@ -124,14 +141,19 @@ var Affix = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, (_merge = {}, _merge[withClassPrefix()] = fixed, _merge));
+
+  var _ref = offset || {},
+      width = _ref.width,
+      height = _ref.height;
+
   var placeholderStyles = fixed ? {
-    width: offset === null || offset === void 0 ? void 0 : offset.width,
-    height: offset === null || offset === void 0 ? void 0 : offset.height
+    width: width,
+    height: height
   } : undefined;
   var fixedStyles = {
     position: 'fixed',
     top: top,
-    width: offset === null || offset === void 0 ? void 0 : offset.width,
+    width: width,
     zIndex: 10
   };
   var affixStyles = fixed ? fixedStyles : undefined;

package/cjs/Calendar/CalendarHeader.js

@@ -29,6 +29,8 @@ var _CustomProvider = require("../CustomProvider");
 
 var _CalendarContext = require("./CalendarContext");
 
+var _DateRangePickerContext = require("../DateRangePicker/DateRangePickerContext");
+
 var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -59,6 +61,9 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       inline = _useCalendarContext.inline,
       disabledDate = _useCalendarContext.disabledDate;
 
+  var _useDateRangePickerCo = (0, _DateRangePickerContext.useDateRangePickerContext)(),
+      isSelectedIdle = _useDateRangePickerCo.isSelectedIdle;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -136,7 +141,9 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var classes = merge(className, withClassPrefix({
     'has-month': hasMonth,
     'has-time': showTime
-  }));
+  })); // If the date is not selected, the time cannot be selected (it only works in DateRangePicker).
+
+  var disableSelectTime = typeof isSelectedIdle === 'undefined' ? false : !isSelectedIdle;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
@@ -144,13 +151,15 @@ var CalendarHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     className: prefix('time-toolbar')
   }, /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
     className: timeTitleClasses,
-    onClick: onToggleTimeDropdown
+    onClick: onToggleTimeDropdown,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, btnProps, {
     className: prefix('meridian'),
-    onClick: onToggleMeridian
+    onClick: onToggleMeridian,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
     date: date,
     formatStr: "a"

package/cjs/Cascader/Cascader.js

@@ -295,7 +295,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           node.loading = false;
           node[childrenKey] = data;
 
-          if (targetRef.current) {
+          if (targetRef.current || inline) {
             addColumn(data, columnIndex);
           }
         });

package/cjs/DatePicker/DatePicker.d.ts

@@ -33,14 +33,45 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * Whether to disable a date on the calendar view
      *
      * @returns date should be disabled (not selectable)
+     * @deprecated Use {@link shouldDisableDate} instead
      */
     disabledDate?: (date?: Date) => boolean;
-    /** Disabled hours */
+    /**
+     * Disabled hours
+     *
+     * @deprecated Use {@link shouldDisableHour} instead
+     */
     disabledHours?: (hour: number, date: Date) => boolean;
-    /** Disabled minutes */
+    /**
+     * Disabled minutes
+     *
+     * @deprecated Use {@link shouldDisableMinute} instead
+     */
     disabledMinutes?: (minute: number, date: Date) => boolean;
-    /** Disabled seconds */
+    /**
+     * Disabled seconds
+     *
+     * @deprecated Use {@link shouldDisableSecond} instead
+     */
     disabledSeconds?: (second: number, date: Date) => boolean;
+    /**
+     * Whether a date on the calendar view should be disabled
+     *
+     * @returns date should be disabled (not selectable)
+     */
+    shouldDisableDate?: (date: Date) => boolean;
+    /**
+     * Disabled hours
+     */
+    shouldDisableHour?: (hour: number, date: Date) => boolean;
+    /**
+     * Disabled minutes
+     */
+    shouldDisableMinute?: (minute: number, date: Date) => boolean;
+    /**
+     * Disabled seconds
+     */
+    shouldDisableSecond?: (second: number, date: Date) => boolean;
     /** Hidden hours */
     hideHours?: (hour: number, date: Date) => boolean;
     /** Hidden minutes */

package/cjs/DatePicker/DatePicker.js

@@ -43,6 +43,8 @@ var _Picker = require("../Picker");
 
 var _OverlayTrigger = require("../Overlay/OverlayTrigger");
 
+var _deprecatePropType = require("../utils/deprecatePropType");
+
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -77,7 +79,14 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       style = props.style,
       toggleAs = props.toggleAs,
       caretAsProp = props.caretAs,
-      disabledDateProp = props.disabledDate,
+      DEPRECATED_disabledDate = props.disabledDate,
+      DEPRECATED_disabledHours = props.disabledHours,
+      DEPRECATED_disabledMinutes = props.disabledMinutes,
+      DEPRECATED_disabledSeconds = props.disabledSeconds,
+      shouldDisableDate = props.shouldDisableDate,
+      shouldDisableHour = props.shouldDisableHour,
+      shouldDisableMinute = props.shouldDisableMinute,
+      shouldDisableSecond = props.shouldDisableSecond,
       renderValue = props.renderValue,
       onChange = props.onChange,
       onChangeCalendarDate = props.onChangeCalendarDate,
@@ -92,7 +101,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
 
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -271,11 +280,17 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       updateValue(event, nextPageDate);
     }
   }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
-  var disabledDate = (0, _react.useCallback)(function (date) {
-    var _disabledDateProp;
+  var isDateDisabled = (0, _react.useCallback)(function (date) {
+    if (typeof shouldDisableDate === 'function') {
+      return shouldDisableDate(date);
+    }
+
+    if (typeof DEPRECATED_disabledDate === 'function') {
+      return DEPRECATED_disabledDate(date);
+    }
 
-    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
-  }, [disabledDateProp]);
+    return false;
+  }, [DEPRECATED_disabledDate, shouldDisableDate]);
   /**
    * Callback after the input box value is changed.
    */
@@ -302,13 +317,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       return;
     }
 
-    if (disabledDate(date)) {
+    if (isDateDisabled(date)) {
       setInputState('Error');
       return;
     }
 
     handleSelect(date, event, false);
-  }, [formatStr, locale, parseDate, disabledDate, handleSelect]);
+  }, [formatStr, locale, parseDate, isDateDisabled, handleSelect]);
   /**
    * The callback after the enter key is triggered on the input
    */
@@ -330,14 +345,14 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onClose]); // Check whether the time is within the time range of the shortcut option in the toolbar.
 
   var disabledToolbarHandle = (0, _react.useCallback)(function (date) {
-    var _disabledDateProp2;
+    var _DEPRECATED_disabledD;
 
-    var allowDate = (_disabledDateProp2 = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp2 !== void 0 ? _disabledDateProp2 : false;
+    var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;
 
     var allowTime = _utils.DateUtils.disabledTime(props, date);
 
     return allowDate || allowTime;
-  }, [disabledDateProp, props]);
+  }, [DEPRECATED_disabledDate, props]);
   /**
    * Whether "OK" button is disabled
    *
@@ -369,7 +384,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     locale: locale,
     showWeekNumbers: showWeekNumbers,
     showMeridian: showMeridian,
-    disabledDate: disabledDate,
+    disabledDate: isDateDisabled,
+    disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
+    disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
+    disabledSeconds: shouldDisableSecond !== null && shouldDisableSecond !== void 0 ? shouldDisableSecond : DEPRECATED_disabledSeconds,
     limitEndYear: limitEndYear,
     format: formatStr,
     isoWeek: isoWeek,
@@ -503,10 +521,14 @@ DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   calendarDefaultDate: _propTypes.default.instanceOf(Date),
   defaultValue: _propTypes.default.instanceOf(Date),
-  disabledDate: _propTypes.default.func,
-  disabledHours: _propTypes.default.func,
-  disabledMinutes: _propTypes.default.func,
-  disabledSeconds: _propTypes.default.func,
+  disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
+  disabledHours: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableHour" property instead.'),
+  disabledMinutes: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableMinute" property instead.'),
+  disabledSeconds: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableSecond" property instead.'),
+  shouldDisableDate: _propTypes.default.func,
+  shouldDisableHour: _propTypes.default.func,
+  shouldDisableMinute: _propTypes.default.func,
+  shouldDisableSecond: _propTypes.default.func,
   format: _propTypes.default.string,
   hideHours: _propTypes.default.func,
   hideMinutes: _propTypes.default.func,

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -27,8 +27,16 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     defaultCalendarValue?: DateRange;
     /** The character that separates two dates */
     character?: string;
-    /** Disabled date */
+    /**
+     * Disabled date
+     *
+     * @deprecated Use {@link shouldDisableDate} instead
+     */
     disabledDate?: DisabledDateFunction;
+    /**
+     * Whether a date cell is disabled
+     */
+    shouldDisableDate?: DisabledDateFunction;
     /** Called when the option is selected */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */

package/cjs/DateRangePicker/DateRangePicker.js

@@ -45,6 +45,10 @@ var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 
 var _utils2 = require("./utils");
 
+var _deprecatePropType = require("../utils/deprecatePropType");
+
+var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
+
 var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _ref, _ref2, _merge;
 
@@ -64,7 +68,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       defaultCalendarValue = props.defaultCalendarValue,
       defaultValue = props.defaultValue,
       disabled = props.disabled,
-      disabledDateProp = props.disabledDate,
+      DEPRECATED_disabledDateProp = props.disabledDate,
+      shouldDisableDate = props.shouldDisableDate,
       _props$format = props.format,
       formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
       hoverRange = props.hoverRange,
@@ -100,7 +105,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onOpen = props.onOpen,
       onSelect = props.onSelect,
       renderTitle = props.renderTitle,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
 
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -124,7 +129,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    */
 
 
-  var hasDoneSelect = (0, _react.useRef)(true);
+  var _useState = (0, _react.useState)(true),
+      isSelectedIdle = _useState[0],
+      setSelectedIdle = _useState[1];
   /**
    * The currently selected date range.
    *
@@ -134,25 +141,26 @@ 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 : []),
-      selectedDates = _useState[0],
-      setSelectedDates = _useState[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
+  var _useState2 = (0, _react.useState)((_ref = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue) !== null && _ref !== void 0 ? _ref : []),
+      selectedDates = _useState2[0],
+      setSelectedDates = _useState2[1]; // The date of the current hover, used to reduce the calculation of `handleMouseMove`
 
-  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)(null),
+      hoverDateRange = _useState3[0],
+      setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
 
-  var _useState3 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
+
+  var _useState4 = (0, _react.useState)((0, _utils2.getSafeCalendarDate)({
     value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
   })),
-      calendarDate = _useState3[0],
-      setCalendarDate = _useState3[1];
+      calendarDate = _useState4[0],
+      setCalendarDate = _useState4[1];
 
-  var _useState4 = (0, _react.useState)(),
-      inputState = _useState4[0],
-      setInputState = _useState4[1];
+  var _useState5 = (0, _react.useState)(),
+      inputState = _useState5[0],
+      setInputState = _useState5[1];
   /**
    * When hoverRange is set, `selectValue` will be updated during the hover process,
    * which will cause the `selectValue` to be updated after the first click,
@@ -208,9 +216,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
 
-  var _useState5 = (0, _react.useState)(false),
-      isPickerToggleActive = _useState5[0],
-      setPickerToggleActive = _useState5[1];
+  var _useState6 = (0, _react.useState)(false),
+      isPickerToggleActive = _useState6[0],
+      setPickerToggleActive = _useState6[1];
 
   var rootRef = (0, _react.useRef)(null);
   var overlayRef = (0, _react.useRef)(null);
@@ -313,7 +321,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     // 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 (!isSelectedIdle) {
       // If `hoverRange` is set, you need to change the value of hoverDateRange according to the rules
       if (!(0, _isNil.default)(nextHoverDateRange) && !(0, _isNil.default)(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
@@ -332,7 +340,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else if (!(0, _isNil.default)(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue]);
+  }, [getHoverRangeValue, isSelectedIdle]);
   /**
    * Callback for selecting a date cell in the calendar grid
    */
@@ -343,23 +351,23 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var hoverRangeValue = getHoverRangeValue(date);
     var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue); // in `oneTap` mode
 
-    if (hasDoneSelect.current && oneTap) {
+    if (isSelectedIdle && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
-      hasDoneSelect.current = false;
+      setSelectedIdle(false);
       return;
     } // no preset hover range can use
 
 
     if (noHoverRangeValid) {
       // start select
-      if (hasDoneSelect.current) {
+      if (isSelectedIdle) {
         nextSelectDates = [date];
       } else {
         // finish select
         nextSelectDates[1] = date;
       }
     } else {
-      if (!hasDoneSelect.current) {
+      if (!isSelectedIdle) {
         nextSelectDates = selectedDates;
         selectRangeValueRef.current = null;
       } else {
@@ -396,8 +404,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       eventName: 'changeDate'
     });
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
-    hasDoneSelect.current = !hasDoneSelect.current;
-  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
+    setSelectedIdle(!isSelectedIdle);
+  }, [formatStr, getCalendarDatetime, getHoverRangeValue, handleValueUpdate, hoverDateRange, isSelectedIdle, onSelect, oneTap, selectedDates, updateCalendarDateRange]);
   /**
    * If `selectValue` changed, there will be the following effects.
    * 1. Check if the selection is completed.
@@ -473,7 +481,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } // End unfinished selections.
 
 
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
   }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = (0, _react.useCallback)(function (event) {
     handleValueUpdate(event, selectedDates);
@@ -560,19 +568,25 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   }, [onOpen]);
   var handleExited = (0, _react.useCallback)(function () {
     setPickerToggleActive(false);
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
   var isDateDisabled = (0, _react.useCallback)(function (date, selectDate, selectedDone, target) {
-    var _disabledDateProp;
+    if (typeof shouldDisableDate === 'function') {
+      return shouldDisableDate(date, selectDate, selectedDone, target);
+    }
 
-    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date, selectDate, selectedDone, target)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
-  }, [disabledDateProp]);
+    if (typeof DEPRECATED_disabledDateProp === 'function') {
+      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
+    }
+
+    return false;
+  }, [DEPRECATED_disabledDateProp, shouldDisableDate]);
   var disabledByBetween = (0, _react.useCallback)(function (start, end, type) {
     // 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 (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
         return true;
       }
 
@@ -580,17 +594,17 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return false;
-  }, [isDateDisabled, selectedDates]);
+  }, [isDateDisabled, isSelectedIdle, selectedDates]);
   var disabledOkButton = (0, _react.useCallback)(function () {
     var start = selectedDates[0],
         end = selectedDates[1];
 
-    if (!start || !end || !hasDoneSelect.current) {
+    if (!start || !end || !isSelectedIdle) {
       return true;
     }
 
     return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectedDates]);
+  }, [disabledByBetween, isSelectedIdle, selectedDates]);
   var disabledShortcutButton = (0, _react.useCallback)(function (value) {
     if (value === void 0) {
       value = [];
@@ -607,8 +621,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 isDateDisabled(date, values, hasDoneSelect.current, type);
-  }, [isDateDisabled]);
+    return isDateDisabled(date, values, isSelectedIdle, type);
+  }, [isDateDisabled, isSelectedIdle]);
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -677,11 +691,15 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: prefix('daterange-header')
     }, getDisplayString(selectedDates)), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
+    }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {
+      value: {
+        isSelectedIdle: isSelectedIdle
+      }
     }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 0
     }, calendarProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
       index: 1
-    }, calendarProps)))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    }, calendarProps))))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,
@@ -760,7 +778,8 @@ DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes,
   limitEndYear: _propTypes.default.number,
   onChange: _propTypes.default.func,
   onOk: _propTypes.default.func,
-  disabledDate: _propTypes.default.func,
+  disabledDate: (0, _deprecatePropType.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
+  shouldDisableDate: _propTypes.default.func,
   onSelect: _propTypes.default.func,
   showWeekNumbers: _propTypes.default.bool,
   showMeridian: _propTypes.default.bool,

package/cjs/DateRangePicker/DateRangePickerContext.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DateRangePickerContextValue {
+    isSelectedIdle?: boolean;
+}
+declare const DateRangePickerContext: React.Context<DateRangePickerContextValue>;
+export default DateRangePickerContext;
+export declare const useDateRangePickerContext: () => DateRangePickerContextValue;