rsuite 5.59.1 → 5.59.3-alpha.1

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;

package/cjs/DatePicker/types.d.ts

@@ -9,3 +9,40 @@ export interface RangeType<T> {
 export interface InnerRange<T> extends Omit<RangeType<T>, 'value'> {
     value: T;
 }
+export interface DeprecatedProps {
+    /**
+     * Display date panel when component initial
+     *
+     * @deprecated use <Calendar> instead
+     **/
+    inline?: boolean;
+    /**
+     * Whether to disable a date on the calendar view
+     *
+     * @returns date should be disabled (not selectable)
+     * @deprecated Use {@link shouldDisableDate} instead
+     */
+    disabledDate?: (date?: Date) => boolean;
+    /**
+     * Disabled hours
+     *
+     * @deprecated Use {@link shouldDisableHour} instead
+     */
+    disabledHours?: (hour: number, date: Date) => boolean;
+    /**
+     * Disabled minutes
+     *
+     * @deprecated Use {@link shouldDisableMinute} instead
+     */
+    disabledMinutes?: (minute: number, date: Date) => boolean;
+    /**
+     * Disabled seconds
+     *
+     * @deprecated Use {@link shouldDisableSecond} instead
+     */
+    disabledSeconds?: (second: number, date: Date) => boolean;
+    /**
+     * @deprecated
+     */
+    renderValue?: (value: Date, format: string) => string;
+}

package/cjs/DatePicker/utils.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="lodash" />
+import PropTypes from 'prop-types';
 import { ToolbarProps } from './Toolbar';
 import { InnerRange, RangeType } from './types';
 import { DateRange } from '../DateRangePicker/types';
@@ -12,3 +14,10 @@ export declare function splitRanges(ranges?: RangeType<Date>[]): {
     sideRanges: RangeType<Date>[];
     bottomRanges: RangeType<Date>[];
 };
+export declare const deprecatedPropTypes: {
+    disabledDate: PropTypes.Requireable<(...args: any[]) => any>;
+    disabledHours: PropTypes.Requireable<(...args: any[]) => any>;
+    disabledMinutes: PropTypes.Requireable<(...args: any[]) => any>;
+    disabledSeconds: PropTypes.Requireable<(...args: any[]) => any>;
+};
+export declare const getRestProps: (props: any, omitProps?: string[]) => import("lodash").Omit<any, string>;

package/cjs/DatePicker/utils.js

@@ -5,9 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.getDefaultRanges = getDefaultRanges;
 exports.splitRanges = splitRanges;
-exports.getRanges = void 0;
+exports.getRestProps = exports.deprecatedPropTypes = exports.getRanges = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+var _propTypes2 = require("../internals/propTypes");
+var _Picker = require("../internals/Picker");
 var _dateUtils = require("../utils/dateUtils");
 function getDefaultRanges(value) {
   var today = new Date();
@@ -74,4 +78,18 @@ function splitRanges(ranges) {
     sideRanges: sideRanges,
     bottomRanges: bottomRanges
   };
-}
+}
+var deprecatedPropTypes = {
+  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.')
+};
+exports.deprecatedPropTypes = deprecatedPropTypes;
+var getRestProps = function getRestProps(props, omitProps) {
+  if (omitProps === void 0) {
+    omitProps = [];
+  }
+  return (0, _omit.default)(props, [].concat(_Picker.omitTriggerPropKeys, _dateUtils.calendarOnlyProps, omitProps));
+};
+exports.getRestProps = getRestProps;

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -8,9 +8,17 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
     caretAs?: React.ElementType | null;
     /** Predefined date ranges */
     ranges?: RangeType[];
-    /** Format date */
+    /**
+     * Format of the date displayed in the input box
+     *
+     * @default 'yyyy-MM-dd'
+     */
     format?: string;
-    /** Rendered as an input, the date can be entered via the keyboard */
+    /**
+     * Rendered as an input, the date can be entered via the keyboard.
+     *
+     * @default true
+     */
     editable?: boolean;
     /** The date range that will be selected when you click on the date */
     hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
@@ -24,7 +32,11 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
     isoWeek?: boolean;
     /** A label displayed at the beginning of toggle button */
     label?: React.ReactNode;
-    /** Set the upper limit of the available year relative to the current selection date */
+    /**
+     * Set the upper limit of the available year relative to the current selection date.
+     *
+     * @default 1000
+     */
     limitEndYear?: number;
     /** Set the lower limit of the available year relative to the current selection date */
     limitStartYear?: number;

package/cjs/DateRangePicker/DateRangePicker.js

