rsuite 5.68.1 → 5.69.0

package/esm/Calendar/Calendar.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import CalendarContainer from './CalendarContainer';
-import { CalendarLocale } from '../locales';
-import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
+import type { CalendarLocale } from '../locales';
+import type { RsRefForwardingComponent, WithAsProps } from '../internals/types';
+import type { MonthDropdownProps } from './CalendarContext';
 export interface CalendarProps extends WithAsProps {
     /**
      * Controlled value
@@ -38,6 +39,10 @@ export interface CalendarProps extends WithAsProps {
      * @default 0
      */
     weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * The props for the Month Dropdown component.
+     */
+    monthDropdownProps?: MonthDropdownProps;
     /**
      * Callback fired before the value changed
      */

package/esm/Calendar/Calendar.js

@@ -6,10 +6,10 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import isSameMonth from 'date-fns/isSameMonth';
 import CalendarContainer from "./CalendarContainer.js";
+import useCalendarDate from "./useCalendarDate.js";
 import Button from "../Button/index.js";
 import { FormattedDate } from "../CustomProvider/index.js";
 import { useClassNames, useCustom } from "../internals/hooks/index.js";
-import useCalendarDate from "./useCalendarDate.js";
 /**
  * The Calendar component is used to select dates.
  * @see https://rsuitejs.com/components/calendar

package/esm/Calendar/CalendarContainer.d.ts

@@ -2,6 +2,7 @@ import React, { HTMLAttributes } from 'react';
 import { CalendarHeaderProps } from './CalendarHeader';
 import { RsRefForwardingComponent, WithAsProps } from '../internals/types';
 import { CalendarLocale } from '../locales';
+import { MonthDropdownProps } from './CalendarContext';
 import { CalendarState } from './useCalendarState';
 export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
     /**
@@ -91,6 +92,10 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
      * @see https://rsuitejs.com/guide/i18n/#calendar
      */
     locale: CalendarLocale;
+    /**
+     * The props for the Month Dropdown component.
+     */
+    monthDropdownProps?: MonthDropdownProps;
     /**
      * Callback after the date has changed
      */

package/esm/Calendar/CalendarContainer.js

@@ -1,9 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix", "dateRange", "disabledBackward", "defaultState", "disabledDate", "disabledForward", "format", "hoverRangeValue", "isoWeek", "weekStart", "targetId", "limitEndYear", "limitStartYear", "locale", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "calendarDate", "cellClassName", "renderCell", "renderCellOnPicker", "renderTitle", "renderToolbar", "showMeridian", "showWeekNumbers", "inline"];
+var _excluded = ["as", "className", "classPrefix", "calendarDate", "dateRange", "disabledBackward", "defaultState", "disabledForward", "format", "hoverRangeValue", "inline", "isoWeek", "weekStart", "targetId", "limitEndYear", "limitStartYear", "locale", "monthDropdownProps", "showMeridian", "showWeekNumbers", "cellClassName", "disabledDate", "onChangeMonth", "onChangeTime", "onMouseMove", "onMoveBackward", "onMoveForward", "onSelect", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "renderCell", "renderCellOnPicker", "renderTitle", "renderToolbar"];
 import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import MonthDropdown from "./MonthDropdown.js";
 import TimeDropdown from "./TimeDropdown.js";
@@ -20,13 +19,14 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className = props.className,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
+    calendarDateProp = props.calendarDate,
     dateRange = props.dateRange,
     disabledBackward = props.disabledBackward,
     defaultState = props.defaultState,
-    disabledDate = props.disabledDate,
     disabledForward = props.disabledForward,
     format = props.format,
     hoverRangeValue = props.hoverRangeValue,
+    inline = props.inline,
     _props$isoWeek = props.isoWeek,
     isoWeek = _props$isoWeek === void 0 ? false : _props$isoWeek,
     _props$weekStart = props.weekStart,
@@ -35,6 +35,11 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     limitEndYear = props.limitEndYear,
     limitStartYear = props.limitStartYear,
     locale = props.locale,
+    monthDropdownProps = props.monthDropdownProps,
+    showMeridian = props.showMeridian,
+    showWeekNumbers = props.showWeekNumbers,
+    cellClassName = props.cellClassName,
+    disabledDate = props.disabledDate,
     onChangeMonth = props.onChangeMonth,
     onChangeTime = props.onChangeTime,
     onMouseMove = props.onMouseMove,
@@ -44,15 +49,10 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleMeridian = props.onToggleMeridian,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    calendarDateProp = props.calendarDate,
-    cellClassName = props.cellClassName,
     renderCell = props.renderCell,
     renderCellOnPicker = props.renderCellOnPicker,
     renderTitle = props.renderTitle,
     renderToolbar = props.renderToolbar,
-    showMeridian = props.showMeridian,
-    showWeekNumbers = props.showWeekNumbers,
-    inline = props.inline,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
@@ -125,23 +125,24 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var contextValue = {
     date: calendarDate,
     dateRange: dateRange,
-    disabledDate: isDateDisabled,
     format: format,
     hoverRangeValue: hoverRangeValue,
-    inSameMonth: inSameThisMonthDate,
+    inline: inline,
     isoWeek: isoWeek,
     weekStart: weekStart,
     targetId: targetId,
     locale: locale,
+    showWeekNumbers: showWeekNumbers,
+    monthDropdownProps: monthDropdownProps,
+    cellClassName: cellClassName,
+    disabledDate: isDateDisabled,
+    inSameMonth: inSameThisMonthDate,
     onChangeMonth: handleChangeMonth,
     onChangeTime: onChangeTime,
     onMouseMove: onMouseMove,
     onSelect: onSelect,
-    cellClassName: cellClassName,
     renderCell: renderCell,
-    renderCellOnPicker: renderCellOnPicker,
-    showWeekNumbers: showWeekNumbers,
-    inline: inline
+    renderCellOnPicker: renderCellOnPicker
   };
   return /*#__PURE__*/React.createElement(CalendarProvider, {
     value: contextValue
@@ -180,34 +181,4 @@ var CalendarContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, /*#__PURE__*/React.createElement(AngleUpIcon, null))));
 });
 CalendarContainer.displayName = 'CalendarContainer';
