rsuite 5.28.3 → 5.30.0

package/esm/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/esm/Affix/Affix.js

@@ -2,20 +2,33 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import debounce from 'lodash/debounce';
 import getOffset from 'dom-lib/getOffset';
 import { mergeRefs, useClassNames, useElementResize, useEventListener, useMount } from '../utils';
 
 /**
  * Get the layout size and offset of the mount element
  */
-function useOffset(mountRef) {
+function useOffset(mountRef, onOffsetChange) {
   var _useState = useState(null),
       offset = _useState[0],
       setOffset = _useState[1];
 
   var updateOffset = useCallback(function () {
-    setOffset(getOffset(mountRef.current));
-  }, [mountRef]); // Update after the element size changes
+    if (!mountRef.current) {
+      return;
+    }
+
+    var newOffset = getOffset(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
 
   useElementResize(function () {
     return mountRef.current;
@@ -23,7 +36,9 @@ function useOffset(mountRef) {
 
   useMount(updateOffset); // Update after window size changes
 
-  useEventListener(window, 'resize', updateOffset, false);
+  useEventListener(window, 'resize', updateOffset, false); // Update after window scroll
+
+  useEventListener(window, 'scroll', debounce(updateOffset, 100), false);
   return offset;
 }
 /**
@@ -66,7 +81,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) {
@@ -77,7 +92,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
 
   useEventListener(window, 'scroll', handleScroll, false);
   return fixed;
@@ -96,10 +111,11 @@ var Affix = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$top = props.top,
       top = _props$top === void 0 ? 0 : _props$top,
       onChange = props.onChange,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "children", "container", "top", "onChange"]);
+      onOffsetChange = props.onOffsetChange,
+      rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "children", "container", "top", "onChange", "onOffsetChange"]);
 
   var mountRef = useRef(null);
-  var offset = useOffset(mountRef);
+  var offset = useOffset(mountRef, onOffsetChange);
   var containerOffset = useContainerOffset(container);
   var fixed = useFixed(offset, containerOffset, {
     top: top,
@@ -111,14 +127,19 @@ var Affix = /*#__PURE__*/React.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/esm/Calendar/CalendarHeader.js

@@ -9,6 +9,7 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import { FormattedDate } from '../CustomProvider';
 import { useCalendarContext } from './CalendarContext';
+import { useDateRangePickerContext } from '../DateRangePicker/DateRangePickerContext';
 var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -39,6 +40,9 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inline = _useCalendarContext.inline,
       disabledDate = _useCalendarContext.disabledDate;
 
+  var _useDateRangePickerCo = useDateRangePickerContext(),
+      isSelectedIdle = _useDateRangePickerCo.isSelectedIdle;
+
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix,
@@ -114,7 +118,9 @@ var CalendarHeader = /*#__PURE__*/React.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.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
@@ -122,13 +128,15 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: prefix('time-toolbar')
   }, /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     className: timeTitleClasses,
-    onClick: onToggleTimeDropdown
+    onClick: onToggleTimeDropdown,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/React.createElement(FormattedDate, {
     date: date,
     formatStr: getTimeFormat()
   })), showMeridian && /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     className: prefix('meridian'),
-    onClick: onToggleMeridian
+    onClick: onToggleMeridian,
+    disabled: disableSelectTime
   }), date && /*#__PURE__*/React.createElement(FormattedDate, {
     date: date,
     formatStr: "a"

package/esm/Cascader/Cascader.js

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

package/esm/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/esm/DatePicker/DatePicker.js

@@ -16,6 +16,7 @@ import PredefinedRanges from './PredefinedRanges';
 import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
+import { deprecatePropTypeNew } from '../utils/deprecatePropType';
 var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -50,7 +51,14 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -65,7 +73,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect = props.onSelect,
       onToggleMonthDropdown = props.onToggleMonthDropdown,
       onToggleTimeDropdown = props.onToggleTimeDropdown,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useCustom('DatePicker', overrideLocale),
       locale = _useCustom.locale,
@@ -241,11 +249,17 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       updateValue(event, nextPageDate);
     }
   }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
-  var disabledDate = useCallback(function (date) {
-    var _disabledDateProp;
+  var isDateDisabled = 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.
    */
@@ -272,13 +286,13 @@ var DatePicker = /*#__PURE__*/React.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
    */
@@ -300,12 +314,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [onClose]); // Check whether the time is within the time range of the shortcut option in the toolbar.
 
   var disabledToolbarHandle = 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 = DateUtils.disabledTime(props, date);
     return allowDate || allowTime;
-  }, [disabledDateProp, props]);
+  }, [DEPRECATED_disabledDate, props]);
   /**
    * Whether "OK" button is disabled
    *
@@ -336,7 +350,10 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -468,10 +485,14 @@ DatePicker.displayName = 'DatePicker';
 DatePicker.propTypes = _extends({}, pickerPropTypes, {
   calendarDefaultDate: PropTypes.instanceOf(Date),
   defaultValue: PropTypes.instanceOf(Date),
-  disabledDate: PropTypes.func,
-  disabledHours: PropTypes.func,
-  disabledMinutes: PropTypes.func,
-  disabledSeconds: PropTypes.func,
+  disabledDate: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableDate" property instead.'),
+  disabledHours: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableHour" property instead.'),
+  disabledMinutes: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableMinute" property instead.'),
+  disabledSeconds: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableSecond" property instead.'),
+  shouldDisableDate: PropTypes.func,
+  shouldDisableHour: PropTypes.func,
+  shouldDisableMinute: PropTypes.func,
+  shouldDisableSecond: PropTypes.func,
   format: PropTypes.string,
   hideHours: PropTypes.func,
   hideMinutes: PropTypes.func,

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

@@ -17,6 +17,8 @@ import { addMonths, compareAsc, isSameMonth, startOfDay, endOfDay, shouldRenderT
 import Calendar from './Calendar';
 import * as disabledDateUtils from './disabledDateUtils';
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
+import { deprecatePropTypeNew } from '../utils/deprecatePropType';
+import DateRangePickerContext from './DateRangePickerContext';
 var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _ref, _ref2, _merge;
 
@@ -36,7 +38,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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,
@@ -72,7 +75,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOpen = props.onOpen,
       onSelect = props.onSelect,
       renderTitle = props.renderTitle,
-      rest = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -96,7 +99,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
 
-  var hasDoneSelect = useRef(true);
+  var _useState = useState(true),
+      isSelectedIdle = _useState[0],
+      setSelectedIdle = _useState[1];
   /**
    * The currently selected date range.
    *
@@ -106,25 +111,26 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    *
    */
 
