rsuite 5.59.1 → 5.59.3-alpha.1

package/esm/DatePicker/hooks/useFocus.js

@@ -0,0 +1,90 @@
+'use client';
+import delay from 'lodash/delay';
+import addMonths from 'date-fns/addMonths';
+import addDays from 'date-fns/addDays';
+import useEventCallback from '../../utils/useEventCallback';
+import { getAriaLabel } from '../../Calendar/utils';
+import { useCustom } from '../../utils';
+import { onMenuKeyDown } from '../../internals/Picker/utils';
+function useFocus(props) {
+  var target = props.target,
+    showMonth = props.showMonth,
+    id = props.id,
+    localeProp = props.locale;
+  var _useCustom = 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 = getAriaLabel(date, formatStr, formatDate);
+    var container = getOverlayContainer();
+    var dateElement = container === null || container === void 0 ? void 0 : container.querySelector("[aria-label=\"" + ariaLabel + "\"]");
+    if ((dateElement === null || dateElement === void 0 ? void 0 : dateElement.getAttribute('aria-disabled')) === 'true') {
+      return false;
+    }
+    return true;
+  };
+
+  /**
+   * Focus on the currently selected date element
+   */
+  var focusSelectedDate = function focusSelectedDate() {
+    delay(function () {
+      var container = getOverlayContainer();
+      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected="true"]');
+      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();
+    }, 1);
+  };
+
+  /**
+   * Focus on the input element
+   */
+  var focusInput = useEventCallback(function () {
+    delay(function () {
+      var _target$current;
+      return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+    }, 1);
+  });
+  var onKeyFocusEvent = useEventCallback(function (event, options) {
+    var date = options.date,
+      callback = options.callback;
+    var delta = 0;
+    var step = showMonth ? 6 : 7;
+    var changeDateFunc = showMonth ? addMonths : addDays;
+    onMenuKeyDown(event, {
+      down: function down() {
+        delta = step;
+      },
+      up: function up() {
+        delta = -step;
+      },
+      right: function right() {
+        delta = 1;
+      },
+      left: function left() {
+        delta = -1;
+      }
+    });
+    var nextDate = changeDateFunc(date, delta);
+    if (checkFocusable(nextDate)) {
+      callback(nextDate);
+      focusSelectedDate();
+    }
+  });
+  return {
+    focusInput: focusInput,
+    focusSelectedDate: focusSelectedDate,
+    onKeyFocusEvent: onKeyFocusEvent
+  };
+}
+export default useFocus;

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

@@ -0,0 +1,22 @@
+'use client';
+import { useState } from 'react';
+import useEventCallback from '../../utils/useEventCallback';
+function useMonthView(props) {
+  var onToggleMonthDropdown = props.onToggleMonthDropdown;
+  var _useState = useState(false),
+    monthView = _useState[0],
+    setMonthView = _useState[1];
+  /**
+   * The callback triggered after the month selection box is opened or closed.
+   */
+  var toggleMonthView = useEventCallback(function (show) {
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(show);
+    setMonthView(show);
+  });
+  return {
+    monthView: monthView,
+    setMonthView: setMonthView,
+    toggleMonthView: toggleMonthView
+  };
+}
+export default useMonthView;

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

@@ -1,7 +1,11 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import { subDays, startOfDay, endOfDay } from '../utils/dateUtils';
+import PropTypes from 'prop-types';
+import omit from 'lodash/omit';
+import { deprecatePropTypeNew } from '../internals/propTypes';
+import { omitTriggerPropKeys } from '../internals/Picker';
+import { subDays, startOfDay, endOfDay, calendarOnlyProps } from '../utils/dateUtils';
 export function getDefaultRanges(value) {
   var today = new Date();
 
@@ -66,4 +70,16 @@ export function splitRanges(ranges) {
     sideRanges: sideRanges,
     bottomRanges: bottomRanges
   };
-}
+}
+export var deprecatedPropTypes = {
+  disabledDate: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableDate" property instead.'),
+  disabledHours: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableHour" property instead.'),
+  disabledMinutes: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableMinute" property instead.'),
+  disabledSeconds: deprecatePropTypeNew(PropTypes.func, 'Use "shouldDisableSecond" property instead.')
+};
+export var getRestProps = function getRestProps(props, omitProps) {
+  if (omitProps === void 0) {
+    omitProps = [];
+  }
+  return omit(props, [].concat(omitTriggerPropKeys, calendarOnlyProps, omitProps));
+};

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