@@ -16,7 +16,6 @@ var _pick = _interopRequireDefault(require("lodash/pick"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
-var _CustomProvider = require("../CustomProvider");
 var _Toolbar = _interopRequireDefault(require("../DatePicker/Toolbar"));
 var _PredefinedRanges = _interopRequireDefault(require("../DatePicker/PredefinedRanges"));
 var _Stack = _interopRequireDefault(require("../Stack"));
@@ -24,12 +23,12 @@ var _Picker = require("../internals/Picker");
 var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Calendar2 = _interopRequireDefault(require("./Calendar"));
-var disabledDateUtils = _interopRequireWildcard(require("./disabledDateUtils"));
 var _utils2 = require("./utils");
 var _propTypes2 = require("../internals/propTypes");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
+var _Header = _interopRequireDefault(require("./Header"));
 var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -150,7 +149,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = (0, _react.useRef)(null);
-
+  var _useState5 = (0, _react.useState)(),
+    activeCalendarKey = _useState5[0],
+    setActiveCalendarKey = _useState5[1];
   /**
    * Get the time on the calendar.
    */
@@ -200,22 +201,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
-  var getDateRangeString = function getDateRangeString(nextValue) {
-    var _ref4 = nextValue !== null && nextValue !== void 0 ? nextValue : [null, null],
-      startDate = _ref4[0],
-      endDate = _ref4[1];
-    if (startDate && endDate) {
-      var displayValue = [startDate, endDate].sort(_dateUtils.compareAsc);
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
-        date: displayValue[0],
-        formatStr: formatStr
-      }), character, /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
-        date: displayValue[1],
-        formatStr: formatStr
-      }));
-    }
-    return rangeFormatStr;
-  };
   var getInputHtmlSize = function getInputHtmlSize() {
     var padding = 4;
     var strings = rangeFormatStr;
@@ -274,7 +259,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
    */
-  var handleMouseMove = (0, _utils.useEventCallback)(function (date) {
+  var onMouseMove = (0, _utils.useEventCallback)(function (date) {
     var nextHoverDateRange = getHoverRangeValue(date);
 
     // If hasDoneSelect is false,
@@ -310,9 +295,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var noHoverRangeValid = (0, _isNil.default)(hoverRangeValue);
 
     // in `oneTap` mode
-    if (isSelectedIdle && oneTap) {
+    if (oneTap) {
       setDateRange(event, noHoverRangeValid ? [(0, _dateUtils.startOfDay)(date), (0, _dateUtils.endOfDay)(date)] : hoverRangeValue);
-      setSelectedIdle(false);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
       return;
     }
 
@@ -372,7 +357,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var handleSingleCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {
+  var onChangeCalendarMonth = (0, _utils.useEventCallback)(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
@@ -382,7 +367,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       eventName: 'changeMonth'
     });
   });
-  var handleSingleCalendarTime = (0, _utils.useEventCallback)(function (index, date) {
+  var onChangeCalendarTime = (0, _utils.useEventCallback)(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
@@ -406,7 +391,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var handleToggleMeridian = (0, _utils.useEventCallback)(function (index) {
+  var onToggleMeridian = (0, _utils.useEventCallback)(function (index) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = (0, _dateUtils.getReversedTimeMeridian)(nextCalendarDate[index]);
     setCalendarDate(nextCalendarDate);
@@ -500,7 +485,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     return false;
   };
-  var disabledByBetween = function disabledByBetween(start, end, type) {
+  var disableByBetween = function disableByBetween(start, end, type) {
     // If the date is between the start and the end
     // the button is disabled
     while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
@@ -515,15 +500,15 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     return false;
   };
-  var disabledOkButton = function disabledOkButton() {
+  var disableOkButton = function disableOkButton() {
     var start = selectedDates[0],
       end = selectedDates[1];
     if (!start || !end || !isSelectedIdle) {
       return true;
     }
-    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
+    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
   };
-  var disabledShortcutButton = function disabledShortcutButton(value) {
+  var disableShortcut = function disableShortcut(value) {
     if (value === void 0) {
       value = [];
     }
@@ -533,7 +518,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!start || !end) {
       return true;
     }
-    return disabledByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   };
   var handleClose = (0, _utils.useEventCallback)(function () {
     var _trigger$current, _trigger$current$clos;
@@ -544,8 +529,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       esc: handleClose,
       enter: function enter() {
         var _trigger$current2;
-        var _ref5 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
-          open = _ref5.open;
+        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
+          open = _ref4.open;
         if (!open) {
           var _trigger$current3;
           (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
@@ -573,31 +558,44 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
+    var disabledDate = function disabledDate(date, values, type) {
+      return isDateDisabled(date, {
+        selectDate: values,
+        selectedDone: isSelectedIdle,
+        target: type
+      });
+    };
     var calendarProps = {
-      calendarDate: calendarDate,
-      disabledDate: function disabledDate(date, values, type) {
-        return isDateDisabled(date, {
-          selectDate: values,
-          selectedDone: isSelectedIdle,
-          target: type
-        });
-      },
-      format: formatStr,
-      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
+      locale: locale,
       isoWeek: isoWeek,
       limitEndYear: limitEndYear,
+      showMeridian: showMeridian,
+      calendarDate: calendarDate,
       limitStartYear: limitStartYear,
-      locale: locale,
       showWeekNumbers: showWeekNumbers,
+      format: formatStr,
       value: selectedDates,
-      showMeridian: showMeridian,
-      onChangeCalendarMonth: handleSingleCalendarMonth,
-      onChangeCalendarTime: handleSingleCalendarTime,
-      onMouseMove: handleMouseMove,
+      hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
       onSelect: handleSelectDate,
-      onToggleMeridian: handleToggleMeridian,
+      onChangeCalendarMonth: onChangeCalendarMonth,
+      onChangeCalendarTime: onChangeCalendarTime,
+      onToggleMeridian: onToggleMeridian,
+      onMouseMove: onMouseMove,
+      disabledDate: disabledDate,
       renderTitle: renderTitle
     };
+    var getCalendars = function getCalendars() {
+      if (showOneCalendar) {
+        return /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
+          index: activeCalendarKey === 'end' ? 1 : 0
+        }, calendarProps));
+      }
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
+        index: 0
+      }, calendarProps)), /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
+        index: 1
+      }, calendarProps)));
+    };
     var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
       return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
     })) || [];
@@ -624,29 +622,29 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
-      disabledShortcut: disabledShortcutButton,
+      disableShortcut: disableShortcut,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/_react.default.createElement(_Stack.default.Item, null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
-    }, showHeader && /*#__PURE__*/_react.default.createElement("div", {
-      className: prefix('daterange-header'),
-      "data-testid": "daterange-header"
-    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/_react.default.createElement("div", {
+    }, showHeader && /*#__PURE__*/_react.default.createElement(_Header.default, {
+      value: isSelectedIdle ? selectedDates : hoverDateRange,
+      formatStr: formatStr,
+      character: character,
+      clickable: showOneCalendar,
+      activeKey: activeCalendarKey,
+      onSelect: setActiveCalendarKey
+    }), /*#__PURE__*/_react.default.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/_react.default.createElement(_DateRangePickerContext.default.Provider, {
       value: {
         isSelectedIdle: isSelectedIdle
       }
-    }, /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
-      index: 0
-    }, calendarProps)), !showOneCalendar && /*#__PURE__*/_react.default.createElement(_Calendar2.default, (0, _extends2.default)({
-      index: 1
-    }, calendarProps))))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    }, getCalendars()))), /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       calendarDate: selectedDates,
-      disabledOkBtn: disabledOkButton,
-      disabledShortcut: disabledShortcutButton,
+      disableOkBtn: disableOkButton,
+      disableShortcut: disableShortcut,
       hideOkBtn: oneTap,
       onOk: handleOK,
       onShortcutClick: handleShortcutPageDate,
