rsuite 5.71.0 → 5.73.0

package/esm/Calendar/TimeDropdown/utils/getTimeLimits.d.ts

@@ -0,0 +1,11 @@
+interface TimeRange {
+    start: number;
+    end: number;
+}
+interface TimeLimits {
+    hours: TimeRange;
+    minutes: TimeRange;
+    seconds: TimeRange;
+}
+export declare function getTimeLimits(isMeridiem: boolean): TimeLimits;
+export {};

package/esm/Calendar/TimeDropdown/utils/getTimeLimits.js

@@ -0,0 +1,20 @@
+'use client';
+export function getTimeLimits(isMeridiem) {
+  var HOURS_24H = {
+    start: 0,
+    end: 23
+  };
+  var HOURS_12H = {
+    start: 0,
+    end: 11
+  };
+  var MINUTES_SECONDS = {
+    start: 0,
+    end: 59
+  };
+  return {
+    hours: isMeridiem ? HOURS_12H : HOURS_24H,
+    minutes: MINUTES_SECONDS,
+    seconds: MINUTES_SECONDS
+  };
+}

package/esm/Calendar/TimeDropdown/utils/index.d.ts

@@ -0,0 +1,4 @@
+export { getTimeLimits } from './getTimeLimits';
+export { formatWithLeadingZero } from './formatWithLeadingZero';
+export { scrollToTime } from './scrollToTime';
+export * from './getClockTime';

package/esm/Calendar/TimeDropdown/utils/index.js

@@ -0,0 +1,5 @@
+'use client';
+export { getTimeLimits } from "./getTimeLimits.js";
+export { formatWithLeadingZero } from "./formatWithLeadingZero.js";
+export { scrollToTime } from "./scrollToTime.js";
+export * from "./getClockTime.js";

package/esm/Calendar/TimeDropdown/utils/scrollToTime.d.ts

@@ -0,0 +1,2 @@
+import type { ClockTime } from './getClockTime';
+export declare function scrollToTime(time: ClockTime, row: HTMLDivElement | null): void;

package/esm/Calendar/TimeDropdown/utils/scrollToTime.js

@@ -0,0 +1,23 @@
+'use client';
+import getPosition from 'dom-lib/getPosition';
+import scrollTop from 'dom-lib/scrollTop';
+export function scrollToTime(time, row) {
+  if (!row) return;
+  var scrollToPosition = function scrollToPosition(container, value, type) {
+    var node = container.querySelector("[data-key=\"" + type + "-" + value + "\"]");
+    if (node) {
+      var position = getPosition(node, container);
+      if (position) {
+        scrollTop(container, position.top);
+      }
+    }
+  };
+  Object.entries(time).forEach(function (_ref) {
+    var type = _ref[0],
+      value = _ref[1];
+    var container = row.querySelector("[data-type=\"" + type + "\"]");
+    if (container) {
+      scrollToPosition(container, value, type);
+    }
+  });
+}

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

@@ -0,0 +1,3 @@
+export * from './useCalendarState';
+export * from './useCalendarDate';
+export { useCalendar } from './useCalendar';

package/esm/Calendar/hooks/index.js

@@ -0,0 +1,4 @@
+'use client';
+export * from "./useCalendarState.js";
+export * from "./useCalendarDate.js";
+export { useCalendar } from "./useCalendar.js";

package/esm/Calendar/hooks/useCalendar.d.ts

@@ -0,0 +1,2 @@
+import { CalendarContextValue } from '../CalendarProvider';
+export declare const useCalendar: () => CalendarContextValue;

package/esm/Calendar/hooks/useCalendar.js

@@ -0,0 +1,6 @@
+'use client';
+import { useContext } from 'react';
+import { CalendarContext } from "../CalendarProvider.js";
+export var useCalendar = function useCalendar() {
+  return useContext(CalendarContext);
+};

package/esm/Calendar/{useCalendarDate.d.ts → hooks/useCalendarDate.d.ts}

@@ -1,6 +1,5 @@
-declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
+export declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
     setCalendarDate: (date: React.SetStateAction<Date> | undefined) => void;
     resetCalendarDate: (nextValue?: any) => void;
 };
-export default useCalendarDate;

package/esm/Calendar/{useCalendarDate.js → hooks/useCalendarDate.js}

@@ -1,10 +1,11 @@
 'use client';
 import { useState, useCallback, useRef } from 'react';