@@ -11,20 +11,19 @@ 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 { FormattedDate } from '../CustomProvider';
 import Toolbar from '../DatePicker/Toolbar';
 import PredefinedRanges from '../DatePicker/PredefinedRanges';
 import Stack from '../Stack';
 import { omitTriggerPropKeys, PickerPopup, pickerPropTypes, PickerToggleTrigger, PickerIndicator, PickerLabel, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
-import { createChainedFunction, DATERANGE_DISABLED_TARGET, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps, getStringLength } from '../utils';
-import { addMonths, compareAsc, isValid, isBefore, isSameDay, addDays, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, isSameMonth, shouldRenderMonth, shouldRenderDate, reverseDateRangeOmitTime, getReversedTimeMeridian, calendarOnlyProps, shouldOnlyRenderTime } from '../utils/dateUtils';
+import { createChainedFunction, DATERANGE_DISABLED_TARGET as TARGET, mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps, getStringLength } from '../utils';
+import { addMonths, isValid, isBefore, isSameDay, addDays, startOfDay, endOfDay, shouldRenderTime, isAfter, copyTime, isSameMonth, shouldRenderMonth, shouldRenderDate, reverseDateRangeOmitTime, getReversedTimeMeridian, calendarOnlyProps, shouldOnlyRenderTime } from '../utils/dateUtils';
 import Calendar from './Calendar';
-import * as disabledDateUtils from './disabledDateUtils';
 import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange } from './utils';
 import { deprecatePropTypeNew, oneOf } from '../internals/propTypes';
 import DateRangePickerContext from './DateRangePickerContext';
 import DateRangeInput from '../DateRangeInput';
 import InputGroup from '../InputGroup';
+import Header from './Header';
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -144,7 +143,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = useRef(null);
-
+  var _useState5 = useState(),
+    activeCalendarKey = _useState5[0],
+    setActiveCalendarKey = _useState5[1];
   /**
    * Get the time on the calendar.
    */
