rsuite 5.2.3 → 5.4.1

package/cjs/CustomProvider/CustomProvider.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { Locale } from '../locales';
 export interface CustomValue<T = Locale> {
     /** Language configuration */
-    locale?: T;
+    locale: T;
     /** Support right-to-left */
-    rtl?: boolean;
+    rtl: boolean;
     /**
      * Return the formatted date string in the given format. The result may vary by locale.
      *
@@ -18,7 +18,7 @@ export interface CustomValue<T = Locale> {
      *  }
      *
      * */
-    formatDate?: (date: Date | string | number, format?: string) => string;
+    formatDate: (date: Date | number, format: string) => string;
     /**
      * Return the date parsed from string using the given format string.
      *
@@ -32,9 +32,9 @@ export interface CustomValue<T = Locale> {
      *  }
      *
      * */
-    parseDate?: (dateString: string, formatString: string) => Date;
+    parseDate: (dateString: string, formatString: string) => Date;
 }
-export interface CustomProviderProps<T = Locale> extends CustomValue<T> {
+export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
     /** Supported themes */
     theme?: 'light' | 'dark' | 'high-contrast';
     /** The prefix of the component CSS class */
@@ -46,25 +46,12 @@ declare const CustomContext: React.Context<CustomProviderProps<{
     common?: {
         loading: string;
         emptyMessage: string;
-    };
+    } | undefined;
     Plaintext?: {
         unfilled: string;
         notSelected: 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 });
-         *  }
-         *
-         * */
         notUploaded: string;
-    };
+    } | undefined;
     Pagination?: {
         more: string;
         prev: string;
@@ -74,7 +61,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         limit: string;
         total: string;
         skip: string;
-    };
+    } | undefined;
     Calendar?: {
         sunday: string;
         monday: string;
@@ -92,7 +79,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DatePicker?: {
         sunday: string;
         monday: string;
@@ -110,7 +97,7 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DateRangePicker?: {
         last7Days: string;
         sunday: string;
@@ -129,17 +116,17 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     Picker?: {
         noResultsText: string;
         placeholder: string;
-        searchPlaceholder: string;
+        searchPlaceholder: string; /** Supported themes */
         checkAll: string;
-    };
+    } | undefined;
     InputPicker?: {
         newItem: string;
         createOption: string;
-    };
+    } | undefined;
     Uploader?: {
         inited: string;
         progress: string;
@@ -147,41 +134,28 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         complete: string;
         emptyFile: string;
         upload: string;
-    };
+    } | undefined;
     CloseButton?: {
         closeLabel: string;
-    };
+    } | undefined;
     Breadcrumb?: {
         expandText: string;
-    };
+    } | undefined;
     Toggle?: {
         on: string;
         off: string;
-    };
+    } | undefined;
 }>>;
 declare const Consumer: React.Consumer<CustomProviderProps<{
     common?: {
         loading: string;
         emptyMessage: string;
-    };
+    } | undefined;
     Plaintext?: {
         unfilled: string;
         notSelected: 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 });
-         *  }
-         *
-         * */
         notUploaded: string;
-    };
+    } | undefined;
     Pagination?: {
         more: string;
         prev: string;
@@ -191,7 +165,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         limit: string;
         total: string;
         skip: string;
-    };
+    } | undefined;
     Calendar?: {
         sunday: string;
         monday: string;
@@ -209,7 +183,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DatePicker?: {
         sunday: string;
         monday: string;
@@ -227,7 +201,7 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     DateRangePicker?: {
         last7Days: string;
         sunday: string;
@@ -246,17 +220,17 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         formattedMonthPattern: string;
         formattedDayPattern: string;
         dateLocale: any;
-    };
+    } | undefined;
     Picker?: {
         noResultsText: string;
         placeholder: string;
-        searchPlaceholder: string;
+        searchPlaceholder: string; /** Supported themes */
         checkAll: string;
-    };
+    } | undefined;
     InputPicker?: {
         newItem: string;
         createOption: string;
-    };
+    } | undefined;
     Uploader?: {
         inited: string;
         progress: string;
@@ -264,17 +238,17 @@ declare const Consumer: React.Consumer<CustomProviderProps<{
         complete: string;
         emptyFile: string;
         upload: string;
-    };
+    } | undefined;
     CloseButton?: {
         closeLabel: string;
-    };
+    } | undefined;
     Breadcrumb?: {
         expandText: string;
-    };
+    } | undefined;
     Toggle?: {
         on: string;
         off: string;
-    };
+    } | undefined;
 }>>;
 declare const CustomProvider: (props: CustomProviderProps) => JSX.Element;
 export { CustomContext, Consumer as CustomConsumer };