@@ -751,14 +749,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     showCleanButton: showCleanButton
   }))));
 });
-DateRangePicker.after = disabledDateUtils.after;
-DateRangePicker.afterToday = disabledDateUtils.afterToday;
-DateRangePicker.allowedDays = disabledDateUtils.allowedDays;
-DateRangePicker.allowedMaxDays = disabledDateUtils.allowedMaxDays;
-DateRangePicker.allowedRange = disabledDateUtils.allowedRange;
-DateRangePicker.before = disabledDateUtils.before;
-DateRangePicker.beforeToday = disabledDateUtils.beforeToday;
-DateRangePicker.combine = disabledDateUtils.combine;
 DateRangePicker.displayName = 'DateRangePicker';
 DateRangePicker.propTypes = (0, _extends2.default)({}, _Picker.pickerPropTypes, {
   ranges: _propTypes.default.array,

package/cjs/DateRangePicker/DateRangePickerContext.d.ts

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

package/cjs/DateRangePicker/DateRangePickerContext.js

@@ -3,12 +3,12 @@
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
-exports.useDateRangePickerContext = exports.default = void 0;
+exports.default = exports.useDateRangePickerContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var DateRangePickerContext = /*#__PURE__*/_react.default.createContext({});
-var _default = DateRangePickerContext;
-exports.default = _default;
 var useDateRangePickerContext = function useDateRangePickerContext() {
   return (0, _react.useContext)(DateRangePickerContext) || {};
 };
-exports.useDateRangePickerContext = useDateRangePickerContext;
+exports.useDateRangePickerContext = useDateRangePickerContext;
+var _default = DateRangePickerContext;
+exports.default = _default;

package/cjs/DateRangePicker/Header.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface HeaderProps {
+    formatStr: string;
+    character: string;
+    value: Date[] | null;
+    activeKey?: 'start' | 'end';
+    onSelect?: (eventKey: 'start' | 'end') => void;
+    clickable?: boolean;
+}
+declare function Header(props: HeaderProps): JSX.Element;
+export default Header;