@@ -194,22 +195,6 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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(compareAsc);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FormattedDate, {
-        date: displayValue[0],
-        formatStr: formatStr
-      }), character, /*#__PURE__*/React.createElement(FormattedDate, {
-        date: displayValue[1],
-        formatStr: formatStr
-      }));
-    }
-    return rangeFormatStr;
-  };
   var getInputHtmlSize = function getInputHtmlSize() {
     var padding = 4;
     var strings = rangeFormatStr;
@@ -268,7 +253,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * 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 = useEventCallback(function (date) {
+  var onMouseMove = useEventCallback(function (date) {
     var nextHoverDateRange = getHoverRangeValue(date);
 
     // If hasDoneSelect is false,
@@ -304,9 +289,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var noHoverRangeValid = isNil(hoverRangeValue);
 
     // in `oneTap` mode
-    if (isSelectedIdle && oneTap) {
+    if (oneTap) {
       setDateRange(event, noHoverRangeValid ? [startOfDay(date), endOfDay(date)] : hoverRangeValue);
-      setSelectedIdle(false);
+      onSelect === null || onSelect === void 0 ? void 0 : onSelect(date, event);
       return;
     }
 
@@ -366,7 +351,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var doneSelected = selectValueLength === 0 || selectValueLength === 2;
     doneSelected && setHoverDateRange(null);
   }, [selectedDates]);
-  var handleSingleCalendarMonth = useEventCallback(function (index, date) {
+  var onChangeCalendarMonth = useEventCallback(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
@@ -376,7 +361,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       eventName: 'changeMonth'
     });
   });
-  var handleSingleCalendarTime = useEventCallback(function (index, date) {
+  var onChangeCalendarTime = useEventCallback(function (index, date) {
     var calendarKey = index === 0 ? 'start' : 'end';
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = date;
@@ -400,7 +385,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * The callback triggered when PM/AM is switched.
    */
-  var handleToggleMeridian = useEventCallback(function (index) {
+  var onToggleMeridian = useEventCallback(function (index) {
     var nextCalendarDate = Array.from(calendarDate);
     nextCalendarDate[index] = getReversedTimeMeridian(nextCalendarDate[index]);
     setCalendarDate(nextCalendarDate);
@@ -494,7 +479,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     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 (isBefore(start, end) || isSameDay(start, end)) {
@@ -509,15 +494,15 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     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, DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
+    return disableByBetween(start, end, TARGET.TOOLBAR_BUTTON_OK);
   };
-  var disabledShortcutButton = function disabledShortcutButton(value) {
+  var disableShortcut = function disableShortcut(value) {
     if (value === void 0) {
       value = [];
     }
@@ -527,7 +512,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!start || !end) {
       return true;
     }
-    return disabledByBetween(start, end, DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return disableByBetween(start, end, TARGET.TOOLBAR_SHORTCUT);
   };
   var handleClose = useEventCallback(function () {
     var _trigger$current, _trigger$current$clos;
@@ -538,8 +523,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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();
@@ -567,31 +552,44 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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.createElement(Calendar, _extends({
+          index: activeCalendarKey === 'end' ? 1 : 0
+        }, calendarProps));
+      }
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Calendar, _extends({
+        index: 0
+      }, calendarProps)), /*#__PURE__*/React.createElement(Calendar, _extends({
+        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';
     })) || [];
@@ -618,29 +616,29 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
-      disabledShortcut: disabledShortcutButton,
+      disableShortcut: disableShortcut,
       onShortcutClick: handleShortcutPageDate,
       "data-testid": "daterange-predefined-side"
     }), /*#__PURE__*/React.createElement(Stack.Item, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
-    }, showHeader && /*#__PURE__*/React.createElement("div", {
-      className: prefix('daterange-header'),
-      "data-testid": "daterange-header"
-    }, getDateRangeString(isSelectedIdle ? selectedDates : hoverDateRange)), /*#__PURE__*/React.createElement("div", {
+    }, showHeader && /*#__PURE__*/React.createElement(Header, {
+      value: isSelectedIdle ? selectedDates : hoverDateRange,
+      formatStr: formatStr,
+      character: character,
+      clickable: showOneCalendar,
+      activeKey: activeCalendarKey,
+      onSelect: setActiveCalendarKey
+    }), /*#__PURE__*/React.createElement("div", {
       className: prefix("daterange-calendar-" + (showOneCalendar ? 'single' : 'group'))
     }, /*#__PURE__*/React.createElement(DateRangePickerContext.Provider, {
       value: {
         isSelectedIdle: isSelectedIdle
       }
-    }, /*#__PURE__*/React.createElement(Calendar, _extends({
-      index: 0
-    }, calendarProps)), !showOneCalendar && /*#__PURE__*/React.createElement(Calendar, _extends({
-      index: 1
-    }, calendarProps))))), /*#__PURE__*/React.createElement(Toolbar, {
+    }, getCalendars()))), /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       calendarDate: selectedDates,
-      disabledOkBtn: disabledOkButton,
-      disabledShortcut: disabledShortcutButton,
+      disableOkBtn: disableOkButton,
+      disableShortcut: disableShortcut,
       hideOkBtn: oneTap,
       onOk: handleOK,
       onShortcutClick: handleShortcutPageDate,
@@ -683,7 +681,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var disabledOptions = {
       selectDate: value,
       selectedDone: isSelectedIdle,
-      target: DATERANGE_DISABLED_TARGET.INPUT
+      target: TARGET.INPUT
     };
     if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {
       return true;
@@ -745,14 +743,6 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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 = _extends({}, pickerPropTypes, {
   ranges: PropTypes.array,

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

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

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

package/esm/DateRangePicker/Header.js

@@ -0,0 +1,59 @@
+'use client';
+import React from 'react';
+import { useClassNames } from '../utils';
+import { compareAsc } from '../utils/dateUtils';
+import { FormattedDate } from '../CustomProvider';
+import Button from '../Button';
+function Header(props) {
+  var _prefix;
+  var _useClassNames = useClassNames('picker'),
+    prefix = _useClassNames.prefix;
+  var formatStr = props.formatStr,
+    character = props.character,
+    value = props.value,
+    _props$activeKey = props.activeKey,
+    activeKey = _props$activeKey === void 0 ? 'start' : _props$activeKey,
+    clickable = props.clickable,
+    onSelect = props.onSelect;
+  var _ref = value !== null && value !== void 0 ? value : [null, null],
+    startDate = _ref[0],
+    endDate = _ref[1];
+  var v = startDate && endDate ? [startDate, endDate].sort(compareAsc) : [startDate, endDate];
+  var start = v[0] ? /*#__PURE__*/React.createElement(FormattedDate, {
+    date: v[0],
+    formatStr: formatStr
+  }) : formatStr;
+  var end = v[1] ? /*#__PURE__*/React.createElement(FormattedDate, {
+    date: v[1],
+    formatStr: formatStr
+  }) : formatStr;
+  return /*#__PURE__*/React.createElement("div", {
+    className: prefix('daterange-header', (_prefix = {}, _prefix["tab-active-" + activeKey] = clickable, _prefix)),
+    "data-testid": "daterange-header"
+  }, clickable ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    size: "xs",
+    appearance: "subtle",
+    className: prefix('header-date'),
+    onClick: function onClick() {
+      return onSelect === null || onSelect === void 0 ? void 0 : onSelect('start');
+    },
+    "aria-label": "Select start date"
+  }, start), /*#__PURE__*/React.createElement("span", {
+    className: prefix('header-character')
+  }, character), /*#__PURE__*/React.createElement(Button, {
+    size: "xs",
+    appearance: "subtle",
+    className: prefix('header-date'),
+    onClick: function onClick() {
+      return onSelect === null || onSelect === void 0 ? void 0 : onSelect('end');
+    },
+    "aria-label": "Select end date"
+  }, end)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: prefix('header-date')
+  }, start), /*#__PURE__*/React.createElement("span", {
+    className: prefix('header-character')
+  }, character), /*#__PURE__*/React.createElement("span", {
+    className: prefix('header-date')
+  }, end)));
+}
+export default Header;

package/esm/DateRangePicker/disabledDateUtils.d.ts

@@ -4,7 +4,7 @@ import { DisabledDateFunction } from './types';
  */
 export declare function allowedMaxDays(days: number): DisabledDateFunction;
 /**
- Only allowed days are specified, other dates are disabled.
+ * Only allowed days are specified, other dates are disabled.
  */
 export declare function allowedDays(days: number): DisabledDateFunction;
 /**

package/esm/DateRangePicker/disabledDateUtils.js

@@ -35,7 +35,7 @@ export function allowedMaxDays(days) {
 }
 
 /**
- Only allowed days are specified, other dates are disabled.
+ * Only allowed days are specified, other dates are disabled.
  */
 export function allowedDays(days) {
   return function (date, selectValue, selectedDone, target) {

package/esm/DateRangePicker/index.js

@@ -1,3 +1,7 @@
 'use client';
 import DateRangePicker from './DateRangePicker';
+import * as utils from './disabledDateUtils';
+Object.keys(utils).forEach(function (key) {
+  DateRangePicker[key] = utils[key];
+});
 export default DateRangePicker;