package/cjs/DOMHelper/index.d.ts

@@ -16,33 +16,33 @@ declare const DOMHelper: {
     ownerDocument: (node: Element) => Document;
     ownerWindow: (componentOrElement: Element) => Window;
     getWindow: (node: any) => Window;
-    getContainer: (container: Element | (() => Element), defaultContainer?: Element) => Element;
+    getContainer: (container: Element | (() => Element), defaultContainer?: Element | undefined) => Element;
     canUseDOM: boolean;
     contains: (context: Element, node: Node & ParentNode) => boolean;
-    scrollTop: (node: Element, val?: number) => number;
-    scrollLeft: (node: Element, val?: number) => number;
+    scrollTop: (node: Element, val?: number | undefined) => number;
+    scrollLeft: (node: Element, val?: number | undefined) => number;
     getOffset: (node: Element) => {
         top: number;
         left: number;
         height: number;
         width: number;
-    } | DOMRect;
+    } | DOMRect | null;
     nodeName: (node: Element) => string;
     getOffsetParent: (node: Element) => Element;
-    getPosition: (node: Element, offsetParent?: Element, calcMargin?: boolean) => DOMRect | {
+    getPosition: (node: Element, offsetParent?: Element | undefined, calcMargin?: boolean | undefined) => DOMRect | {
         top: number;
         left: number;
         height: number;
         width: number;
-    };
+    } | null;
     isOverflowing: (container: Element) => boolean;
-    getScrollbarSize: (recalc?: boolean) => number | void;
-    getHeight: (node: Element | Window, client?: Element) => number;
-    getWidth: (node: Element | Window, client?: Element) => number;
+    getScrollbarSize: (recalc?: boolean | undefined) => number | void;
+    getHeight: (node: Element | Window, client?: Element | undefined) => number;
+    getWidth: (node: Element | Window, client?: Element | undefined) => number;
     isFocusable: typeof helpers.isFocusable;
-    getStyle: (node: Element, property?: string) => string | CSSStyleDeclaration;
+    getStyle: (node: Element, property?: string | undefined) => string | CSSStyleDeclaration;
     removeStyle: (node: Element, keys: string | string[]) => void;
-    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number) => void;
-    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number, y?: number) => CSSStyleDeclaration;
+    addStyle: (node: Element, property: string | import("dom-lib/esm/addStyle").CSSProperty, value?: string | number | undefined) => void;
+    translateDOMPositionXY: (style: CSSStyleDeclaration, x?: number | undefined, y?: number | undefined) => CSSStyleDeclaration;
 };
 export default DOMHelper;

package/cjs/DatePicker/DatePicker.d.ts

