rsuite 5.71.0 → 5.72.0

package/cjs/DatePicker/DatePicker.js

@@ -12,9 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
-var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
+var _Time = _interopRequireDefault(require("@rsuite/icons/Time"));
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
-var _useCalendarDate2 = _interopRequireDefault(require("../Calendar/useCalendarDate"));
+var _hooks = require("../Calendar/hooks");
 var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
@@ -25,13 +25,13 @@ var _useFocus2 = _interopRequireDefault(require("./hooks/useFocus"));
 var _useCustomizedInput2 = _interopRequireDefault(require("./hooks/useCustomizedInput"));
 var _MonthDropdown = require("../Calendar/MonthDropdown");
 var _utils = require("../internals/utils");
-var _hooks = require("../internals/hooks");
+var _hooks2 = require("../internals/hooks");
 var _date = require("../internals/utils/date");
 var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
 var _utils2 = require("./utils");
 var _templateObject, _templateObject2;
-var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
+var _excluded = ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "caretAs", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showMeridiem", "showWeekNumbers", "style", "size", "monthDropdownProps", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -56,8 +56,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     disabled = props.disabled,
     readOnly = props.readOnly,
     plaintext = props.plaintext,
-    _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    format = props.format,
     idProp = props.id,
     isoWeek = props.isoWeek,
     _props$weekStart = props.weekStart,
@@ -79,7 +78,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     placeholder = _props$placeholder === void 0 ? '' : _props$placeholder,
     ranges = props.ranges,
     valueProp = props.value,
-    showMeridian = props.showMeridian,
+    DEPRECATED_showMeridian = props.showMeridian,
+    _props$showMeridiem = props.showMeridiem,
+    showMeridiem = _props$showMeridiem === void 0 ? DEPRECATED_showMeridian : _props$showMeridiem,
     showWeekNumbers = props.showWeekNumbers,
     style = props.style,
     size = props.size,
@@ -107,21 +108,22 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     DEPRECATED_disabledMinutes = props.disabledMinutes,
     DEPRECATED_disabledSeconds = props.disabledSeconds,
     restProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var id = (0, _hooks.useUniqueId)('rs-', idProp);