-CalendarContainer.propTypes = {
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  disabledDate: PropTypes.func,
-  disabledHours: PropTypes.func,
-  disabledMinutes: PropTypes.func,
-  disabledSeconds: PropTypes.func,
-  format: PropTypes.string,
-  hideHours: PropTypes.func,
-  hideMinutes: PropTypes.func,
-  hideSeconds: PropTypes.func,
-  isoWeek: PropTypes.bool,
-  limitEndYear: PropTypes.number,
-  limitStartYear: PropTypes.number,
-  locale: PropTypes.object,
-  onChangeMonth: PropTypes.func,
-  onChangeTime: PropTypes.func,
-  onMoveBackward: PropTypes.func,
-  onMoveForward: PropTypes.func,
-  onSelect: PropTypes.func,
-  onToggleMeridian: PropTypes.func,
-  onToggleMonthDropdown: PropTypes.func,
-  onToggleTimeDropdown: PropTypes.func,
-  calendarDate: PropTypes.instanceOf(Date),
-  renderCell: PropTypes.func,
-  renderTitle: PropTypes.func,
-  renderToolbar: PropTypes.func,
-  showMeridian: PropTypes.bool,
-  showWeekNumbers: PropTypes.bool
-};
 export default CalendarContainer;

package/esm/Calendar/CalendarContext.d.ts

@@ -1,6 +1,130 @@
 import React from 'react';