@@ -5,7 +5,7 @@ import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from
 export type { RangeType } from './Toolbar';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date> {
     /** Configure shortcut options */
-    ranges?: RangeType[];
+    ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */
     calendarDefaultDate?: Date;
     /** Format date */

package/cjs/DatePicker/DatePicker.js

@@ -15,6 +15,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
@@ -116,10 +118,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       active = _useState2[0],
       setActive = _useState2[1];
 
-  var triggerRef = (0, _react.useRef)();
-  var rootRef = (0, _react.useRef)();
-  var targetRef = (0, _react.useRef)();
-  var overlayRef = (0, _react.useRef)();
+  var triggerRef = (0, _react.useRef)(null);
+  var rootRef = (0, _react.useRef)(null);
+  var targetRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
   (0, _Picker.usePublicMethods)(ref, {
     rootRef: rootRef,
     triggerRef: triggerRef,
@@ -192,7 +194,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       closeOverlay = true;
     }
 
-    var nextValue = typeof nextPageDate !== 'undefined' ? nextPageDate : calendarDate;
+    var nextValue = !(0, _isNil.default)(nextPageDate) ? nextPageDate : calendarDate;
     setCalendarDate(nextValue || new Date());
     setValue(nextValue);
 
@@ -289,7 +291,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);
   var disabledDate = (0, _react.useCallback)(function (date) {
-    return disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date);
+    var _disabledDateProp;
+
+    return (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
   }, [disabledDateProp]);
   /**
    * Callback after the input box value is changed.
@@ -346,9 +350,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onClose, reset]); // Check whether the time is within the time range of the shortcut option in the toolbar.
 
   var disabledToolbarHandle = (0, _react.useCallback)(function (date) {
-    var _disabledDateProp;
+    var _disabledDateProp2;
 
-    var allowDate = (_disabledDateProp = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp !== void 0 ? _disabledDateProp : false;
+    var allowDate = (_disabledDateProp2 = disabledDateProp === null || disabledDateProp === void 0 ? void 0 : disabledDateProp(date)) !== null && _disabledDateProp2 !== void 0 ? _disabledDateProp2 : false;
 
     var allowTime = _utils.DateUtils.disabledTime(props, date);
 
@@ -357,7 +361,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var calendarProps = (0, _react.useMemo)(function () {
     return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
-        return disabledOrHiddenTimeFunc(next, date);
+        var _disabledOrHiddenTime;
+
+        return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;
       };
     });
   }, [props]);
@@ -396,6 +402,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       top: top
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+      role: "dialog",
       className: classes,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       style: styles,
@@ -433,7 +440,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
-  var caretComponent = (0, _react.useMemo)(function () {
+  var caretAs = (0, _react.useMemo)(function () {
     return _utils.DateUtils.shouldOnlyTime(formatStr) ? _ClockO.default : _Calendar.default;
   }, [formatStr]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
@@ -469,7 +476,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     active: active,
     placement: placement,
     disabled: disabled,
-    caretComponent: caretComponent
+    caretAs: caretAs,
+    "aria-haspopup": "dialog"
   }), renderDate())));
 });
 

package/cjs/DatePicker/Toolbar.d.ts

@@ -1,20 +1,23 @@
 import React from 'react';
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-import { RangeType, ToolbarValue } from './types';
+import { StandardProps } from '../@types/common';
+import { RangeType } from './types';
 import { CalendarLocale } from '../locales';
 export type { RangeType } from './types';
-export interface ToolbarProps extends WithAsProps {
+export interface ToolbarProps<T = any, Shortcut = T> extends StandardProps {
     hideOkBtn?: boolean;
     locale?: CalendarLocale;
-    calendarDate?: ToolbarValue;
-    ranges: RangeType[];
-    disabledOkBtn?: (value?: ToolbarValue) => boolean;
-    disabledShortcut?: (value?: ToolbarValue) => boolean;
+    calendarDate: T;
+    ranges?: RangeType<Shortcut>[];
+    disabledOkBtn?: (value: T) => boolean;
+    disabledShortcut?: (value: T) => boolean;
     onOk?: (event: React.MouseEvent) => void;
-    onClickShortcut?: (value: ToolbarValue, closeOverlay?: boolean, event?: React.MouseEvent) => void;
+    onClickShortcut?: (value: Shortcut, closeOverlay: boolean, event: React.MouseEvent) => void;
 }
+declare type ToolbarComponent = React.ForwardRefExoticComponent<ToolbarProps> & {
+    <T = any, Shortcut = T>(props: ToolbarProps<T, Shortcut>): React.ReactElement | null;
+};
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
-declare const Toolbar: RsRefForwardingComponent<'div', ToolbarProps>;
+declare const Toolbar: ToolbarComponent;
 export default Toolbar;

package/cjs/DatePicker/Toolbar.js

@@ -25,9 +25,7 @@ var _utils2 = require("./utils");
  * Toolbar for DatePicker and DateRangePicker
  */
 var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Component = _props$as === void 0 ? 'div' : _props$as,
-      className = props.className,
+  var className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'picker-toolbar' : _props$classPrefix,
       disabledOkBtn = props.disabledOkBtn,
@@ -38,7 +36,7 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       calendarDate = props.calendarDate,
       rangesProp = props.ranges,
       locale = props.locale,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
 
   var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),
       ranges = _useState[0],
@@ -81,7 +79,7 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
@@ -97,7 +95,7 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         return;
       }
 
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay, event);
+      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== null && closeOverlay !== void 0 ? closeOverlay : false, event);
     };
 
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
@@ -115,12 +113,12 @@ Toolbar.propTypes = {
   ranges: _propTypes.default.array,
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
-  calendarDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))]),
+  calendarDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))]).isRequired,
   onClickShortcut: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledShortcut: _propTypes.default.func,
   disabledOkBtn: _propTypes.default.func,
