rsuite 5.59.1 → 5.59.3-alpha.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [5.59.2](https://github.com/rsuite/rsuite/compare/v5.59.1...v5.59.2) (2024-04-19)
+
+
+### Bug Fixes
+
+* **DatePicker:** fix disabled date and month can be selected ([#3747](https://github.com/rsuite/rsuite/issues/3747)) ([c3d8765](https://github.com/rsuite/rsuite/commit/c3d87651ba6ad5f62ec620fb842a4fdc0315fb3e))
+* **DateRangePicker:** fix `oneTap` not working when there is a default value ([#3745](https://github.com/rsuite/rsuite/issues/3745)) ([478894e](https://github.com/rsuite/rsuite/commit/478894e8a48716f9f143e8ed10ef20bbcbff7bc1))
+* **DateRangePicker:** fix the end time cannot be changed when only one calendar is displayed ([#3743](https://github.com/rsuite/rsuite/issues/3743)) ([a5affd9](https://github.com/rsuite/rsuite/commit/a5affd90dd85e881874097ff1a67f66ce8693fbb))
+* **Form:** fix `nestedField` will auto trigger validation for other sibling fields ([#3741](https://github.com/rsuite/rsuite/issues/3741)) ([dbe1ae2](https://github.com/rsuite/rsuite/commit/dbe1ae240f04bbbcdade501f236055ae755d5bbb))
+
+
+
 ## [5.59.1](https://github.com/rsuite/rsuite/compare/v5.59.0...v5.59.1) (2024-04-12)
 
 

package/DateRangePicker/styles/index.css

@@ -4035,6 +4035,33 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   border-bottom: 1px solid #e5e5ea;
   border-bottom: 1px solid var(--rs-border-primary);
 }
+.rs-picker-daterange-header .rs-picker-header-date:focus {
+  background-color: transparent;
+}
+.rs-picker-daterange-header.rs-picker-tab-active-end,
+.rs-picker-daterange-header.rs-picker-tab-active-start {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+.rs-picker-daterange-header.rs-picker-tab-active-end::after,
+.rs-picker-daterange-header.rs-picker-tab-active-start::after {
+  content: ' ';
+  position: absolute;
+  width: 50%;
+  bottom: -1px;
+  border-bottom: 2px solid #3498ff;
+  left: 0;
+}
+.rs-picker-daterange-header.rs-picker-tab-active-end::after {
+  left: 50%;
+}
 .rs-picker-daterange-calendar-group {
   height: 274px;
   min-width: 492px;

package/DateRangePicker/styles/index.less

@@ -86,6 +86,33 @@
   font-size: @date-range-picker-header-font-size;
   line-height: @date-range-picker-header-line-height;
   border-bottom: 1px solid var(--rs-border-primary);
+
+  .rs-picker-header-date:focus {
+    background-color: transparent;
+  }
+
+  &.rs-picker-tab-active-end,
+  &.rs-picker-tab-active-start {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    &::after {
+      content: ' ';
+      position: absolute;
+      width: 50%;
+      bottom: -1px;
+      border-bottom: 2px solid #3498ff;
+      left: 0;
+    }
+  }
+
+  &.rs-picker-tab-active-end {
+    &::after {
+      left: 50%;
+    }
+  }
 }
 
 // Calendar group

package/cjs/@types/common.d.ts

@@ -134,7 +134,7 @@ export declare namespace TypeAttributes {
     type Placement8 = 'bottomStart' | 'bottomEnd' | 'topStart' | 'topEnd' | 'leftStart' | 'rightStart' | 'leftEnd' | 'rightEnd';
     type PlacementAuto = 'auto' | 'autoVertical' | 'autoVerticalStart' | 'autoVerticalEnd' | 'autoHorizontal' | 'autoHorizontalStart' | 'autoHorizontalEnd';
     type Placement = Placement4 | Placement8 | PlacementAuto;
-    type CheckTrigger = 'change' | 'blur' | 'none';
+    type CheckTrigger = 'change' | 'blur' | 'none' | null;
 }
 export interface SVGIcon {
     viewBox: string;

package/cjs/Calendar/CalendarContainer.js

@@ -69,12 +69,12 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var calendarDate = (0, _react.useMemo)(function () {
     return (0, _dateUtils.isValid)(calendarDateProp) ? calendarDateProp : new Date();
   }, [calendarDateProp]);
-  var isDisabledDate = (0, _utils.useEventCallback)(function (date) {
+  var isDateDisabled = (0, _utils.useEventCallback)(function (date) {
     var _disabledDate;
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
   });
   var isTimeDisabled = function isTimeDisabled(date) {
-    return (0, _dateUtils.disabledTime)(props, date);
+    return (0, _dateUtils.disableTime)(props, date);
   };
   var handleMoveForward = (0, _utils.useEventCallback)(function () {
     onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward((0, _dateUtils.addMonths)(calendarDate, 1));
@@ -128,7 +128,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
   var contextValue = {
     date: calendarDate,
     dateRange: dateRange,
-    disabledDate: isDisabledDate,
+    disabledDate: isDateDisabled,
     format: format,
     hoverRangeValue: hoverRangeValue,
     inSameMonth: inSameThisMonthDate,
@@ -171,7 +171,7 @@ var CalendarContainer = /*#__PURE__*/_react.default.forwardRef(function (props,
     show: showMonth,
     limitEndYear: limitEndYear,
     limitStartYear: limitStartYear,
-    disabledMonth: isDisabledDate
+    disabledMonth: isDateDisabled
   }), renderTime && /*#__PURE__*/_react.default.createElement(_TimeDropdown.default, (0, _extends2.default)({}, timeDropdownProps, {
     show: showTime,
     showMeridian: showMeridian

package/cjs/DatePicker/DatePicker.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { RangeType } from './Toolbar';
 import { DatePickerLocale } from '../locales';
-import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
-export type { RangeType } from './Toolbar';
-export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null> {
+import type { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
+import type { DeprecatedProps } from './types';
+export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, DeprecatedProps {
     /** Custom caret component */
     caretAs?: React.ElementType | null;
     /** Calendar panel default presentation date and time */
@@ -14,12 +14,6 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     editable?: boolean;
     /** Format date */
     format?: string;
-    /**
-     * Display date panel when component initial
-     *
-     * @deprecated use <Calendar> instead
-     **/
-    inline?: boolean;
     /**
      * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
      *
@@ -46,31 +40,6 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     showWeekNumbers?: boolean;
     /** Meridian format */
     showMeridian?: boolean;
-    /**
-     * 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
-     *
-     * @deprecated Use {@link shouldDisableHour} instead
-     */
-    disabledHours?: (hour: number, date: Date) => boolean;
-    /**
-     * Disabled minutes
-     *
-     * @deprecated Use {@link shouldDisableMinute} instead
-     */
-    disabledMinutes?: (minute: number, date: Date) => boolean;
-    /**
-     * Disabled seconds
-     *
-     * @deprecated Use {@link shouldDisableSecond} instead
-     */
-    disabledSeconds?: (second: number, date: Date) => boolean;
     /**
      * Whether a date on the calendar view should be disabled
      *
@@ -113,10 +82,6 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
-    /**
-     * @deprecated
-     */
-    renderValue?: (value: Date, format: string) => string;
     /**
      * Custom rendering calendar cell content.
      *

package/cjs/DatePicker/DatePicker.js

@@ -12,8 +12,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
-var _delay = _interopRequireDefault(require("lodash/delay"));
-var _omit = _interopRequireDefault(require("lodash/omit"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
@@ -28,9 +26,9 @@ var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
-var _propTypes2 = require("../internals/propTypes");
-var _utils2 = require("../Calendar/utils");
-var _utils3 = require("./utils");
+var _utils2 = require("./utils");
+var _useMonthView2 = _interopRequireDefault(require("./hooks/useMonthView"));
+var _useFocus2 = _interopRequireDefault(require("./hooks/useFocus"));
 var _templateObject;
 /**
  * A date picker allows users to select a date from a calendar.
@@ -79,10 +77,6 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     style = props.style,
     size = props.size,
     caretAsProp = props.caretAs,
-    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,
@@ -100,7 +94,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     renderCell = props.renderCell,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell"]);
+    DEPRECATED_disabledDate = props.disabledDate,
+    DEPRECATED_disabledHours = props.disabledHours,
+    DEPRECATED_disabledMinutes = props.disabledMinutes,
+    DEPRECATED_disabledSeconds = props.disabledSeconds,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -108,8 +106,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay;
   var _useCustom = (0, _utils.useCustom)('DatePicker', overrideLocale),
-    locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    locale = _useCustom.locale;
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -120,11 +117,26 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
-  var _useState = (0, _react.useState)(false),
-    showMonthDropdown = _useState[0],
-    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var _useMonthView = (0, _useMonthView2.default)({
+      onToggleMonthDropdown: onToggleMonthDropdown
+    }),
+    setMonthView = _useMonthView.setMonthView,
+    monthView = _useMonthView.monthView,
+    toggleMonthView = _useMonthView.toggleMonthView; // Show only the calendar month panel. formatStr = 'yyyy-MM'
   var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);
-  var showMonth = onlyShowMonth || showMonthDropdown;
+  var showMonth = onlyShowMonth || monthView;
+  var _useFocus = (0, _useFocus2.default)({
+      target: target,
+      showMonth: showMonth,
+      id: id,
+      locale: locale
+    }),
+    focusInput = _useFocus.focusInput,
+    focusSelectedDate = _useFocus.focusSelectedDate,
+    onKeyFocusEvent = _useFocus.onKeyFocusEvent;
+  /**
+   * Check whether the date is disabled.
+   */
   var isDateDisabled = function isDateDisabled(date) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
@@ -134,6 +146,34 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     return false;
   };
+
+  /**
+   * Check whether the time is within the time range of the shortcut option in the toolbar.
+   */
+  var isDatetimeDisabled = function isDatetimeDisabled(date) {
+    return (isDateDisabled === null || isDateDisabled === void 0 ? void 0 : isDateDisabled(date)) || (0, _dateUtils.disableTime)(props, date);
+  };
+
+  /**
+   * Check whether the month is disabled.
+   * If any day in the month is disabled, the entire month is disabled
+   */
+  var isMonthDisabled = function isMonthDisabled(date) {
+    return (0, _MonthDropdown.isEveryDateInMonth)(date.getFullYear(), date.getMonth(), isDateDisabled);
+  };
+
+  /**
+   * Whether "OK" button is disabled
+   *
+   * - If format is date, disable ok button if selected date is disabled
+   * - If format is month, disable ok button if all dates in the month of selected date are disabled
+   */
+  var isOkButtonDisabled = function isOkButtonDisabled(selectedDate) {
+    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {
+      return isMonthDisabled(selectedDate);
+    }
+    return isDatetimeDisabled(selectedDate);
+  };
   var isErrorValue = function isErrorValue(value) {
     if (!(0, _dateUtils.isValid)(value)) {
       return true;
@@ -176,6 +216,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   });
+
+  /**
+   * Close the calendar panel.
+   */
   var handleClose = (0, _utils.useEventCallback)(function () {
     var _trigger$current, _trigger$current$clos;
     (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
@@ -190,11 +234,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);
     handleChangeTime(nextDate);
   });
-  var updateValue = function updateValue(event, nextPageDate, closeOverlay) {
+  var updateValue = function updateValue(event, date, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
-    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;
+    var nextValue = typeof date !== 'undefined' ? date : calendarDate;
     setCalendarDate(nextValue || new Date());
     setValue(nextValue);
     if (nextValue !== value) {
@@ -217,55 +261,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);
   });
 
-  /**
-   * Get the corresponding container based on date selection and month selection
-   */
-  var getOverlayContainer = function getOverlayContainer() {
-    return showMonth ? document.getElementById(id + "-calendar-month-dropdown") : document.getElementById(id + "-calendar-table");
-  };
-
-  /**
-   * Check whether the date is focusable
-   */
-  var checkFocusable = function checkFocusable(date) {
-    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
-    var ariaLabel = (0, _utils2.getAriaLabel)(date, formatStr, formatDate);
-    var container = getOverlayContainer();
-    var dateElement = container === null || container === void 0 ? void 0 : container.querySelector("[aria-label=\"" + ariaLabel + "\"]");
-    if ((dateElement === null || dateElement === void 0 ? void 0 : dateElement.getAttribute('aria-disabled')) === 'true') {
-      return false;
-    }
-    return true;
-  };
-
-  /**
-   * Focus on the currently selected date element
-   */
-  var focusSelectedDate = function focusSelectedDate() {
-    (0, _delay.default)(function () {
-      var container = getOverlayContainer();
-      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected="true"]');
-      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();
-    }, 1);
-  };
-
-  /**
-   * Focus on the input element
-   */
-  var focusTargetInput = (0, _utils.useEventCallback)(function () {
-    (0, _delay.default)(function () {
-      var _target$current;
-      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
-    }, 1);
-  });
-
   /**
    * The callback triggered after clicking the OK button.
    */
   var handleOK = (0, _utils.useEventCallback)(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
-    focusTargetInput();
+    focusInput();
   });
 
   /**
@@ -273,46 +275,20 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    */
 
   var handleClean = (0, _utils.useEventCallback)(function (event) {
+    event === null || event === void 0 ? void 0 : event.stopPropagation();
     updateValue(event, null);
     resetCalendarDate(null);
     onClean === null || onClean === void 0 ? void 0 : onClean(event);
-    event.stopPropagation();
   });
   var handlePickerPopupKeyDown = (0, _utils.useEventCallback)(function (event) {
-    var delta = 0;
-    var step = showMonth ? 6 : 7;
-    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
-    (0, _Picker.onMenuKeyDown)(event, {
-      down: function down() {
-        delta = step;
-      },
-      up: function up() {
-        delta = -step;
-      },
-      right: function right() {
-        delta = 1;
-      },
-      left: function left() {
-        delta = -1;
-      },
-      enter: function enter() {
-        handleOK(event);
-      }
+    onKeyFocusEvent(event, {
+      date: calendarDate,
+      callback: setCalendarDate
     });
-    var nextDate = changeDateFunc(calendarDate, delta);
-    if (checkFocusable(nextDate)) {
-      setCalendarDate(nextDate);
-      focusSelectedDate();
+    if (event.key === 'Enter') {
+      handleOK(event);
     }
   });
-
-  /**
-   * The callback triggered after the month selection box is opened or closed.
-   */
-  var handleToggleMonthDropdown = (0, _utils.useEventCallback)(function (toggle) {
-    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
-    setShowMonthDropdown(toggle);
-  });
   var handleClick = (0, _utils.useEventCallback)(function () {
     if (editable) {
       return;
@@ -336,7 +312,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
-      focusTargetInput();
+      focusInput();
     }
   });
 
@@ -349,7 +325,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
-      focusTargetInput();
+      focusInput();
     }
   });
 
@@ -372,7 +348,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         if (open) {
           if ((0, _dateUtils.isValid)(calendarDate) && !isDateDisabled(calendarDate)) {
             updateValue(event);
-            focusTargetInput();
+            focusInput();
           }
         } else {
           var _trigger$current3;
@@ -381,36 +357,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       }
     });
   });
-
-  // Check whether the time is within the time range of the shortcut option in the toolbar.
-  var disabledToolbarHandle = function disabledToolbarHandle(date) {
-    var _DEPRECATED_disabledD;
-    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 = (0, _dateUtils.disabledTime)(props, date);
-    return allowDate || allowTime;
-  };
-
-  /**
-   * Whether "OK" button is disabled
-   *
-   * - If format is date, disable ok button if selected date is disabled
-   * - If format is month, disable ok button if all dates in the month of selected date are disabled
-   */
-  var isOKButtonDisabled = function isOKButtonDisabled(selectedDate) {
-    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {
-      return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
-    }
-    return disabledToolbarHandle(selectedDate);
-  };
-  var calendarProps = (0, _react.useMemo)(function () {
-    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
-      return function (next, date) {
-        var _disabledOrHiddenTime;
-        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;
-      };
-    });
-  }, [props]);
-  var _splitRanges = (0, _utils3.splitRanges)(ranges),
+  var calendarProps = (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.calendarOnlyProps), function (func) {
+    return function (next, date) {
+      var _func;
+      return (_func = func === null || func === void 0 ? void 0 : func(next, date)) !== null && _func !== void 0 ? _func : false;
+    };
+  });
+  var _splitRanges = (0, _utils2.splitRanges)(ranges),
     sideRanges = _splitRanges.sideRanges,
     bottomRanges = _splitRanges.bottomRanges;
   var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
@@ -440,7 +393,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
-      disabledShortcut: disabledToolbarHandle,
+      disableShortcut: isDatetimeDisabled,
       onShortcutClick: handleShortcutPageDate
     }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement(_CalendarContainer.default, (0, _extends2.default)({}, calendarProps, {
       targetId: id,
@@ -460,7 +413,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
       onSelect: handleSelect,
-      onToggleMonthDropdown: handleToggleMonthDropdown,
+      onToggleMonthDropdown: toggleMonthView,
       onToggleTimeDropdown: onToggleTimeDropdown,
       onChangeMonth: handleChangeMonth,
       onChangeTime: handleChangeTime,
@@ -469,8 +422,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
-      disabledOkBtn: isOKButtonDisabled,
-      disabledShortcut: disabledToolbarHandle,
+      disableOkBtn: isOkButtonDisabled,
+      disableShortcut: isDatetimeDisabled,
       onShortcutClick: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
@@ -499,7 +452,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
       resetCalendarDate();
     }
-    setShowMonthDropdown(false);
+    setMonthView(false);
     (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
   });
   var showCleanButton = cleanable && hasValue && !readOnly;
@@ -527,7 +480,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
+  }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils2.getRestProps)(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
     onClick: handleClick
@@ -557,13 +510,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }))));
 });
 DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
+DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, _utils2.deprecatedPropTypes, {
   calendarDefaultDate: _propTypes.default.instanceOf(Date),
   defaultValue: _propTypes.default.instanceOf(Date),
-  disabledDate: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableDate" property instead.'),
-  disabledHours: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableHour" property instead.'),
-  disabledMinutes: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableMinute" property instead.'),
-  disabledSeconds: (0, _propTypes2.deprecatePropTypeNew)(_propTypes.default.func, 'Use "shouldDisableSecond" property instead.'),
   shouldDisableDate: _propTypes.default.func,
   shouldDisableHour: _propTypes.default.func,
   shouldDisableMinute: _propTypes.default.func,

package/cjs/DatePicker/PredefinedRanges.d.ts

@@ -6,7 +6,7 @@ export interface PredefinedRangesProps<T = any, Shortcut = T> extends StackProps
     ranges?: RangeType<Shortcut>[];
     calendarDate: T;
     locale: CalendarLocale;
-    disabledShortcut?: (value: T) => boolean;
+    disableShortcut?: (value: T) => boolean;
     onShortcutClick?: (range: InnerRange<Shortcut>, closeOverlay: boolean, event: React.MouseEvent) => void;
 }
 declare const PredefinedRanges: React.ForwardRefExoticComponent<PredefinedRangesProps<any, any> & React.RefAttributes<HTMLDivElement>>;

package/cjs/DatePicker/PredefinedRanges.js

@@ -14,12 +14,12 @@ var _utils = require("../utils");
 var _utils2 = require("./utils");
 var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var className = props.className,
-    disabledShortcut = props.disabledShortcut,
+    disableShortcut = props.disableShortcut,
     onShortcutClick = props.onShortcutClick,
     calendarDate = props.calendarDate,
     rangesProp = props.ranges,
     locale = props.locale,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "disabledShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "disableShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
   var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),
     ranges = _useState[0],
     setRanges = _useState[1];
@@ -47,7 +47,7 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
       closeOverlay = range.closeOverlay,
       label = range.label,
       rest = (0, _objectWithoutPropertiesLoose2.default)(range, ["value", "closeOverlay", "label"]);
-    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
+    var disabled = disableShortcut === null || disableShortcut === void 0 ? void 0 : disableShortcut(value);
     var handleClickShortcut = function handleClickShortcut(event) {
       if (disabled) {
         return;

package/cjs/DatePicker/Toolbar.d.ts

@@ -3,7 +3,7 @@ import { PredefinedRangesProps } from './PredefinedRanges';
 export type { RangeType } from './types';
 export interface ToolbarProps<T = any, Shortcut = T> extends PredefinedRangesProps<T, Shortcut> {
     hideOkBtn?: boolean;
-    disabledOkBtn?: (value: T) => boolean;
+    disableOkBtn?: (value: T) => boolean;
     onOk?: (event: React.MouseEvent) => void;
 }
 declare type ToolbarComponent = React.ForwardRefExoticComponent<ToolbarProps> & {