+  var id = (0, _hooks2.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
     root = _usePickerRef.root,
     target = _usePickerRef.target,
     overlay = _usePickerRef.overlay;
-  var _useCustom = (0, _hooks.useCustom)('DatePicker', overrideLocale),
+  var _useCustom = (0, _hooks2.useCustom)('DatePicker', overrideLocale),
     locale = _useCustom.locale;
-  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
+  var formatStr = format || locale.shortDateFormat || 'yyyy-MM-dd';
+  var _useClassNames = (0, _hooks2.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
-  var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
+  var _useControlled = (0, _hooks2.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1];
-  var _useCalendarDate = (0, _useCalendarDate2.default)(value, calendarDefaultDate),
+  var _useCalendarDate = (0, _hooks.useCalendarDate)(value, calendarDefaultDate),
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
@@ -131,10 +133,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setMonthView = _useMonthView.setMonthView,
     monthView = _useMonthView.monthView,
     toggleMonthView = _useMonthView.toggleMonthView;
+  var _useDateMode = (0, _date.useDateMode)(formatStr),
+    mode = _useDateMode.mode;
 
   // Show only the calendar month panel. formatStr = 'yyyy-MM'
-  var onlyShowMonth = (0, _date.shouldRenderMonth)(formatStr) && !(0, _date.shouldRenderDate)(formatStr);
-  var showMonth = onlyShowMonth || monthView;
+  var showMonth = mode === _date.DateMode.Month || monthView;
   var _useFocus = (0, _useFocus2.default)({
       target: target,
       showMonth: showMonth,
@@ -180,7 +183,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * - 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, _date.shouldRenderMonth)(formatStr) && !(0, _date.shouldRenderDate)(formatStr)) {
+    if (mode === _date.DateMode.Month) {
       return isMonthDisabled(selectedDate);
     }
     return isDatetimeDisabled(selectedDate);
@@ -197,7 +200,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Switch to the callback triggered after the next month.
    */
-  var handleMoveForward = (0, _hooks.useEventCallback)(function (nextPageDate) {
+  var handleMoveForward = (0, _hooks2.useEventCallback)(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onNextMonth === null || onNextMonth === void 0 ? void 0 : onNextMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
@@ -206,7 +209,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Switch to the callback triggered after the previous month.
    */
-  var handleMoveBackward = (0, _hooks.useEventCallback)(function (nextPageDate) {
+  var handleMoveBackward = (0, _hooks2.useEventCallback)(function (nextPageDate) {
     setCalendarDate(nextPageDate);
     onPrevMonth === null || onPrevMonth === void 0 ? void 0 : onPrevMonth(nextPageDate);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextPageDate);
@@ -215,7 +218,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered when the date changes.
    */
-  var handleDateChange = (0, _hooks.useEventCallback)(function (nextValue, event) {
+  var handleDateChange = (0, _hooks2.useEventCallback)(function (nextValue, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue, event);
     onChangeCalendarDate === null || onChangeCalendarDate === void 0 ? void 0 : onChangeCalendarDate(nextValue, event);
   });
@@ -223,7 +226,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    *  A callback triggered when the time on the calendar changes.
    */
-  var handleChangeTime = (0, _hooks.useEventCallback)(function (nextPageTime) {
+  var handleChangeTime = (0, _hooks2.useEventCallback)(function (nextPageTime) {
     setCalendarDate(nextPageTime);
     handleDateChange(nextPageTime);
   });
@@ -231,26 +234,16 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Close the calendar panel.
    */
-  var handleClose = (0, _hooks.useEventCallback)(function () {
+  var handleClose = (0, _hooks2.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);
   });
-
-  /**
-   * The callback triggered when PM/AM is switched.
-   */
-  var handleToggleMeridian = (0, _hooks.useEventCallback)(function () {
-    var hours = (0, _date.getHours)(calendarDate);
-    var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = (0, _date.setHours)(calendarDate, nextHours);
-    handleChangeTime(nextDate);
-  });
   var updateValue = function updateValue(event, date, closeOverlay) {
     if (closeOverlay === void 0) {
       closeOverlay = true;
     }
     var nextValue = typeof date !== 'undefined' ? date : calendarDate;
-    setCalendarDate(nextValue || new Date());
+    setCalendarDate(nextValue || (0, _date.startOfToday)());
     setValue(nextValue);
     if (nextValue !== value) {
       onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
@@ -265,7 +258,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered after the date in the shortcut area is clicked.
    */
-  var handleShortcutPageDate = (0, _hooks.useEventCallback)(function (range, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _hooks2.useEventCallback)(function (range, closeOverlay, event) {
     var value = range.value;
     updateValue(event, value, closeOverlay);
     handleDateChange(value, event);
@@ -275,7 +268,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered after clicking the OK button.
    */
-  var handleOK = (0, _hooks.useEventCallback)(function (event) {
+  var handleOK = (0, _hooks2.useEventCallback)(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
     focusInput();
@@ -285,13 +278,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * Callback after clicking the clear button.
    */
 
-  var handleClean = (0, _hooks.useEventCallback)(function (event) {
+  var handleClean = (0, _hooks2.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);
   });
-  var handlePickerPopupKeyDown = (0, _hooks.useEventCallback)(function (event) {
+  var handlePickerPopupKeyDown = (0, _hooks2.useEventCallback)(function (event) {
     onKeyFocusEvent(event, {
       date: calendarDate,
       callback: setCalendarDate
@@ -300,7 +293,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       handleOK(event);
     }
   });
-  var handleClick = (0, _hooks.useEventCallback)(function () {
+  var handleClick = (0, _hooks2.useEventCallback)(function () {
     if (editable) {
       return;
     }
@@ -310,16 +303,15 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Callback after the date is selected.
    */
-  var handleSelect = (0, _hooks.useEventCallback)(function (nextValue, event, updatableValue) {
+  var handleCalendarSelect = (0, _hooks2.useEventCallback)(function (date, event, updatableValue) {
     if (updatableValue === void 0) {
       updatableValue = true;
     }
-    setCalendarDate(
-    // Determine whether the current value contains time, if not, use calendarDate.
-    (0, _date.shouldRenderTime)(formatStr) ? nextValue : (0, _date.copyTime)({
+    var nextValue = (0, _date.copyTime)({
       from: calendarDate,
-      to: nextValue
-    }));
+      to: date
+    });
+    setCalendarDate(nextValue);
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
@@ -330,11 +322,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    *  A callback triggered when the date on the calendar changes.
    */
-  var handleChangeMonth = (0, _hooks.useEventCallback)(function (nextPageDate, event) {
+  var handleChangeMonth = (0, _hooks2.useEventCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
     focusSelectedDate();
-    if (oneTap && onlyShowMonth) {
+    if (oneTap && mode === _date.DateMode.Month) {
       updateValue(event, nextPageDate);
       focusInput();
     }
@@ -343,13 +335,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * Callback after the input box value is changed.
    */
-  var handleInputChange = (0, _hooks.useEventCallback)(function (value, event) {
+  var handleInputChange = (0, _hooks2.useEventCallback)(function (value, event) {
     if (!isErrorValue(value)) {
-      handleSelect(value, event);
+      handleCalendarSelect(value, event);
     }
     updateValue(event, value, false);
   });
-  var handleInputKeyDown = (0, _hooks.useEventCallback)(function (event) {
+  var handleInputKeyDown = (0, _hooks2.useEventCallback)(function (event) {
     (0, _Picker.onMenuKeyDown)(event, {
       esc: handleClose,
       enter: function enter() {
@@ -410,7 +402,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       targetId: id,
       locale: locale,
       showWeekNumbers: showWeekNumbers,
-      showMeridian: showMeridian,
+      showMeridiem: showMeridiem,
       disabledDate: isDateDisabled,
       disabledHours: shouldDisableHour !== null && shouldDisableHour !== void 0 ? shouldDisableHour : DEPRECATED_disabledHours,
       disabledMinutes: shouldDisableMinute !== null && shouldDisableMinute !== void 0 ? shouldDisableMinute : DEPRECATED_disabledMinutes,
@@ -425,12 +417,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
       onMoveBackward: handleMoveBackward,
-      onSelect: handleSelect,
+      onSelect: handleCalendarSelect,
       onToggleMonthDropdown: toggleMonthView,
       onToggleTimeDropdown: onToggleTimeDropdown,
       onChangeMonth: handleChangeMonth,
-      onChangeTime: handleChangeTime,
-      onToggleMeridian: handleToggleMeridian
+      onChangeTime: handleChangeTime
     })), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       ranges: bottomRanges,
@@ -456,9 +447,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     if (caretAsProp === null) {
       return null;
     }
-    return caretAsProp || ((0, _date.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
-  }, [caretAsProp, formatStr]);
-  var handleTriggerClose = (0, _hooks.useEventCallback)(function (cause) {
+    return caretAsProp || (mode === _date.DateMode.Time ? _Time.default : _Calendar.default);
+  }, [caretAsProp, mode]);
+  var handleTriggerClose = (0, _hooks2.useEventCallback)(function (cause) {
     var _props$onClose;
     // Unless overlay is closing on user clicking "OK" button,
     // reset the selected date on calendar panel
@@ -562,7 +553,7 @@ DatePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, _util
   onToggleTimeDropdown: _propTypes.default.func,
   oneTap: _propTypes.default.bool,
   ranges: _propTypes.default.array,
-  showMeridian: _propTypes.default.bool,
+  showMeridiem: _propTypes.default.bool,
   showWeekNumbers: _propTypes.default.bool,
   value: _propTypes.default.instanceOf(Date)
 });

package/cjs/DatePicker/utils.js

@@ -16,7 +16,7 @@ var _Picker = require("../internals/Picker");
 var _date = require("../internals/utils/date");
 var _excluded = ["value"];
 function getDefaultRanges(value) {
-  var today = new Date();
+  var today = (0, _date.startOfToday)();
 
   /**
    * If it is an array type, it returns the default shortcut key suitable for DateRangePicker Toolbar,

package/cjs/DateRangeInput/DateRangeInput.js

@@ -23,13 +23,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * @see https://rsuitejs.com/components/date-range-input/
  */
 var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useCustom = (0, _hooks.useCustom)('Calendar'),
+    locale = _useCustom.locale,
+    parseDate = _useCustom.parseDate;
   var className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'date-range-input' : _props$classPrefix,
     _props$character = props.character,
     character = _props$character === void 0 ? ' ~ ' : _props$character,
     _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    formatStr = _props$format === void 0 ? locale.shortDateFormat : _props$format,
     valueProp = props.value,
     _props$defaultValue = props.defaultValue,
     defaultValue = _props$defaultValue === void 0 ? [] : _props$defaultValue,
@@ -48,9 +51,6 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var _useSelectedState = (0, _DateInput.useSelectedState)(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var _useCustom = (0, _hooks.useCustom)('Calendar'),
-    locale = _useCustom.locale,
-    parseDate = _useCustom.parseDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var dateLocale = locale.dateLocale;
   var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
@@ -110,6 +110,14 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     setValue(nextValue);
   });
+  var handleClear = (0, _hooks.useEventCallback)(function (event) {
+    startDateState.setNewDate(null);
+    endDateState.setNewDate(null);
+    setSelectionRange(0, 0);
+    reset();
+    setValue(null);
+    onChange === null || onChange === void 0 ? void 0 : onChange(null, event);
+  });
   var onSegmentChange = (0, _hooks.useEventCallback)(function (event, nextDirection) {
     var input = event.target;
     var key = event.key;
@@ -189,7 +197,10 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   });
   var onSegmentValueRemove = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
-    if (selectedState.selectedPattern) {
+    var value = input.value;
+    if (input.selectionStart === 0 && value && input.selectionEnd === value.length) {
+      handleClear(event);
+    } else if (selectedState.selectedPattern) {
       var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
         input: input,
         valueOffset: null

package/cjs/DateRangePicker/Calendar.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import { CalendarProps as CalendarCoreProps } from '../Calendar/CalendarContainer';
+import { CalendarProps as CalendarContainerProps } from '../Calendar/CalendarContainer';
 import { DATERANGE_DISABLED_TARGET } from '../internals/constants';
 import { DateRange } from './types';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import { DatePickerLocale } from '../locales';
-type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'format' | 'locale' | 'onToggleMeridian';
-export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, OmitCalendarCoreTypes> {
-    calendarDate?: DateRange;
+type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'format' | 'locale';
+export interface CalendarProps extends WithAsProps, Omit<CalendarContainerProps, OmitCalendarCoreTypes> {
+    calendarDateRange?: DateRange;
     disabledDate?: (date: Date, selectValue: [] | [Date] | [Date, Date], type: DATERANGE_DISABLED_TARGET) => boolean;
     format?: string;
     hoverRangeValue?: DateRange;
@@ -20,7 +20,6 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     value?: [] | [Date] | [Date, Date];
     onChangeCalendarMonth?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
-    onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onSelect?: (index: number, date: Date, event: React.SyntheticEvent) => void;
     onMouseMove?: (date: Date) => void;
 }

package/cjs/DateRangePicker/Calendar.js

@@ -6,17 +6,19 @@ exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
 var _date = require("../internals/utils/date");
 var _constants = require("../internals/constants");
-var _hooks = require("../internals/hooks");
-var _excluded = ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"];
+var _hooks = require("./hooks");
+var _excluded = ["as", "calendarDateRange", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onSelect", "value"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? _CalendarContainer.default : _props$as,
-    _props$calendarDate = props.calendarDate,
-    calendarDate = _props$calendarDate === void 0 ? [new Date(), (0, _date.addMonths)(new Date(), 1)] : _props$calendarDate,
+    _props$calendarDateRa = props.calendarDateRange,
+    calendarDateRange = _props$calendarDateRa === void 0 ? [(0, _date.startOfToday)(), (0, _date.addMonths)((0, _date.startOfToday)(), 1)] : _props$calendarDateRa,
     _props$format = props.format,
     format = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     disabledDate = props.disabledDate,
@@ -26,57 +28,29 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     limitStartYear = props.limitStartYear,
     onChangeCalendarMonth = props.onChangeCalendarMonth,
     onChangeCalendarTime = props.onChangeCalendarTime,
-    onToggleMeridian = props.onToggleMeridian,
     onSelect = props.onSelect,
     _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  var onMoveForward = (0, _hooks.useEventCallback)(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var onMoveBackward = (0, _hooks.useEventCallback)(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var handleSelect = (0, _hooks.useEventCallback)(function (date, event) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
-  });
-  var handleChangeMonth = (0, _hooks.useEventCallback)(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var handleChangeTime = (0, _hooks.useEventCallback)(function (nextPageDate) {
-    onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
-  });
-  var handleToggleMeridian = (0, _hooks.useEventCallback)(function (event) {
-    onToggleMeridian(index, event);
-  });
-  var getCalendarDate = function getCalendarDate() {
-    return calendarDate[index];
-  };
-  var handleMoveForward = (0, _hooks.useEventCallback)(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward((0, _date.addMonths)(getCalendarDate(), 1));
-  });
-  var handleMoveBackward = (0, _hooks.useEventCallback)(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _date.addMonths)(getCalendarDate(), -1));
+  var calendarHandlers = (0, _hooks.useCalendarHandlers)({
+    index: index,
+    calendarDateRange: calendarDateRange,
+    onChangeCalendarMonth: onChangeCalendarMonth,
+    onChangeCalendarTime: onChangeCalendarTime,
+    onSelect: onSelect
   });
-  var disabledMonth = function disabledMonth(date) {
+  var disableCalendarDate = (0, _react.useCallback)(function (date) {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _constants.DATERANGE_DISABLED_TARGET.CALENDAR);
-  };
+  }, [disabledDate, value]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     "data-testid": "calendar-" + (index === 0 ? 'start' : 'end')
-  }, rest, {
+  }, rest, calendarHandlers, {
+    index: index,
     format: format,
     dateRange: value,
-    disabledDate: disabledMonth,
-    index: index,
+    disabledDate: disableCalendarDate,
     limitEndYear: limitEndYear,
     limitStartYear: limitStartYear,
-    onChangeMonth: handleChangeMonth,
-    onChangeTime: handleChangeTime,
-    onMoveBackward: handleMoveBackward,
-    onMoveForward: handleMoveForward,
-    onToggleMeridian: handleToggleMeridian,
-    onSelect: handleSelect,
-    calendarDate: getCalendarDate(),
     ref: ref
   }));
 });

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -3,17 +3,18 @@ import { PickerComponent } from '../internals/Picker';
 import type { DisabledDateFunction, RangeType, DateRange } from './types';
 import type { FormControlBaseProps, PickerBaseProps } from '../internals/types';
 import type { DateRangePickerLocale } from '../locales';
-import type { MonthDropdownProps } from '../Calendar/CalendarContext';
+import type { MonthDropdownProps } from '../Calendar/types';
 export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLocale>, FormControlBaseProps<DateRange | null> {
     /**
      * Custom caret component
      */
     caretAs?: React.ElementType | null;
-    /** Predefined date ranges */
+    /**
+     * Predefined date ranges
+     */
     ranges?: RangeType[];
     /**
      * Format of the date displayed in the input box
-     * @default 'yyyy-MM-dd'
      */
     format?: string;
     /**
@@ -68,9 +69,13 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      */
     showOneCalendar?: boolean;
     /**
-     * Meridian format
+     * @deprecated Use `showMeridiem` instead
      */
     showMeridian?: boolean;
+    /**
+     * Meridiem format for 12-hour time
+     */
+    showMeridiem?: boolean;
     /**
      * Whether to display the formatted date range at the header of the calendar
      * @default true
@@ -118,6 +123,18 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * Whether a date cell is disabled
      */
     shouldDisableDate?: DisabledDateFunction;
+    /**
+     * Disabled hours on the time view
+     */
+    shouldDisableHour?: (hour: number, date: Date) => boolean;
+    /**
+     * Disabled minutes on the time view
+     */
+    shouldDisableMinute?: (minute: number, date: Date) => boolean;
+    /**
+     * Disabled seconds on the time view
+     */
+    shouldDisableSecond?: (second: number, date: Date) => boolean;
     /**
      * Called when the option is selected
      */