-  hideOkButton: _propTypes.default.bool
+  hideOkBtn: _propTypes.default.bool
 };
 var _default = Toolbar;
 exports.default = _default;

package/cjs/DatePicker/types.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
 export declare type ToolbarValue = Date | [Date?, Date?];
-export interface RangeType {
+export interface RangeType<T> {
     label: ReactNode;
     closeOverlay?: boolean;
-    value: ToolbarValue | ((value: ToolbarValue) => ToolbarValue);
+    value: T | ((value: T) => T);
 }
-export interface InnerRange extends Omit<RangeType, 'value'> {
-    value: ToolbarValue;
+export interface InnerRange<T> extends Omit<RangeType<T>, 'value'> {
+    value: T;
 }

package/cjs/DatePicker/utils.d.ts

@@ -1,15 +1,16 @@
 import { ToolbarProps } from './Toolbar';
 import { InnerRange } from './types';
 import { CalendarState } from '../Calendar';
-export declare function getDefaultRanges(date: Date | Date[]): InnerRange[];
+import { DateRange } from '../DateRangePicker/types';
+export declare function getDefaultRanges<T extends Date | DateRange>(date: T): InnerRange<T>[];
 /**
  * get Toolbar ranges from Toolbar props
  * @param ranges
  * @param calendarDate
  */
-export declare const getRanges: ({ ranges, calendarDate }: Pick<ToolbarProps, 'ranges' | 'calendarDate'>) => InnerRange[];
+export declare const getRanges: <T extends Date | DateRange>({ ranges, calendarDate }: Pick<ToolbarProps<T, T>, "calendarDate" | "ranges">) => InnerRange<T>[];
 export declare const useCalendarState: () => {
-    calendarState: CalendarState;
+    calendarState: CalendarState | undefined;
     reset: () => void;
     openMonth: () => void;
     openTime: () => void;

package/cjs/DateRangePicker/Calendar.d.ts

@@ -1,25 +1,27 @@
 import React from 'react';
 import { CalendarProps as CalendarCoreProps } from '../Calendar/Calendar';
-import { ValueType } from './types';
+import { DateRange } from './types';
 import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
 import { DatePickerLocale } from '../locales';
-declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate';
+import { DATERANGE_DISABLED_TARGET } from '../utils';
+declare type OmitCalendarCoreTypes = 'disabledDate' | 'onSelect' | 'onMouseMove' | 'calendarDate' | 'format' | 'locale' | 'onToggleMeridian';
 export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, OmitCalendarCoreTypes> {
-    calendarDate?: ValueType;
-    disabledDate?: (date: Date, selectValue: ValueType, type: string) => boolean;
+    calendarDate?: DateRange;
+    disabledDate?: (date: Date, selectValue: [] | [Date] | [Date, Date], type: DATERANGE_DISABLED_TARGET) => boolean;
     format?: string;
-    hoverRangeValue?: ValueType;
+    hoverRangeValue?: DateRange;
     index: number;
     isoWeek?: boolean;
     limitEndYear?: number;
     locale?: DatePickerLocale;
     onChangeCalendarDate?: (index: number, date: Date) => void;
     onChangeCalendarTime?: (index: number, date: Date) => void;
+    onToggleMeridian: (index: number, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;
-    onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
+    onSelect?: (date: Date, event: React.SyntheticEvent) => void;
     showOneCalendar?: boolean;
     showWeekNumbers?: boolean;
-    value?: ValueType;
+    value?: [] | [Date] | [Date, Date];
 }
 declare const Calendar: RsRefForwardingComponent<'div', CalendarProps>;
 export default Calendar;

package/cjs/DateRangePicker/Calendar.js

@@ -21,6 +21,14 @@ var _Calendar = _interopRequireWildcard(require("../Calendar/Calendar"));
 
 var _utils = require("../utils");
 
+/**
+ * Omit the time in the date, which is used to compare and judge the date.
+ * eg: isAfter/isBefore
+ */
+function omitTime(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+
 var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? _Calendar.default : _props$as,
@@ -34,10 +42,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       limitEndYear = props.limitEndYear,
       onChangeCalendarDate = props.onChangeCalendarDate,
       onChangeCalendarTime = props.onChangeCalendarTime,
+      onToggleMeridian = props.onToggleMeridian,
       showOneCalendar = props.showOneCalendar,
       _props$value = props.value,
       value = _props$value === void 0 ? [] : _props$value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "showOneCalendar", "value"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "onChangeCalendarDate", "onChangeCalendarTime", "onToggleMeridian", "showOneCalendar", "value"]);
 
   var _useState = (0, _react.useState)(),
       calendarState = _useState[0],
@@ -54,8 +63,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setCalendarState(undefined);
   }, [index, onChangeCalendarDate]);
   var handleChangePageTime = (0, _react.useCallback)(function (nextPageDate) {
-    onChangeCalendarTime(index, nextPageDate);
+    onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   }, [index, onChangeCalendarTime]);
+  var handleToggleMeridian = (0, _react.useCallback)(function (event) {
+    onToggleMeridian(index, event);
+  }, [index, onToggleMeridian]);
   var toggleMonthDropdown = (0, _react.useCallback)(function () {
     setCalendarState(calendarState === _Calendar.CalendarState.DROP_MONTH ? undefined : _Calendar.CalendarState.DROP_MONTH);
   }, [calendarState]);
@@ -75,22 +87,30 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
   }, [getCalendarDate, onMoveBackward]);
   var disabledBackward = (0, _react.useCallback)(function () {
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
-
+    // Do not disable the Backward button on the first calendar.
     if (index === 0) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index]);
   var disabledForward = (0, _react.useCallback)(function () {
-    if (showOneCalendar) return false;
-    var after = (0, _dateUtils.isAfter)((0, _dateUtils.setDate)(calendarDate[1], 1), (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(calendarDate[0], 1), 1));
+    // If only one calendar is displayed, do not disable
+    if (showOneCalendar) {
+      return false;
+    } // Do not disable the Forward button on the second calendar.
+
 
     if (index === 1) {
       return false;
     }
 
+    var startDate = (0, _dateUtils.setDate)((0, _dateUtils.addMonths)(omitTime(calendarDate[0]), 1), 1);
+    var endDate = (0, _dateUtils.setDate)(omitTime(calendarDate[1]), 1);
+    var after = (0, _dateUtils.isAfter)(endDate, startDate);
     return !after;
   }, [calendarDate, index, showOneCalendar]);
   var disabledMonth = (0, _react.useCallback)(function (date) {
@@ -126,6 +146,7 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onToggleMonthDropdown: toggleMonthDropdown,
     onToggleTimeDropdown: toggleTimeDropdown,
+    onToggleMeridian: handleToggleMeridian,
     calendarDate: getCalendarDate(),
     ref: ref
   }));