-  var _useState = 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 = 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 = useState(null),
-      hoverDateRange = _useState2[0],
-      setHoverDateRange = _useState2[1]; // The displayed calendar panel is rendered based on this value.
 
+  var _useState3 = useState(null),
+      hoverDateRange = _useState3[0],
+      setHoverDateRange = _useState3[1]; // The displayed calendar panel is rendered based on this value.
 
-  var _useState3 = useState(getSafeCalendarDate({
+
+  var _useState4 = useState(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 = useState(),
-      inputState = _useState4[0],
-      setInputState = _useState4[1];
+  var _useState5 = 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,
@@ -180,9 +186,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
 
-  var _useState5 = useState(false),
-      isPickerToggleActive = _useState5[0],
-      setPickerToggleActive = _useState5[1];
+  var _useState6 = useState(false),
+      isPickerToggleActive = _useState6[0],
+      setPickerToggleActive = _useState6[1];
 
   var rootRef = useRef(null);
   var overlayRef = useRef(null);
@@ -285,7 +291,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // 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 (!isNil(nextHoverDateRange) && !isNil(selectRangeValueRef.current)) {
         var nextSelectedDates = [selectRangeValueRef.current[0], nextHoverDateRange[1]];
@@ -304,7 +310,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else if (!isNil(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue]);
+  }, [getHoverRangeValue, isSelectedIdle]);
   /**
    * Callback for selecting a date cell in the calendar grid
    */
@@ -315,23 +321,23 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var hoverRangeValue = getHoverRangeValue(date);
     var noHoverRangeValid = isNil(hoverRangeValue); // in `oneTap` mode
 
-    if (hasDoneSelect.current && oneTap) {
+    if (isSelectedIdle && oneTap) {
       handleValueUpdate(event, noHoverRangeValid ? [startOfDay(date), 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 {
@@ -368,8 +374,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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.
@@ -445,7 +451,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } // End unfinished selections.
 
 
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
   }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = useCallback(function (event) {
     handleValueUpdate(event, selectedDates);
@@ -532,19 +538,25 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [onOpen]);
   var handleExited = useCallback(function () {
     setPickerToggleActive(false);
-    hasDoneSelect.current = true;
+    setSelectedIdle(true);
     onClose === null || onClose === void 0 ? void 0 : onClose();
   }, [onClose]);
   var isDateDisabled = useCallback(function (date, selectDate, selectedDone, target) {
-    var _disabledDateProp;
+    if (typeof shouldDisableDate === 'function') {
+      return shouldDisableDate(date, selectDate, selectedDone, target);
+    }
+
+    if (typeof DEPRECATED_disabledDateProp === 'function') {
+      return DEPRECATED_disabledDateProp(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]);
+    return false;
+  }, [DEPRECATED_disabledDateProp, shouldDisableDate]);
   var disabledByBetween = useCallback(function (start, end, type) {
     // If the date is between the start and the end
     // the button is disabled
     while (DateUtils.isBefore(start, end) || DateUtils.isSameDay(start, end)) {
-      if (isDateDisabled(start, selectedDates, hasDoneSelect.current, type)) {
+      if (isDateDisabled(start, selectedDates, isSelectedIdle, type)) {
         return true;
       }
 
@@ -552,17 +564,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
 
     return false;
-  }, [isDateDisabled, selectedDates]);
+  }, [isDateDisabled, isSelectedIdle, selectedDates]);
   var disabledOkButton = useCallback(function () {
     var start = selectedDates[0],
         end = selectedDates[1];
 
-    if (!start || !end || !hasDoneSelect.current) {
+    if (!start || !end || !isSelectedIdle) {
       return true;
     }
 
     return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  }, [disabledByBetween, selectedDates]);
+  }, [disabledByBetween, isSelectedIdle, selectedDates]);
   var disabledShortcutButton = useCallback(function (value) {
     if (value === void 0) {
       value = [];
@@ -579,8 +591,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 isDateDisabled(date, values, hasDoneSelect.current, type);
-  }, [isDateDisabled]);
+    return isDateDisabled(date, values, isSelectedIdle, type);
+  }, [isDateDisabled, isSelectedIdle]);
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -651,11 +663,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: prefix('daterange-header')
     }, getDisplayString(selectedDates)), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
+    }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {
+      value: {
+        isSelectedIdle: isSelectedIdle
+      }
     }, /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 0
     }, calendarProps)), !showOneCalendar && /*#__PURE__*/React.createElement(Calendar, _extends({
       index: 1
-    }, calendarProps)))), /*#__PURE__*/React.createElement(Toolbar, {
+    }, calendarProps))))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       calendarDate: selectedDates,
       disabledOkBtn: disabledOkButton,