-import { CalendarContextValue } from './types';
+import { CalendarLocale } from '../locales';
+import { format } from '../internals/utils/date';
+import type { FixedSizeListProps } from '../internals/Windowing';
+/**
+ * Represents the inner context value for the Calendar component.
+ */
+export interface CalendarInnerContextValue {
+    /**
+     * The current date of the calendar.
+     */
+    date: Date;
+    /**
+     * The date range selected in the calendar.
+     */
+    dateRange?: Date[];
+    /**
+     * The format used for displaying dates.
+     */
+    format?: string;
+    /**
+     * The hover range value in the calendar.
+     */
+    hoverRangeValue?: [Date, Date];
+    /**
+     * Indicates whether the calendar is inline or not.
+     */
+    inline?: boolean;
+    /**
+     * Indicates whether the ISO week numbers should be shown in the calendar.
+     */
+    isoWeek: boolean;
+    /**
+     * The start day of the week in the calendar.
+     * 0 - Sunday, 1 - Monday, 2 - Tuesday, 3 - Wednesday, 4 - Thursday, 5 - Friday, 6 - Saturday
+     */
+    weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Indicates whether week numbers should be shown in the calendar.
+     */
+    showWeekNumbers?: boolean;
+    /**
+     * The target ID of the calendar.
+     */
+    targetId?: string;
+    /**
+     * The props for the Month Dropdown component.
+     */
+    monthDropdownProps?: MonthDropdownProps;
+    /**
+     * A function that determines if a date is disabled in the calendar.
+     * @param date - The date to check.
+     * @param selectRangeValue - The selected date range.
+     * @param type - The type of the calendar.
+     * @returns True if the date is disabled, false otherwise.
+     */
+    disabledDate?: (date: Date, selectRangeValue?: Date[], type?: string) => boolean;
+    /**
+     * A function that determines if a date is in the same month as the current date in the calendar.
+     * @param date - The date to check.
+     * @returns True if the date is in the same month, false otherwise.
+     */
+    inSameMonth?: (date: Date) => boolean;
+    /**
+     * A callback function that is called when the month is changed in the calendar.
+     * @param nextPageDate - The next page date.
+     * @param event - The mouse event.
+     */
+    onChangeMonth?: (nextPageDate: Date, event: React.MouseEvent) => void;
+    /**
+     * A callback function that is called when the time is changed in the calendar.
+     * @param nextPageTime - The next page time.
+     * @param event - The mouse event.
+     */
+    onChangeTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
+    /**
+     * A callback function that is called when the mouse moves over a date in the calendar.
+     * @param date - The date.
+     */
+    onMouseMove?: (date: Date) => void;
+    /**
+     * A callback function that is called when a date is selected in the calendar.
+     * @param date - The selected date.
+     * @param event - The mouse event.
+     */
+    onSelect?: (date: Date, event: React.MouseEvent) => void;
+    /**
+     * A function that renders the cell content in the calendar.
+     * @param date - The date.
+     * @returns The rendered cell content.
+     */
+    renderCell?: (date: Date) => React.ReactNode;
+    /**
+     * A function that renders the cell content in the picker.
+     * @param date - The date.
+     * @returns The rendered cell content.
+     */
+    renderCellOnPicker?: (date: Date) => React.ReactNode;
+    /**
+     * A function that returns the class name for a cell in the calendar.
+     * @param date - The date.
+     * @returns The class name for the cell.
+     */
+    cellClassName?: (date: Date) => string | undefined;
+}
+/**
+ * Props for the MonthDropdown component.
+ */
+export interface MonthDropdownProps extends Partial<FixedSizeListProps> {
+    /**
+     * The HTML element or React component to render as the root element of the MonthDropdown.
+     */
+    as?: React.ElementType;
+    /**
+     * The HTML element or React component to render as each item in the MonthDropdown.
+     */
+    itemAs?: React.ElementType;
+    /**
+     * The CSS class name to apply to each item in the MonthDropdown.
+     */
+    itemClassName?: string;
+}
+export interface CalendarContextValue extends CalendarInnerContextValue {
+    locale: CalendarLocale;
+    formatDate?: typeof format;
+}
 declare const CalendarContext: React.Context<CalendarContextValue>;
-export default CalendarContext;
 export declare const CalendarProvider: React.Provider<CalendarContextValue>;
 export declare const useCalendarContext: () => CalendarContextValue;
+export default CalendarContext;

package/esm/Calendar/CalendarContext.js

@@ -1,8 +1,17 @@
 'use client';
 import React, { useContext } from 'react';
+
+/**
+ * Represents the inner context value for the Calendar component.
+ */
+
+/**
+ * Props for the MonthDropdown component.
+ */
+
 var CalendarContext = /*#__PURE__*/React.createContext({});
-export default CalendarContext;
 export var CalendarProvider = CalendarContext.Provider;
 export var useCalendarContext = function useCalendarContext() {
-  return useContext(CalendarContext) || {};
-};
+  return useContext(CalendarContext);
+};
+export default CalendarContext;

package/esm/Calendar/CalendarHeader.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["as", "className", "classPrefix", "disabledBackward", "disabledForward", "showDate", "showMeridian", "showMonth", "showTime", "disabledTime", "onMoveBackward", "onMoveForward", "onToggleMeridian", "onToggleMonthDropdown", "onToggleTimeDropdown", "renderTitle", "renderToolbar"];
 import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
 import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
 import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
 import IconButton from "../IconButton/index.js";
