rsuite 5.59.1 → 5.59.2

package/esm/@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/esm/Calendar/CalendarContainer.js

@@ -9,7 +9,7 @@ import TimeDropdown from './TimeDropdown';
 import CalendarBody from './CalendarBody';
 import CalendarHeader from './CalendarHeader';
 import { useClassNames, useEventCallback } from '../utils';
-import { disabledTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from '../utils/dateUtils';
+import { disableTime, addMonths, shouldRenderDate, shouldRenderTime, shouldRenderMonth, isSameMonth, calendarOnlyProps, omitHideDisabledProps, isValid } from '../utils/dateUtils';
 import { CalendarProvider } from './CalendarContext';
 import useCalendarState, { CalendarState } from './useCalendarState';
 import AngleUpIcon from '@rsuite/icons/legacy/AngleUp';
@@ -63,12 +63,12 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var calendarDate = useMemo(function () {
     return isValid(calendarDateProp) ? calendarDateProp : new Date();
   }, [calendarDateProp]);
-  var isDisabledDate = useEventCallback(function (date) {
+  var isDateDisabled = 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 disabledTime(props, date);
+    return disableTime(props, date);
   };
   var handleMoveForward = useEventCallback(function () {
     onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(calendarDate, 1));
@@ -122,7 +122,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var contextValue = {
     date: calendarDate,
     dateRange: dateRange,
-    disabledDate: isDisabledDate,
+    disabledDate: isDateDisabled,
     format: format,
     hoverRangeValue: hoverRangeValue,
     inSameMonth: inSameThisMonthDate,
@@ -165,7 +165,7 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     show: showMonth,
     limitEndYear: limitEndYear,
     limitStartYear: limitStartYear,
-    disabledMonth: isDisabledDate
+    disabledMonth: isDateDisabled
   }), renderTime && /*#__PURE__*/React.createElement(TimeDropdown, _extends({}, timeDropdownProps, {
     show: showTime,
     showMeridian: showMeridian

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

@@ -3,12 +3,10 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject;
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
-import delay from 'lodash/delay';
-import omit from 'lodash/omit';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
@@ -18,14 +16,14 @@ import Toolbar from './Toolbar';
 import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
 import { mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps } from '../utils';
-import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, isValid, disabledTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
-import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
+import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, isValid, disableTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
+import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
 import { OverlayCloseCause } from '../internals/Overlay/OverlayTrigger';
 import DateInput from '../DateInput';
 import InputGroup from '../InputGroup';
-import { deprecatePropTypeNew } from '../internals/propTypes';
-import { getAriaLabel } from '../Calendar/utils';
-import { splitRanges } from './utils';
+import { splitRanges, deprecatedPropTypes, getRestProps } from './utils';
+import useMonthView from './hooks/useMonthView';
+import useFocus from './hooks/useFocus';
 /**
  * A date picker allows users to select a date from a calendar.
  *
@@ -73,10 +71,6 @@ var DatePicker = /*#__PURE__*/React.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,
@@ -94,7 +88,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     renderCell = props.renderCell,
-    restProps = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -102,8 +100,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay;
   var _useCustom = useCustom('DatePicker', overrideLocale),
-    locale = _useCustom.locale,
-    formatDate = _useCustom.formatDate;
+    locale = _useCustom.locale;
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -114,11 +111,26 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
-  var _useState = useState(false),
-    showMonthDropdown = _useState[0],
-    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var _useMonthView = useMonthView({
+      onToggleMonthDropdown: onToggleMonthDropdown
+    }),
+    setMonthView = _useMonthView.setMonthView,
+    monthView = _useMonthView.monthView,
+    toggleMonthView = _useMonthView.toggleMonthView; // Show only the calendar month panel. formatStr = 'yyyy-MM'
   var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
-  var showMonth = onlyShowMonth || showMonthDropdown;
+  var showMonth = onlyShowMonth || monthView;
+  var _useFocus = useFocus({
+      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);
@@ -128,6 +140,34 @@ var DatePicker = /*#__PURE__*/React.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)) || 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 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 (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
+      return isMonthDisabled(selectedDate);
+    }
+    return isDatetimeDisabled(selectedDate);
+  };
   var isErrorValue = function isErrorValue(value) {
     if (!isValid(value)) {
       return true;
@@ -170,6 +210,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   });
+
+  /**
+   * Close the calendar panel.
+   */
   var handleClose = 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);
@@ -184,11 +228,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextDate = 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) {
@@ -211,55 +255,13 @@ var DatePicker = /*#__PURE__*/React.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 = 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() {
-    delay(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 = useEventCallback(function () {
-    delay(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 = useEventCallback(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
-    focusTargetInput();
+    focusInput();
   });
 
   /**
@@ -267,46 +269,20 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
 
   var handleClean = 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 = useEventCallback(function (event) {
-    var delta = 0;
-    var step = showMonth ? 6 : 7;
-    var changeDateFunc = showMonth ? addMonths : addDays;
-    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 = useEventCallback(function (toggle) {
-    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
-    setShowMonthDropdown(toggle);
-  });
   var handleClick = useEventCallback(function () {
     if (editable) {
       return;
@@ -330,7 +306,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
-      focusTargetInput();
+      focusInput();
     }
   });
 
@@ -343,7 +319,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
-      focusTargetInput();
+      focusInput();
     }
   });
 
@@ -366,7 +342,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         if (open) {
           if (isValid(calendarDate) && !isDateDisabled(calendarDate)) {
             updateValue(event);
-            focusTargetInput();
+            focusInput();
           }
         } else {
           var _trigger$current3;
@@ -375,35 +351,12 @@ var DatePicker = /*#__PURE__*/React.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 = 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 (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
-      return isEveryDateInMonth(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
-    }
-    return disabledToolbarHandle(selectedDate);
-  };
-  var calendarProps = useMemo(function () {
-    return mapValues(pick(props, 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 calendarProps = mapValues(pick(props, 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 = splitRanges(ranges),
     sideRanges = _splitRanges.sideRanges,
     bottomRanges = _splitRanges.bottomRanges;
@@ -434,7 +387,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
-      disabledShortcut: disabledToolbarHandle,
+      disableShortcut: isDatetimeDisabled,
       onShortcutClick: handleShortcutPageDate
     }), /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement(CalendarContainer, _extends({}, calendarProps, {
       targetId: id,
@@ -454,7 +407,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
       onSelect: handleSelect,
-      onToggleMonthDropdown: handleToggleMonthDropdown,
+      onToggleMonthDropdown: toggleMonthView,
       onToggleTimeDropdown: onToggleTimeDropdown,
       onChangeMonth: handleChangeMonth,
       onChangeTime: handleChangeTime,
@@ -463,8 +416,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
-      disabledOkBtn: isOKButtonDisabled,
-      disabledShortcut: disabledToolbarHandle,
+      disableOkBtn: isOkButtonDisabled,
+      disableShortcut: isDatetimeDisabled,
       onShortcutClick: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
@@ -493,7 +446,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (cause !== 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;
@@ -521,7 +474,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     value: value,
     format: formatStr,
     plaintext: plaintext
-  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
+  }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, getRestProps(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
     onClick: handleClick
@@ -551,13 +504,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }))));
 });
 DatePicker.displayName = 'DatePicker';
-DatePicker.propTypes = _extends({}, pickerPropTypes, {
+DatePicker.propTypes = _extends({}, pickerPropTypes, deprecatedPropTypes, {
   calendarDefaultDate: PropTypes.instanceOf(Date),
   defaultValue: PropTypes.instanceOf(Date),
-  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,

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

@@ -8,12 +8,12 @@ import { useUpdateEffect } from '../utils';
 import { getDefaultRanges, getRanges } from './utils';
 var PredefinedRanges = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
+    rest = _objectWithoutPropertiesLoose(props, ["className", "disableShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
   var _useState = useState(getRanges(props)),
     ranges = _useState[0],
     setRanges = _useState[1];
@@ -41,7 +41,7 @@ var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
       closeOverlay = range.closeOverlay,
       label = range.label,
       rest = _objectWithoutPropertiesLoose(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/esm/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> & {

package/esm/DatePicker/Toolbar.js

@@ -6,12 +6,12 @@ import Button from '../Button';
 import { useClassNames } from '../utils';
 import PredefinedRanges from './PredefinedRanges';
 import Stack from '../Stack';
-var SubmitButton = function SubmitButton(_ref) {
-  var disabledOkBtn = _ref.disabledOkBtn,
+var OkButton = function OkButton(_ref) {
+  var disableOkBtn = _ref.disableOkBtn,
     calendarDate = _ref.calendarDate,
     onOk = _ref.onOk,
     children = _ref.children;
-  var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
+  var disabled = disableOkBtn === null || disableOkBtn === void 0 ? void 0 : disableOkBtn(calendarDate);
   return /*#__PURE__*/React.createElement(Button, {
     appearance: "primary",
     size: "sm",
@@ -27,15 +27,15 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(props, ref) {
   var className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'picker-toolbar' : _props$classPrefix,
-    disabledOkBtn = props.disabledOkBtn,
-    disabledShortcut = props.disabledShortcut,
-    hideOkBtn = props.hideOkBtn,
-    onOk = props.onOk,
-    onShortcutClick = props.onShortcutClick,
     calendarDate = props.calendarDate,
     ranges = props.ranges,
     locale = props.locale,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onShortcutClick", "calendarDate", "ranges", "locale"]);
+    hideOkBtn = props.hideOkBtn,
+    disableOkBtn = props.disableOkBtn,
+    disableShortcut = props.disableShortcut,
+    onOk = props.onOk,
+    onShortcutClick = props.onShortcutClick,
+    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "calendarDate", "ranges", "locale", "hideOkBtn", "disableOkBtn", "disableShortcut", "onOk", "onShortcutClick"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -55,15 +55,16 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(props, ref) {
     ranges: ranges,
     calendarDate: calendarDate,
     locale: locale,
-    disabledShortcut: disabledShortcut,
+    disableShortcut: disableShortcut,
     onShortcutClick: onShortcutClick,
     "data-testid": "daterange-predefined-bottom"
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix('right')
-  }, !hideOkBtn && /*#__PURE__*/React.createElement(SubmitButton, {
-    disabledOkBtn: disabledOkBtn,
+  }, !hideOkBtn && /*#__PURE__*/React.createElement(OkButton, {
+    disableOkBtn: disableOkBtn,
     calendarDate: calendarDate,
     onOk: onOk
   }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
+Toolbar.displayName = 'Toolbar';
 export default Toolbar;

package/esm/DatePicker/hooks/useFocus.d.ts

@@ -0,0 +1,13 @@
+import { RefObject } from 'react';
+interface UseFocusProps {
+    target: RefObject<HTMLElement>;
+    showMonth: boolean;
+    id: string;
+    locale: any;
+}
+declare function useFocus(props: UseFocusProps): {
+    focusInput: (...args: any[]) => any;
+    focusSelectedDate: () => void;
+    onKeyFocusEvent: (...args: any[]) => any;
+};
+export default useFocus;