-import { useUpdateEffect } from "../internals/hooks/index.js";
-var useCalendarDate = function useCalendarDate(value, defaultDate) {
+import { useUpdateEffect } from "../../internals/hooks/index.js";
+import { startOfToday } from "../../internals/utils/date/index.js";
+export var useCalendarDate = function useCalendarDate(value, defaultDate) {
   var _ref;
   var valueRef = useRef(value);
-  var _useState = useState((_ref = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref !== void 0 ? _ref : new Date()),
+  var _useState = useState((_ref = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref !== void 0 ? _ref : startOfToday()),
     calendarDate = _useState[0],
     setValue = _useState[1];
   var setCalendarDate = useCallback(function (date) {
@@ -17,13 +18,13 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
     if (nextValue === void 0) {
       nextValue = value;
     }
-    setValue((_ref2 = (_nextValue = nextValue) !== null && _nextValue !== void 0 ? _nextValue : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : new Date());
+    setValue((_ref2 = (_nextValue = nextValue) !== null && _nextValue !== void 0 ? _nextValue : defaultDate) !== null && _ref2 !== void 0 ? _ref2 : startOfToday());
   }, [defaultDate, value]);
   useUpdateEffect(function () {
     var _valueRef$current;
     if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
       var _ref3;
-      setCalendarDate((_ref3 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref3 !== void 0 ? _ref3 : new Date());
+      setCalendarDate((_ref3 = value !== null && value !== void 0 ? value : defaultDate) !== null && _ref3 !== void 0 ? _ref3 : startOfToday());
       valueRef.current = value;
     }
   }, [value, defaultDate]);
@@ -32,5 +33,4 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
     setCalendarDate: setCalendarDate,
     resetCalendarDate: resetCalendarDate
   };
-};
-export default useCalendarDate;
+};

package/esm/Calendar/hooks/useCalendarState.d.ts

@@ -0,0 +1,22 @@
+export declare enum CalendarState {
+    'TIME' = "TIME",
+    'MONTH' = "MONTH"
+}
+export interface CalendarStateProps {
+    defaultState?: CalendarState;
+    calendarDate: Date;
+    onMoveForward?: (date: Date) => void;
+    onMoveBackward?: (date: Date) => void;
+    onToggleTimeDropdown?: (toggle: boolean) => void;
+    onToggleMonthDropdown?: (toggle: boolean) => void;
+}
+export declare const useCalendarState: (props: CalendarStateProps) => {
+    calendarState: CalendarState | undefined;
+    handlers: {
+        onMoveForward: (...args: any[]) => any;
+        onMoveBackward: (...args: any[]) => any;
+        onToggleTimeDropdown: (...args: any[]) => any;
+        onToggleMonthDropdown: (...args: any[]) => any;
+    };
+    reset: () => void;
+};

package/esm/Calendar/hooks/useCalendarState.js

@@ -0,0 +1,56 @@
+'use client';
+import { useCallback, useMemo, useState } from 'react';
+import { addMonths } from "../../internals/utils/date/index.js";
+import { useEventCallback } from "../../internals/hooks/index.js";
+export var CalendarState = /*#__PURE__*/function (CalendarState) {
+  CalendarState["TIME"] = "TIME";
+  CalendarState["MONTH"] = "MONTH";
+  return CalendarState;
+}({});
+export var useCalendarState = function useCalendarState(props) {
+  var _useState = useState(props.defaultState),
+    calendarState = _useState[0],
+    setCalendarState = _useState[1];
+  var reset = useCallback(function () {
+    setCalendarState(undefined);
+  }, []);
+  var onMoveForward = useEventCallback(function () {
+    var _props$onMoveForward;
+    (_props$onMoveForward = props.onMoveForward) === null || _props$onMoveForward === void 0 ? void 0 : _props$onMoveForward.call(props, addMonths(props.calendarDate, 1));
+  });
+  var onMoveBackward = useEventCallback(function () {
+    var _props$onMoveBackward;
+    (_props$onMoveBackward = props.onMoveBackward) === null || _props$onMoveBackward === void 0 ? void 0 : _props$onMoveBackward.call(props, addMonths(props.calendarDate, -1));
+  });
+  var onToggleTimeDropdown = useEventCallback(function () {
+    var _props$onToggleTimeDr;
+    if (calendarState === CalendarState.TIME) {
+      reset();
+    } else {
+      setCalendarState(CalendarState.TIME);
+    }
+    (_props$onToggleTimeDr = props.onToggleTimeDropdown) === null || _props$onToggleTimeDr === void 0 ? void 0 : _props$onToggleTimeDr.call(props, calendarState !== CalendarState.TIME);
+  });
+  var onToggleMonthDropdown = useEventCallback(function () {
+    var _props$onToggleMonthD;
+    if (calendarState === CalendarState.MONTH) {
+      reset();
+    } else {
+      setCalendarState(CalendarState.MONTH);
+    }
+    (_props$onToggleMonthD = props.onToggleMonthDropdown) === null || _props$onToggleMonthD === void 0 ? void 0 : _props$onToggleMonthD.call(props, calendarState !== CalendarState.MONTH);
+  });
+  var handlers = useMemo(function () {
+    return {
+      onMoveForward: onMoveForward,
+      onMoveBackward: onMoveBackward,
+      onToggleTimeDropdown: onToggleTimeDropdown,
+      onToggleMonthDropdown: onToggleMonthDropdown
+    };
+  }, [onMoveBackward, onMoveForward, onToggleMonthDropdown, onToggleTimeDropdown]);
+  return {
+    calendarState: calendarState,
+    handlers: handlers,
+    reset: reset
+  };
+};

package/esm/Calendar/index.d.ts

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

package/esm/Calendar/index.js

@@ -1,7 +1,6 @@
 'use client';
 import Calendar from "./Calendar.js";
 import CalendarContainer from "./CalendarContainer.js";
-import { CalendarState } from "./useCalendarState.js";
-import CalendarContext from "./CalendarContext.js";
-export { CalendarContainer, CalendarContext, CalendarState };
+import { CalendarState } from "./hooks/index.js";
+export { CalendarContainer, CalendarState };
 export default Calendar;

package/esm/Calendar/types.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { FixedSizeListProps } from '../internals/Windowing';
+/**
+ * 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;
+}

package/esm/Calendar/types.js

@@ -0,0 +1,2 @@
+'use client';
+export {};

package/esm/Calendar/{utils.js → utils/getAriaLabel.js}

@@ -1,5 +1,5 @@
 'use client';
-import { format as formatDate } from "../internals/utils/date/index.js";
+import { format as formatDate } from "../../internals/utils/date/index.js";
 
 /**
  * Get aria-label for the date.

package/esm/Calendar/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getAriaLabel } from './getAriaLabel';
+export { isEveryDateInMonth } from './isEveryDateInMonth';

package/esm/Calendar/utils/index.js

@@ -0,0 +1,3 @@
+'use client';
+export { getAriaLabel } from "./getAriaLabel.js";
+export { isEveryDateInMonth } from "./isEveryDateInMonth.js";

package/esm/Calendar/utils/isEveryDateInMonth.d.ts

@@ -0,0 +1 @@
+export declare function isEveryDateInMonth(year: number, month: number, predicate: (date: Date) => boolean): boolean;

package/esm/Calendar/utils/isEveryDateInMonth.js

@@ -0,0 +1,11 @@
+'use client';
+import { getDaysInMonth } from "../../internals/utils/date/index.js";
+export function isEveryDateInMonth(year, month, predicate) {
+  var days = getDaysInMonth(new Date(year, month));
+  for (var i = 1; i <= days; i++) {
+    if (!predicate(new Date(year, month, i))) {
+      return false;
+    }
+  }
+  return true;
+}

package/esm/CascadeTree/TreeView.js

@@ -9,8 +9,8 @@ import isNil from 'lodash/isNil';
 import { shallowEqual, mergeRefs } from "../internals/utils/index.js";
 import { useClassNames, useCustom, useEventCallback } from "../internals/hooks/index.js";
 import { ListItem, useCombobox } from "../internals/Picker/index.js";
-import AngleLeftIcon from '@rsuite/icons/legacy/AngleLeft';
-import AngleRightIcon from '@rsuite/icons/legacy/AngleRight';
+import PagePreviousIcon from '@rsuite/icons/PagePrevious';
+import PageNextIcon from '@rsuite/icons/PageNext';
 import getPosition from 'dom-lib/getPosition';
 import scrollTop from 'dom-lib/scrollTop';
 var emptyArray = [];
@@ -110,7 +110,7 @@ var TreeView = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     // Use `value` in keys when If `value` is string or number
     var onlyKey = typeof value === 'number' || typeof value === 'string' ? value : index;
-    var Icon = loading ? SpinnerIcon : rtl ? AngleLeftIcon : AngleRightIcon;
+    var Icon = loading ? SpinnerIcon : rtl ? PagePreviousIcon : PageNextIcon;
     return /*#__PURE__*/React.createElement(ListItem, {
       as: 'li',
       role: "treeitem",

package/esm/CustomProvider/CustomProvider.d.ts

@@ -102,16 +102,41 @@ export interface CustomValue<T = Locale> {
     disableRipple?: boolean;
 }
 export interface CustomProviderProps<T = Locale> extends Partial<CustomValue<T>> {
-    /** Supported themes */
+    /**
+     * Supported themes
+     */
     theme?: 'light' | 'dark' | 'high-contrast';
-    /** The prefix of the component CSS class */
+    /**
+     * The prefix of the component CSS class
+     */
     classPrefix?: string;
-    /** Primary content */
+    /**
+     * The prefix of the icon CSS class
+     */
+    iconClassPrefix?: string;
+    /**
+     * Primary content
+     */
     children?: React.ReactNode;
-    /** Sets a container for toast rendering */
+    /**
+     * Sets a container for toast rendering
+     */
     toastContainer?: HTMLElement | (() => HTMLElement | null) | null;
+    csp?: {
+        /**
+         * Content Security Policy nonce
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+         */
+        nonce?: string;
+    };
+    /**
+     * Disable inline styles
+     * @default false
+     */
+    disableInlineStyles?: boolean;
 }
 declare const CustomContext: React.Context<CustomProviderProps<{
+    code?: string | undefined;
     common?: {
         loading: string;
         emptyMessage: string;
@@ -144,11 +169,14 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         ok: string;
         today: string;
         yesterday: string;
+        now: string;
         hours: string;
         minutes: string;
         seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DatePicker?: {
@@ -162,11 +190,14 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         ok: string;
         today: string;
         yesterday: string;
+        now: string;
         hours: string;
         minutes: string;
         seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     DateRangePicker?: {
@@ -181,11 +212,14 @@ declare const CustomContext: React.Context<CustomProviderProps<{
         ok: string;
         today: string;
         yesterday: string;
+        now: string;
         hours: string;
         minutes: string;
         seconds: string;
         formattedMonthPattern: string;
         formattedDayPattern: string;
+        shortDateFormat: string;
+        shortTimeFormat: string;
         dateLocale: any;
     } | undefined;
     Picker?: {

package/esm/CustomProvider/CustomProvider.js

@@ -1,8 +1,9 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "classPrefix", "theme", "toastContainer", "disableRipple"];
-import React from 'react';
+var _excluded = ["children", "classPrefix", "iconClassPrefix", "theme", "toastContainer", "disableRipple", "csp", "disableInlineStyles"];
+import React, { useRef, useMemo } from 'react';
+import IconProvider from '@rsuite/icons/IconProvider';
 import { usePortal, useIsomorphicLayoutEffect } from "../internals/hooks/index.js";
 import { getClassNamePrefix, prefix } from "../internals/utils/prefix.js";
 import { addClass, removeClass, canUseDOM } from "../DOMHelper/index.js";
@@ -19,17 +20,21 @@ var CustomProvider = function CustomProvider(props) {
   var children = props.children,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? getClassNamePrefix() : _props$classPrefix,
+    _props$iconClassPrefi = props.iconClassPrefix,
+    iconClassPrefix = _props$iconClassPrefi === void 0 ? classPrefix : _props$iconClassPrefi,
     theme = props.theme,
     container = props.toastContainer,
     disableRipple = props.disableRipple,
+    csp = props.csp,
+    disableInlineStyles = props.disableInlineStyles,
     rest = _objectWithoutPropertiesLoose(props, _excluded);
-  var toasters = React.useRef(new Map());
+  var toasters = useRef(new Map());
   var _usePortal = usePortal({
       container: container,
       waitMount: true
     }),
     Portal = _usePortal.Portal;
-  var value = React.useMemo(function () {
+  var value = useMemo(function () {
     return _extends({
       classPrefix: classPrefix,
       theme: theme,
@@ -37,6 +42,13 @@ var CustomProvider = function CustomProvider(props) {
       disableRipple: disableRipple
     }, rest);
   }, [classPrefix, theme, disableRipple, rest]);
+  var iconContext = useMemo(function () {
+    return {
+      classPrefix: iconClassPrefix,
+      csp: csp,
+      disableInlineStyles: disableInlineStyles
+    };
+  }, [iconClassPrefix, csp, disableInlineStyles]);
   useIsomorphicLayoutEffect(function () {
     if (canUseDOM && theme) {
       addClass(document.body, prefix(classPrefix, "theme-" + theme));
@@ -51,8 +63,10 @@ var CustomProvider = function CustomProvider(props) {
   }, [classPrefix, theme]);
   return /*#__PURE__*/React.createElement(CustomContext.Provider, {
     value: value
+  }, /*#__PURE__*/React.createElement(IconProvider, {
+    value: iconContext
   }, children, /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
-    className: "rs-toast-provider"
+    className: classPrefix + "toast-provider"
   }, toastPlacements.map(function (placement) {
     return /*#__PURE__*/React.createElement(ToastContainer, {
       key: placement,
@@ -61,7 +75,7 @@ var CustomProvider = function CustomProvider(props) {
         toasters.current.set(placement, _ref);
       }
     });
-  }))));
+  })))));
 };
 export { CustomContext };
 export default CustomProvider;

package/esm/DateInput/DateField.js

@@ -13,7 +13,7 @@ export var patternMap = {
   h: 'hour',
   m: 'minute',
   s: 'second',
-  a: 'meridian'
+  a: 'meridiem'
 };
 export var DateField = /*#__PURE__*/function (_Object) {
   function DateField(format, value) {
@@ -183,7 +183,7 @@ export var useDateField = function useDateField(format, localize, date) {
       // Invalid Date. If the type is day and the value is 0, it is considered an invalid date.
       return new Date('');
     }
-    if (type === 'meridian' && typeof hour === 'number') {
+    if (type === 'meridiem' && typeof hour === 'number') {
       var newHour = hour > 12 ? hour - 12 : hour + 12;
       type = 'hour';
       value = newHour;

package/esm/DateInput/DateInput.js

@@ -20,8 +20,11 @@ import useSelectedState from "./hooks/useSelectedState.js";
  * @see https://rsuitejs.com/components/date-input/
  */
 var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useCustom = useCustom('Calendar'),
+    locale = _useCustom.locale,
+    parseDate = _useCustom.parseDate;
   var _props$format = props.format,
-    formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
+    formatStr = _props$format === void 0 ? locale.shortDateFormat : _props$format,
     valueProp = props.value,
     defaultValue = props.defaultValue,
     placeholder = props.placeholder,
@@ -35,9 +38,6 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useSelectedState = useSelectedState(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var _useCustom = useCustom('Calendar'),
-    locale = _useCustom.locale,
-    parseDate = _useCustom.parseDate;
   var dateLocale = locale.dateLocale;
   var _useControlled = useControlled(valueProp, defaultValue),
     value = _useControlled[0],
@@ -70,11 +70,17 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       dateString: dateString
     };
   }, [dateField, dateString, formatStr, dateLocale]);
+  var setSelectionRange = useInputSelection(inputRef);
   var handleChange = useEventCallback(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
     setValue(value);
   });
-  var setSelectionRange = useInputSelection(inputRef);
+  var handleClear = useEventCallback(function (event) {
+    handleChange(null, event);
+    setNewDate(null);
+    setSelectionRange(0, 0);
+    reset();
+  });
   var onSegmentChange = useEventCallback(function (event, nextDirection) {
     var input = event.target;
     var key = event.key;
@@ -142,7 +148,12 @@ var DateInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
   var onSegmentValueRemove = useEventCallback(function (event) {
     var input = event.target;
-    if (selectedState.selectedPattern) {
+    var value = input.value;
+
+    // If the text is all selected, clear the value
+    if (input.selectionStart === 0 && value && input.selectionEnd === value.length) {
+      handleClear(event);
+    } else if (selectedState.selectedPattern) {
       var nextState = getInputSelectedState(_extends({}, keyPressOptions, {
         input: input,
         valueOffset: null

package/esm/DateInput/hooks/useDateInputState.js

@@ -64,7 +64,7 @@ export function useDateInputState(_ref) {
         value = hour >= 12 ? hour - 12 : hour + 12;
         break;
     }
-    if (actionName && value) {
+    if (actionName && typeof value === 'number') {
       dispatch({
         type: actionName,
         value: value

package/esm/DatePicker/DatePicker.d.ts

@@ -3,7 +3,7 @@ import { RangeType } from './Toolbar';
 import type { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../internals/types';
 import type { DatePickerLocale } from '../locales';
 import type { DeprecatedProps } from './types';
-import type { MonthDropdownProps } from '../Calendar/CalendarContext';
+import type { MonthDropdownProps } from '../Calendar/types';
 export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, DeprecatedProps {
     /**
      * Custom caret component
@@ -75,9 +75,13 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
      */
     showWeekNumbers?: boolean;
     /**
-     * Meridian format for 12-hour time
+     * @deprecated Use `showMeridiem` instead
      */
     showMeridian?: boolean;
+    /**
+     * Meridiem format for 12-hour time
+     */
+    showMeridiem?: boolean;
     /**
      * The props for the Month Dropdown component.
      */