@@ -39,7 +38,8 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
     format = _useCalendarContext.format,
     inline = _useCalendarContext.inline,
-    disabledDate = _useCalendarContext.disabledDate;
+    disabledDate = _useCalendarContext.disabledDate,
+    targetId = _useCalendarContext.targetId;
   var _useDateRangePickerCo = useDateRangePickerContext(),
     isSelectedIdle = _useDateRangePickerCo.isSelectedIdle;
   var _useClassNames = useClassNames(classPrefix),
@@ -101,6 +101,7 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     icon: /*#__PURE__*/React.createElement(AngleLeftIcon, null)
   })), /*#__PURE__*/React.createElement(Button, _extends({}, btnProps, {
     "aria-label": "Select month",
+    id: targetId ? targetId + "-grid-label" : undefined,
     className: dateTitleClasses,
     onClick: onToggleMonthDropdown
   }), renderTitle()), /*#__PURE__*/React.createElement(IconButton, _extends({}, btnProps, {
@@ -141,22 +142,4 @@ var CalendarHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }))), renderToolbar === null || renderToolbar === void 0 ? void 0 : renderToolbar(date));
 });
 CalendarHeader.displayName = 'CalendarHeader';
-CalendarHeader.propTypes = {
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  disabledBackward: PropTypes.bool,
-  disabledForward: PropTypes.bool,
-  disabledTime: PropTypes.func,
-  onMoveBackward: PropTypes.func,
-  onMoveForward: PropTypes.func,
-  onToggleMeridian: PropTypes.func,
-  onToggleMonthDropdown: PropTypes.func,
-  onToggleTimeDropdown: PropTypes.func,
-  renderTitle: PropTypes.func,
-  renderToolbar: PropTypes.func,
-  showDate: PropTypes.bool,
-  showMeridian: PropTypes.bool,
-  showMonth: PropTypes.bool,
-  showTime: PropTypes.bool
-};
 export default CalendarHeader;

package/esm/Calendar/MonthDropdown.js

@@ -1,7 +1,8 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"];
+var _excluded = ["as", "className", "classPrefix", "limitStartYear", "limitEndYear", "show", "height", "width", "disabledMonth"],
+  _excluded2 = ["className", "itemClassName", "as", "itemAs"];
 import React, { useCallback, useMemo } from 'react';
 import { getDaysInMonth, getMonth, getYear } from "../internals/utils/date/index.js";
 import { AutoSizer, FixedSizeList } from "../internals/Windowing/index.js";
@@ -37,7 +38,8 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCalendarContext = useCalendarContext(),
     _useCalendarContext$d = _useCalendarContext.date,
     date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-    targetId = _useCalendarContext.targetId;
+    targetId = _useCalendarContext.targetId,
+    monthDropdownProps = _useCalendarContext.monthDropdownProps;
   var _useClassNames = useClassNames(classPrefix),
     prefix = _useClassNames.prefix,
     merge = _useClassNames.merge,
@@ -54,9 +56,16 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return false;
   }, [disabledMonth]);
-  var rowRenderer = useCallback(function (_ref) {
-    var index = _ref.index,
-      style = _ref.style;
+  var _ref = monthDropdownProps || {},
+    listClassName = _ref.className,
+    itemClassName = _ref.itemClassName,
+    List = _ref.as,
+    _ref$itemAs = _ref.itemAs,
+    Item = _ref$itemAs === void 0 ? 'div' : _ref$itemAs,
+    restListProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  var rowRenderer = useCallback(function (_ref2) {
+    var index = _ref2.index,
+      style = _ref2.style;
     var selectedMonth = getMonth(date);
     var selectedYear = getYear(date);
     var year = startYear + index;
@@ -64,14 +73,13 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var titleClassName = prefix('year', {
       'year-active': isSelectedYear
     });
-    var rowClassName = merge(prefix('row'), {
-      'first-row': index === 0,
-      'last-row': index === rowCount - 1
-    });
-    return /*#__PURE__*/React.createElement("div", {
-      className: rowClassName,
+    return /*#__PURE__*/React.createElement(Item, {
       role: "row",
       "aria-label": "" + year,
+      className: merge(itemClassName, prefix('row'), {
+        'first-row': index === 0,
+        'last-row': index === rowCount - 1
+      }),
       style: style
     }, /*#__PURE__*/React.createElement("div", {
       className: titleClassName,
@@ -87,40 +95,42 @@ var MonthDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         year: year
       });
     })));
-  }, [date, isMonthDisabled, merge, prefix, rowCount, startYear]);
+  }, [Item, date, isMonthDisabled, merge, prefix, itemClassName, rowCount, startYear]);
   var classes = merge(className, withClassPrefix(), {
     show: show
   });
   var itemSize = 75;
   var initialItemIndex = getYear(date) - startYear;
   var initialScrollOffset = itemSize * initialItemIndex;