package/cjs/DateRangePicker/DateRangePicker.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { PickerComponent } from '../Picker';
-import { DisabledDateFunction, RangeType, ValueType } from './types';
-export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<ValueType> {
+import { DisabledDateFunction, RangeType, DateRange } from './types';
+export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null> {
     /** Configure shortcut options */
     ranges?: RangeType[];
     /** Format date */
     format?: string;
     /** The date range that will be selected when you click on the date */
-    hoverRange?: 'week' | 'month' | ((date: Date) => ValueType);
+    hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
     /** Whether to click once on selected date range，Can be used with hoverRange */
     oneTap?: boolean;
     /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
@@ -19,8 +19,10 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     showWeekNumbers?: boolean;
     /** Show only one calendar select */
     showOneCalendar?: boolean;
+    /** Meridian format */
+    showMeridian?: boolean;
     /** Set default date for calendar */
-    defaultCalendarValue?: ValueType;
+    defaultCalendarValue?: DateRange;
     /** The character that separates two dates */
     character?: string;
     /** Disabled date */
@@ -28,11 +30,11 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     /** Called when the option is selected */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */
-    onOk?: (date: ValueType, event: React.SyntheticEvent) => void;
+    onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */
-    renderValue?: (value: ValueType, format: string) => React.ReactNode;
+    renderValue?: (value: DateRange, format: string) => React.ReactNode;
 }
 export interface DateRangePicker extends PickerComponent<DateRangePickerProps> {
     /** Allow the maximum number of days specified, other dates are disabled */