@@ -733,7 +749,8 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   limitEndYear: PropTypes.number,
   onChange: PropTypes.func,
   onOk: PropTypes.func,
-  disabledDate: PropTypes.func,
+  disabledDate: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableDate" property instead.'),
+  shouldDisableDate: PropTypes.func,
   onSelect: PropTypes.func,
   showWeekNumbers: PropTypes.bool,
   showMeridian: PropTypes.bool,

package/esm/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;

package/esm/DateRangePicker/DateRangePickerContext.js

@@ -0,0 +1,6 @@
+import React, { useContext } from 'react';
+var DateRangePickerContext = /*#__PURE__*/React.createContext({});
+export default DateRangePickerContext;
+export var useDateRangePickerContext = function useDateRangePickerContext() {
+  return useContext(DateRangePickerContext) || {};
+};

package/esm/Overlay/Modal.js

@@ -4,7 +4,6 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import contains from 'dom-lib/contains';
-import getContainer from 'dom-lib/getContainer';
 import on from 'dom-lib/on';
 import ModalManager from './ModalManager';
 import Fade from '../Animation/Fade';
@@ -90,7 +89,8 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _usePortal = usePortal({
     container: container
   }),
-      Portal = _usePortal.Portal;
+      Portal = _usePortal.Portal,
+      containerElement = _usePortal.target;
 
   var modal = useModalManager();
 
@@ -141,8 +141,9 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var documentKeyDownListener = useRef();
   var documentFocusListener = useRef();
   var handleOpen = useEventCallback(function () {
-    var containerElement = getContainer(container, document.body);
-    modal.add(containerElement, containerClassName);
+    if (containerElement) {
+      modal.add(containerElement, containerClassName);
+    }
 
     if (!documentKeyDownListener.current) {
       documentKeyDownListener.current = on(document, 'keydown', handleDocumentKeyDown);