+  if (!show) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
     role: "grid",
-    "aria-label": "Select month",
     tabIndex: -1,
-    id: targetId ? targetId + "-" + classPrefix : undefined
-  }, rest, {
-    ref: ref,
-    className: classes
-  }), /*#__PURE__*/React.createElement("div", {
-    className: prefix('content')
-  }, /*#__PURE__*/React.createElement("div", {
+    className: classes,
+    "aria-labelledby": targetId ? targetId + "-grid-label" : undefined,
+    id: targetId ? targetId + "-calendar-month-dropdown" : undefined,
+    "data-testid": "calendar-month-dropdown"
+  }, rest), /*#__PURE__*/React.createElement("div", {
     className: prefix('scroll')
-  }, show && /*#__PURE__*/React.createElement(AutoSizer, {
+  }, /*#__PURE__*/React.createElement(AutoSizer, {
     defaultHeight: defaultHeight,
     defaultWidth: defaultWidth
-  }, function (_ref2) {
-    var height = _ref2.height,
-      width = _ref2.width;
-    return /*#__PURE__*/React.createElement(FixedSizeList, {
-      className: prefix('row-wrapper'),
+  }, function (_ref3) {
+    var height = _ref3.height,
+      width = _ref3.width;
+    return /*#__PURE__*/React.createElement(FixedSizeList, _extends({
+      className: merge(prefix('row-wrapper'), listClassName),
       width: width || defaultWidth,
       height: height || defaultHeight,
       itemSize: itemSize,
       itemCount: rowCount,
-      initialScrollOffset: initialScrollOffset
-    }, rowRenderer);
-  }))));
+      initialScrollOffset: initialScrollOffset,
+      innerElementType: List
+    }, restListProps), rowRenderer);
+  })));
 });
 MonthDropdown.displayName = 'MonthDropdown';
 export default MonthDropdown;

package/esm/Calendar/TimeDropdown.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _excluded = ["as", "className", "classPrefix", "show", "showMeridian"];
 import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import getPosition from 'dom-lib/getPosition';
 import scrollTop from 'dom-lib/scrollTop';
 import partial from 'lodash/partial';
@@ -190,17 +189,4 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, renderColumn('hours', time.hours), renderColumn('minutes', time.minutes), renderColumn('seconds', time.seconds))));
 });
 TimeDropdown.displayName = 'TimeDropdown';
-TimeDropdown.propTypes = {
-  show: PropTypes.bool,
-  showMeridian: PropTypes.bool,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  disabledDate: PropTypes.func,
-  disabledHours: PropTypes.func,
-  disabledMinutes: PropTypes.func,
-  disabledSeconds: PropTypes.func,
-  hideHours: PropTypes.func,
-  hideMinutes: PropTypes.func,
-  hideSeconds: PropTypes.func
-};
 export default TimeDropdown;

package/esm/Calendar/index.d.ts

@@ -1,8 +1,7 @@
 import Calendar from './Calendar';
 import CalendarContainer from './CalendarContainer';
 import { CalendarState } from './useCalendarState';
-import CalendarContext from './CalendarContext';
-import { CalendarContextValue } from './types';
+import CalendarContext, { CalendarContextValue } from './CalendarContext';
 export { CalendarContainer, CalendarContext, CalendarState };
 export type { CalendarContextValue };
 export type { CalendarProps } from './Calendar';

package/esm/CustomProvider/CustomProvider.d.ts

@@ -1,6 +1,14 @@
 import React from 'react';
+import type { Locale as DateFnsLocale } from 'date-fns';
 import { Locale } from '../locales';
 import { ToastContainerInstance } from '../toaster/ToastContainer';
