rsuite 5.59.0 → 5.59.2

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> & {

package/cjs/DatePicker/Toolbar.js

@@ -11,12 +11,12 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../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.default.createElement(_Button.default, {
     appearance: "primary",
     size: "sm",
@@ -32,15 +32,15 @@ var Toolbar = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "calendarDate", "ranges", "locale", "hideOkBtn", "disableOkBtn", "disableShortcut", "onOk", "onShortcutClick"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -60,16 +60,17 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function Toolbar(props, ref
     ranges: ranges,
     calendarDate: calendarDate,
     locale: locale,
-    disabledShortcut: disabledShortcut,
+    disableShortcut: disableShortcut,
     onShortcutClick: onShortcutClick,
     "data-testid": "daterange-predefined-bottom"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('right')
-  }, !hideOkBtn && /*#__PURE__*/_react.default.createElement(SubmitButton, {
-    disabledOkBtn: disabledOkBtn,
+  }, !hideOkBtn && /*#__PURE__*/_react.default.createElement(OkButton, {
+    disableOkBtn: disableOkBtn,
     calendarDate: calendarDate,
     onOk: onOk
   }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
+Toolbar.displayName = 'Toolbar';
 var _default = Toolbar;
 exports.default = _default;

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

package/cjs/DatePicker/hooks/useFocus.js

@@ -0,0 +1,96 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _delay = _interopRequireDefault(require("lodash/delay"));
+var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
+var _addDays = _interopRequireDefault(require("date-fns/addDays"));
+var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+var _utils = require("../../Calendar/utils");
+var _utils2 = require("../../utils");
+var _utils3 = require("../../internals/Picker/utils");
+function useFocus(props) {
+  var target = props.target,
+    showMonth = props.showMonth,
+    id = props.id,
+    localeProp = props.locale;
+  var _useCustom = (0, _utils2.useCustom)('DatePicker', localeProp),
+    locale = _useCustom.locale,
+    formatDate = _useCustom.formatDate;
+  /**
+   * 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, _utils.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 focusInput = (0, _useEventCallback.default)(function () {
+    (0, _delay.default)(function () {
+      var _target$current;
+      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+    }, 1);
+  });
+  var onKeyFocusEvent = (0, _useEventCallback.default)(function (event, options) {
+    var date = options.date,
+      callback = options.callback;
+    var delta = 0;
+    var step = showMonth ? 6 : 7;
+    var changeDateFunc = showMonth ? _addMonths.default : _addDays.default;
+    (0, _utils3.onMenuKeyDown)(event, {
+      down: function down() {
+        delta = step;
+      },
+      up: function up() {
+        delta = -step;
+      },
+      right: function right() {
+        delta = 1;
+      },
+      left: function left() {
+        delta = -1;
+      }
+    });
+    var nextDate = changeDateFunc(date, delta);
+    if (checkFocusable(nextDate)) {
+      callback(nextDate);
+      focusSelectedDate();
+    }
+  });
+  return {
+    focusInput: focusInput,
+    focusSelectedDate: focusSelectedDate,
+    onKeyFocusEvent: onKeyFocusEvent
+  };
+}
+var _default = useFocus;
+exports.default = _default;

package/cjs/DatePicker/hooks/useMonthView.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface UseMonthViewProps {
+    onToggleMonthDropdown?: (toggle: boolean) => void;
+}
+declare function useMonthView(props: UseMonthViewProps): {
+    monthView: boolean;
+    setMonthView: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    toggleMonthView: (...args: any[]) => any;
+};
+export default useMonthView;

package/cjs/DatePicker/hooks/useMonthView.js

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+function useMonthView(props) {
+  var onToggleMonthDropdown = props.onToggleMonthDropdown;
+  var _useState = (0, _react.useState)(false),
+    monthView = _useState[0],
+    setMonthView = _useState[1];
+  /**
+   * The callback triggered after the month selection box is opened or closed.
+   */
+  var toggleMonthView = (0, _useEventCallback.default)(function (show) {
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(show);
+    setMonthView(show);
+  });
+  return {
+    monthView: monthView,
+    setMonthView: setMonthView,
+    toggleMonthView: toggleMonthView
+  };
+}
+var _default = useMonthView;
+exports.default = _default;

package/cjs/DatePicker/index.d.ts

@@ -1,3 +1,4 @@
 import DatePicker from './DatePicker';
-export type { DatePickerProps, RangeType } from './DatePicker';
+export type { RangeType } from './types';
+export type { DatePickerProps } from './DatePicker';
 export default DatePicker;