rsuite 5.71.0 → 5.72.0

package/esm/DateRangeInput/DateRangeInput.js

@@ -16,13 +16,16 @@ import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from "
  * @see https://rsuitejs.com/components/date-range-input/
  */
 var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = 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,
@@ -41,9 +44,6 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useSelectedState = useSelectedState(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var _useCustom = useCustom('Calendar'),
-    locale = _useCustom.locale,
-    parseDate = _useCustom.parseDate;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var dateLocale = locale.dateLocale;
   var _useControlled = useControlled(valueProp, defaultValue),
@@ -103,6 +103,14 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     setValue(nextValue);
   });
+  var handleClear = 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 = useEventCallback(function (event, nextDirection) {
     var input = event.target;
     var key = event.key;
@@ -182,7 +190,10 @@ var DateRangeInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var onSegmentValueRemove = 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 = getInputSelectedState(_extends({}, keyPressOptions, {
         input: input,
         valueOffset: null

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

@@ -1,17 +1,17 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"];
-import React from 'react';
-import CalendarCore from "../Calendar/CalendarContainer.js";
-import { addMonths } from "../internals/utils/date/index.js";
+var _excluded = ["as", "calendarDateRange", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onSelect", "value"];
+import React, { useCallback } from 'react';
+import CalendarContainer from "../Calendar/CalendarContainer.js";
+import { addMonths, startOfToday } from "../internals/utils/date/index.js";
 import { DATERANGE_DISABLED_TARGET } from "../internals/constants/index.js";
-import { useEventCallback } from "../internals/hooks/index.js";
+import { useCalendarHandlers } from "./hooks/index.js";
 var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
-    Component = _props$as === void 0 ? CalendarCore : _props$as,
-    _props$calendarDate = props.calendarDate,
-    calendarDate = _props$calendarDate === void 0 ? [new Date(), addMonths(new Date(), 1)] : _props$calendarDate,
+    Component = _props$as === void 0 ? CalendarContainer : _props$as,
+    _props$calendarDateRa = props.calendarDateRange,
+    calendarDateRange = _props$calendarDateRa === void 0 ? [startOfToday(), addMonths(startOfToday(), 1)] : _props$calendarDateRa,
     _props$format = props.format,
     format = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     disabledDate = props.disabledDate,
@@ -21,57 +21,29 @@ var Calendar = /*#__PURE__*/React.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 = _objectWithoutPropertiesLoose(props, _excluded);
-  var onMoveForward = useEventCallback(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var onMoveBackward = useEventCallback(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var handleSelect = useEventCallback(function (date, event) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
-  });
-  var handleChangeMonth = useEventCallback(function (nextPageDate) {
-    onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
-  });
-  var handleChangeTime = useEventCallback(function (nextPageDate) {
-    onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
-  });
-  var handleToggleMeridian = useEventCallback(function (event) {
-    onToggleMeridian(index, event);
-  });
-  var getCalendarDate = function getCalendarDate() {
-    return calendarDate[index];
-  };
-  var handleMoveForward = useEventCallback(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward(addMonths(getCalendarDate(), 1));
-  });
-  var handleMoveBackward = useEventCallback(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward(addMonths(getCalendarDate(), -1));
+  var calendarHandlers = useCalendarHandlers({
+    index: index,
+    calendarDateRange: calendarDateRange,
+    onChangeCalendarMonth: onChangeCalendarMonth,
+    onChangeCalendarTime: onChangeCalendarTime,
+    onSelect: onSelect
   });
-  var disabledMonth = function disabledMonth(date) {
+  var disableCalendarDate = useCallback(function (date) {
     return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, DATERANGE_DISABLED_TARGET.CALENDAR);
-  };
+  }, [disabledDate, value]);
   return /*#__PURE__*/React.createElement(Component, _extends({
     "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/esm/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
      */

package/esm/DateRangePicker/DateRangePicker.js

@@ -3,18 +3,18 @@ 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, _templateObject2;
-var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "calendarSnapping", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "monthDropdownProps", "hideHours", "hideMinutes", "hideSeconds", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"];
+var _excluded = ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "calendarSnapping", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "format", "hoverRange", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showMeridiem", "showHeader", "style", "size", "caretAs", "value", "monthDropdownProps", "hideHours", "hideMinutes", "hideSeconds", "onChange", "onClean", "onEnter", "onExit", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"];
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import isNil from 'lodash/isNil';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 import PropTypes from 'prop-types';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
-import IconClockO from '@rsuite/icons/legacy/ClockO';
+import TimeIcon from '@rsuite/icons/Time';
 import Toolbar from "../DatePicker/Toolbar.js";
 import PredefinedRanges from "../DatePicker/PredefinedRanges.js";
 import Stack from "../Stack/index.js";
-import DateRangePickerContext from "./DateRangePickerContext.js";
+import { DateRangePickerProvider } from "./DateRangePickerProvider.js";
 import DateRangeInput from "../DateRangeInput/index.js";
 import InputGroup from "../InputGroup/index.js";
 import Header from "./Header.js";
@@ -27,7 +27,7 @@ import { DATERANGE_DISABLED_TARGET as TARGET } from "../internals/constants/inde
 import { omitTriggerPropKeys, PickerPopup, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker/index.js";
 import { useClassNames, useControlled, useCustom, useUniqueId, useEventCallback } from "../internals/hooks/index.js";
 import { createChainedFunction, mergeRefs, partitionHTMLProps, getStringLength } from "../internals/utils/index.js";
-import { addMonths, isValid, isBefore, isSameDay, addDays, startOfDay, endOfDay, shouldRenderTime, isAfter, isSameMonth, shouldRenderMonth, shouldRenderDate, calendarOnlyProps, getReversedTimeMeridian, reverseDateRangeOmitTime, copyTime, shouldOnlyRenderTime } from "../internals/utils/date/index.js";
+import { addMonths, addDays, copyTime, calendarOnlyProps, endOfDay, isValid, isBefore, isSameDay, isAfter, isSameMonth, reverseDateRangeOmitTime, startOfDay, DateMode, useDateMode } from "../internals/utils/date/index.js";
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -55,8 +55,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabled = props.disabled,
     DEPRECATED_disabledDate = props.disabledDate,
     shouldDisableDate = props.shouldDisableDate,
-    _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    shouldDisableHour = props.shouldDisableHour,
+    shouldDisableMinute = props.shouldDisableMinute,
+    shouldDisableSecond = props.shouldDisableSecond,
+    format = props.format,
     hoverRange = props.hoverRange,
     idProp = props.id,
     _props$isoWeek = props.isoWeek,
@@ -81,7 +83,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$showOneCalenda = props.showOneCalendar,
     showOneCalendar = _props$showOneCalenda === void 0 ? false : _props$showOneCalenda,
     showWeekNumbers = props.showWeekNumbers,
-    showMeridian = props.showMeridian,
+    DEPRECATED_showMeridian = props.showMeridian,
+    _props$showMeridiem = props.showMeridiem,
+    showMeridiem = _props$showMeridiem === void 0 ? DEPRECATED_showMeridian : _props$showMeridiem,
     _props$showHeader = props.showHeader,
     showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
     style = props.style,
@@ -114,16 +118,26 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCustom = useCustom('DateRangePicker', overrideLocale),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate;
-
-  // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
-  var calendarGap = showOneCalendar ? 0 : 1;
+  var formatStr = format || locale.shortDateFormat || 'yyyy-MM-dd';
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var _useControlled = useControlled(valueProp, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null),
     value = _useControlled[0],
     setValue = _useControlled[1];
+  var _useDateMode = useDateMode(formatStr),
+    mode = _useDateMode.mode,
+    has = _useDateMode.has;
 
   // Show only the calendar month panel. formatStr = 'yyyy-MM'
-  var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
+  var onlyShowMonth = mode === DateMode.Month;
+
+  // Only show the time panel. formatStr = 'HH:mm:ss'
+  var onlyShowTime = mode === DateMode.Time;
+
+  // Allows two calendar panels to display the same month.
+  var allowSameMonth = onlyShowMonth || showOneCalendar || onlyShowTime;
+
+  // Default gap between two calendars, if `showOneCalendar` is set, the gap is 0
+  var calendarGap = allowSameMonth ? 0 : 1;
 
   /**
    * Whether to complete the selection.
@@ -154,10 +168,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   // The displayed calendar panel is rendered based on this value.
   var _useState4 = useState(getSafeCalendarDate({
-      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null
+      value: (_ref2 = value !== null && value !== void 0 ? value : defaultCalendarValue) !== null && _ref2 !== void 0 ? _ref2 : null,
+      allowSameMonth: allowSameMonth
     })),
-    calendarDate = _useState4[0],
-    setCalendarDate = _useState4[1];
+    calendarDateRange = _useState4[0],
+    setCalendarDateRangeValue = _useState4[1];
 
   /**
    * When hoverRange is set, `selectValue` will be updated during the hover process,
@@ -180,7 +195,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    */
   var getCalendarDatetime = function getCalendarDatetime(calendarKey) {
     var index = calendarKey === 'start' ? 0 : 1;
-    return (calendarDate === null || calendarDate === void 0 ? void 0 : calendarDate[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);
+    return (calendarDateRange === null || calendarDateRange === void 0 ? void 0 : calendarDateRange[index]) || (defaultCalendarValue === null || defaultCalendarValue === void 0 ? void 0 : defaultCalendarValue[index]);
   };
 
   /**
@@ -194,7 +209,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextValue = dateRange;
 
     // The time should remain the same when the dates in the date range are changed.
-    if (shouldRenderTime(formatStr) && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
+    if (has('time') && dateRange !== null && dateRange !== void 0 && dateRange.length && (eventName === 'changeDate' || eventName === 'changeMonth')) {
       var startDate = copyTime({
         from: getCalendarDatetime('start'),
         to: dateRange[0]
@@ -211,11 +226,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var nextCalendarDate = getSafeCalendarDate({
       value: nextValue,
       calendarKey: calendarKey,
-      // When only the month is displayed and only one calendar is displayed,
-      // there is no need to add a month and two calendar panels are allowed to display the same month
-      allowSameMonth: onlyShowMonth || showOneCalendar
+      allowSameMonth: allowSameMonth
     });
-    setCalendarDate(nextCalendarDate);
+    setCalendarDateRangeValue(nextCalendarDate);
     if (onlyShowMonth && eventName === 'changeMonth') {
       setSelectedDates(nextCalendarDate);
     }
@@ -354,7 +367,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (isAfter(nextSelectDates[0], nextSelectDates[1])) {
         nextSelectDates = reverseDateRangeOmitTime(nextSelectDates);
       }
-      if (shouldRenderTime(formatStr)) {
+      if (has('time')) {
         nextSelectDates = [copyTime({
           from: getCalendarDatetime('start'),
           to: nextSelectDates[0]
@@ -373,7 +386,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setActiveCalendarKey('start');
     }
     setSelectedDates(nextSelectDates);
-    if (!isSameMonth(calendarDate[index], date) || calendarSnapping) {
+    if (!isSameMonth(calendarDateRange[index], date) || calendarSnapping) {
       setCalendarDateRange({
         dateRange: nextSelectDates,
         calendarKey: calendarKey,
@@ -396,7 +409,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [selectedDates]);
   var onChangeCalendarMonth = useEventCallback(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
-    var nextCalendarDate = Array.from(calendarDate);
+    var nextCalendarDate = Array.from(calendarDateRange);
     nextCalendarDate[index] = date;
     setCalendarDateRange({
       dateRange: nextCalendarDate,
@@ -406,7 +419,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var onChangeCalendarTime = useEventCallback(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
-    var nextCalendarDate = Array.from(calendarDate);
+    var nextCalendarDate = Array.from(calendarDateRange);
     nextCalendarDate[index] = date;
     setCalendarDateRange({
       dateRange: nextCalendarDate,
@@ -424,22 +437,6 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return next;
     });
   });
-
-  /**
-   * The callback triggered when PM/AM is switched.
-   */
-  var onToggleMeridian = useEventCallback(function (index) {
-    var nextCalendarDate = Array.from(calendarDate);
-    nextCalendarDate[index] = getReversedTimeMeridian(nextCalendarDate[index]);
-    setCalendarDate(nextCalendarDate);
-
-    // If the value already exists, update the value again.
-    if (selectedDates.length === 2) {
-      var nextSelectedDates = Array.from(selectedDates);
-      nextSelectedDates[index] = getReversedTimeMeridian(nextSelectedDates[index]);
-      setSelectedDates(nextSelectedDates);
-    }
-  });
   var handleEnter = useEventCallback(function () {
     var nextCalendarDate;
     if (value && value.length) {
@@ -449,7 +446,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       // Reset the date on the calendar to the default date
       nextCalendarDate = getSafeCalendarDate({
-        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null
+        value: defaultCalendarValue !== null && defaultCalendarValue !== void 0 ? defaultCalendarValue : null,
+        allowSameMonth: allowSameMonth
       });
     }
     setSelectedDates(value !== null && value !== void 0 ? value : []);
@@ -480,9 +478,20 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     // End unfinished selections.
     setSelectedIdle(true);
   });
+  var calculateDateRange = function calculateDateRange() {
+    var _selectedDates$ = selectedDates[0],
+      start = _selectedDates$ === void 0 ? calendarDateRange[0] : _selectedDates$,
+      _selectedDates$2 = selectedDates[1],
+      end = _selectedDates$2 === void 0 ? calendarDateRange[1] : _selectedDates$2;
+    if (onlyShowTime) {
+      return [start, end];
+    }
+    return selectedDates;
+  };
   var handleClickOK = useEventCallback(function (event) {
-    setDateRange(event, selectedDates);
-    onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
+    var nextValue = calculateDateRange();
+    setDateRange(event, nextValue);
+    onOk === null || onOk === void 0 ? void 0 : onOk(nextValue, event);
   });
   var handleClean = useEventCallback(function (event) {
     setCalendarDateRange({
@@ -540,34 +549,48 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   /**
-   * Check if the OK button is disabled
+   * Determine if the OK button should be disabled
    */
-  var isOkButtonDisabled = function isOkButtonDisabled() {
-    var start = selectedDates[0],
-      end = selectedDates[1];
-    if (!start || !end || !isSelectedIdle) {
+  var shouldDisableOkButton = function shouldDisableOkButton() {
+    var _calculateDateRange = calculateDateRange(),
+      startDate = _calculateDateRange[0],
+      endDate = _calculateDateRange[1];
+
+    // Check if start or end dates are missing
+    if (!startDate || !endDate) {
+      return true;
+    }
+
+    // Additional condition if only showing time
+    if (!onlyShowTime && !isSelectedIdle) {
       return true;
     }
-    if (isErrorValue([start, end])) {
+
+    // Check if there is any error in the selected date range
+    if (isErrorValue([startDate, endDate])) {
       return true;
     }
     return false;
   };
 
   /**
-   * Check if the shortcut button is disabled
+   * Check if a shortcut is disabled based on the selected date range
    */
-  var isShortcutDisabled = function isShortcutDisabled(value) {
-    if (value === void 0) {
-      value = [];
-    }
-    var _value = value,
-      start = _value[0],
-      end = _value[1];
-    if (!start || !end) {
+  var shouldDisableShortcut = function shouldDisableShortcut(selectedDates) {
+    if (selectedDates === void 0) {
+      selectedDates = [];
+    }
+    var _selectedDates = selectedDates,
+      startDate = _selectedDates[0],
+      endDate = _selectedDates[1];
+
+    // Disable if either start or end date is missing
+    if (!startDate || !endDate) {
       return true;
     }
-    return isRangeDisabled(start, end, TARGET.TOOLBAR_SHORTCUT);
+
+    // Check if the date range is disabled for the shortcut
+    return isRangeDisabled(startDate, endDate, TARGET.TOOLBAR_SHORTCUT);
   };
   var handleClose = useEventCallback(function () {
     var _trigger$current, _trigger$current$clos;
@@ -600,7 +623,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className = positionProps.className;
     var classes = merge(className, menuClassName, prefix('popup-daterange'));
     var panelClasses = prefix('daterange-panel', {
-      'daterange-panel-show-one-calendar': showOneCalendar
+      'daterange-panel-show-one-calendar': showOneCalendar,
+      'daterange-panel-only-time': onlyShowTime
     });
 
     /**
@@ -608,7 +632,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
      * @see https://github.com/rsuite/rsuite/issues/3522
      */
     var panelStyles = {
-      minWidth: showOneCalendar ? 'auto' : 528
+      minWidth: showOneCalendar || onlyShowTime ? 'auto' : 528
     };
     var styles = _extends({}, menuStyle, {
       left: left,
@@ -619,8 +643,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       isoWeek: isoWeek,
       weekStart: weekStart,
       limitEndYear: limitEndYear,
-      showMeridian: showMeridian,
-      calendarDate: calendarDate,
+      showMeridiem: showMeridiem,
+      calendarDateRange: calendarDateRange,
       limitStartYear: limitStartYear,
       showWeekNumbers: showWeekNumbers,
       format: formatStr,
@@ -630,11 +654,13 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hideHours: hideHours,
       hideMinutes: hideMinutes,
       hideSeconds: hideSeconds,
+      disabledHours: shouldDisableHour,
+      disabledMinutes: shouldDisableMinute,
+      disabledSeconds: shouldDisableSecond,
       disabledDate: disableCalendarDate,
       onSelect: handleSelectDate,
       onChangeCalendarMonth: onChangeCalendarMonth,
       onChangeCalendarTime: onChangeCalendarTime,
-      onToggleMeridian: onToggleMeridian,
       onMouseMove: onMouseMove,
       renderTitle: renderTitle
     };
@@ -674,9 +700,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       spacing: 0,
       className: prefix('daterange-predefined'),
       ranges: sideRanges,
-      calendarDate: calendarDate,
+      calendarDate: calendarDateRange,
       locale: locale,
-      disableShortcut: isShortcutDisabled,
+      disableShortcut: shouldDisableShortcut,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement("div", {
@@ -690,15 +716,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onSelect: setActiveCalendarKey
     }), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
-    }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {
+    }, /*#__PURE__*/React.createElement(DateRangePickerProvider, {
       value: {
         isSelectedIdle: isSelectedIdle
       }
     }, getCalendars()))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       calendarDate: selectedDates,
-      disableOkBtn: isOkButtonDisabled,
-      disableShortcut: isShortcutDisabled,
+      disableOkBtn: shouldDisableOkButton,
+      disableShortcut: shouldDisableShortcut,
       hideOkBtn: oneTap,
       onOk: handleClickOK,
       onShortcutClick: handleShortcutPageDate,
@@ -719,8 +745,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (caretAsProp === null) {
       return null;
     }
-    return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
-  }, [caretAsProp, formatStr]);
+    return caretAsProp || (onlyShowTime ? TimeIcon : IconCalendar);
+  }, [caretAsProp, onlyShowTime]);
   var isErrorValue = function isErrorValue(value) {
     if (!value) {
       return false;
@@ -838,7 +864,7 @@ DateRangePicker.propTypes = _extends({}, pickerPropTypes, {
   shouldDisableDate: PropTypes.func,
   onSelect: PropTypes.func,
   showWeekNumbers: PropTypes.bool,
-  showMeridian: PropTypes.bool,
+  showMeridiem: PropTypes.bool,
   showOneCalendar: PropTypes.bool
 });
 export default DateRangePicker;

package/esm/DateRangePicker/DateRangePickerProvider.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface DateRangePickerContextValue {
+    /**
+     * Whether to complete the selection.
+     */
+    isSelectedIdle?: boolean;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextValue>;
+export declare const useDateRangePickerContext: () => DateRangePickerContextValue;
+export declare const DateRangePickerProvider: React.Provider<DateRangePickerContextValue>;

package/esm/DateRangePicker/{DateRangePickerContext.js → DateRangePickerProvider.js}

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

package/esm/DateRangePicker/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useDateRangePicker } from './useDateRangePicker';
+export { useDateDisabled } from './useDateDisabled';
+export { useCalendarHandlers } from './useCalendarHandlers';

package/esm/DateRangePicker/hooks/index.js

@@ -0,0 +1,4 @@
+'use client';
+export { useDateRangePicker } from "./useDateRangePicker.js";
+export { useDateDisabled } from "./useDateDisabled.js";
+export { useCalendarHandlers } from "./useCalendarHandlers.js";