+export interface FormatDateOptions {
+    locale?: DateFnsLocale;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    firstWeekContainsDate?: number;
+    useAdditionalWeekYearTokens?: boolean;
+    useAdditionalDayOfYearTokens?: boolean;
+}
 export interface CustomValue<T = Locale> {
     /** Language configuration */
     locale: T;
@@ -19,7 +27,7 @@ export interface CustomValue<T = Locale> {
      *  }
      *
      * */
-    formatDate: (date: Date | number, format: string) => string;
+    formatDate: (date: Date | number, format: string, options?: FormatDateOptions) => string;
     /**
      * Return the date parsed from string using the given format string.
      *
@@ -33,7 +41,7 @@ export interface CustomValue<T = Locale> {
      *  }
      *
      * */
-    parseDate: (dateString: string, formatString: string) => Date;
+    parseDate: (dateString: string, formatString: string, referenceDate?: Date | number, options?: FormatDateOptions) => Date;
     /**
      * A Map of toast containers
      */
@@ -60,6 +68,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     Plaintext?: {
         unfilled: string;
+        /** Support right-to-left */
         notSelected: string;
         notUploaded: string;
     } | undefined;
@@ -67,19 +76,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         more: string;
         prev: string;
         next: string;
-        first: string; /**
-         * Return the date parsed from string using the given format string.
-         *
-         * Example:
-         *
-         *  import parse from 'date-fns/parse';
-         *  import eo from 'date-fns/locale/eo'
-         *
-         *  function parseDate(date, formatStr) {
-         *    return parse(date, formatStr, new Date(), { locale: eo });
-         *  }
-         *
-         * */
+        first: string;
         last: string;
         limit: string;
         total: string;
@@ -152,7 +149,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     } | undefined;
     Uploader?: {
         inited: string;
-        progress: string; /** If true, the ripple effect is disabled. Affected components include: Button, Nav.Item, Pagination. */
+        progress: string;
         error: string;
         complete: string;
         emptyFile: string;

package/esm/DateInput/hooks/useDateInputState.d.ts

@@ -1,8 +1,6 @@
-import { format } from '../../internals/utils/date';
 import type { Locale } from 'date-fns';
 interface DateInputState {
     formatStr: string;
-    formatDate?: typeof format;
     locale: Locale;
     date?: Date | null;
     isControlledDate?: boolean;

package/esm/DateInput/hooks/useDateInputState.js

@@ -1,13 +1,16 @@
 'use client';
 import { useCallback, useEffect } from 'react';
 import startCase from 'lodash/startCase';
-import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, format, isLastDayOfMonth, lastDayOfMonth, isValid } from "../../internals/utils/date/index.js";
+import { addDays, addMonths, addYears, addHours, addMinutes, addSeconds, isLastDayOfMonth, lastDayOfMonth, isValid } from "../../internals/utils/date/index.js";
+import { useCustom } from "../../internals/hooks/index.js";
 import { useDateField, patternMap } from "../DateField.js";
 export function useDateInputState(_ref) {
   var formatStr = _ref.formatStr,
     locale = _ref.locale,
     date = _ref.date,
     isControlledDate = _ref.isControlledDate;
+  var _useCustom = useCustom(),
+    formatDate = _useCustom.formatDate;
   var _useDateField = useDateField(formatStr, locale.localize, date),
     dateField = _useDateField.dateField,
     dispatch = _useDateField.dispatch,
@@ -88,7 +91,7 @@ export function useDateInputState(_ref) {
   };
   var toControlledDateString = function toControlledDateString() {
     if (date && isValid(date)) {
-      return format(date, formatStr, {
+      return formatDate(date, formatStr, {
         locale: locale
       });
     }

package/esm/DatePicker/DatePicker.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import { RangeType } from './Toolbar';
-import { DatePickerLocale } from '../locales';
 import type { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../internals/types';
+import type { DatePickerLocale } from '../locales';
 import type { DeprecatedProps } from './types';
+import type { MonthDropdownProps } from '../Calendar/CalendarContext';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, DeprecatedProps {
     /**
      * Custom caret component
@@ -77,6 +78,10 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      * Meridian format for 12-hour time
      */
     showMeridian?: boolean;
+    /**
+     * The props for the Month Dropdown component.
+     */
+    monthDropdownProps?: MonthDropdownProps;
     /**
      * Whether a date on the calendar view should be disabled
      *