rsuite 5.60.2 → 5.62.0

package/esm/DatePicker/DatePicker.js

@@ -9,21 +9,23 @@ import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
-import CalendarContainer from '../Calendar/CalendarContainer';
-import useCalendarDate from '../Calendar/useCalendarDate';
-import { isEveryDateInMonth } from '../Calendar/MonthDropdown';
-import Toolbar from './Toolbar';
-import Stack from '../Stack';
-import PredefinedRanges from './PredefinedRanges';
-import { mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEventCallback, partitionHTMLProps } from '../utils';
-import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, isValid, disableTime, copyTime, calendarOnlyProps } from '../utils/dateUtils';
-import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from '../internals/Picker';
-import { OverlayCloseCause } from '../internals/Overlay/OverlayTrigger';
-import DateInput from '../DateInput';
-import InputGroup from '../InputGroup';
-import { splitRanges, deprecatedPropTypes, getRestProps } from './utils';
-import useMonthView from './hooks/useMonthView';
-import useFocus from './hooks/useFocus';
+import CalendarContainer from "../Calendar/CalendarContainer";
+import useCalendarDate from "../Calendar/useCalendarDate";
+import { isEveryDateInMonth } from "../Calendar/MonthDropdown";
+import Toolbar from "./Toolbar";
+import Stack from "../Stack";
+import PredefinedRanges from "./PredefinedRanges";
+import { mergeRefs, partitionHTMLProps, createChainedFunction } from "../internals/utils";
+import { useClassNames, useControlled, useCustom, useUniqueId, useEventCallback } from "../internals/hooks";
+import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, isValid, copyTime, disableTime, calendarOnlyProps } from "../internals/utils/date";
+import { PickerPopup, PickerLabel, PickerIndicator, PickerToggleTrigger, pickerPropTypes, pickTriggerPropKeys, usePickerClassName, usePickerRef, onMenuKeyDown } from "../internals/Picker";
+import { OverlayCloseCause } from "../internals/Overlay/OverlayTrigger";
+import DateInput from "../DateInput";
+import InputGroup from "../InputGroup";
+import { splitRanges, deprecatedPropTypes, getRestProps } from "./utils";
+import useMonthView from "./hooks/useMonthView";
+import useFocus from "./hooks/useFocus";
+import useCustomizedInput from "./hooks/useCustomizedInput";
 /**
  * A date picker allows users to select a date from a calendar.
  *
@@ -49,6 +51,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     idProp = props.id,
     isoWeek = props.isoWeek,
+    _props$weekStart = props.weekStart,
+    weekStart = _props$weekStart === void 0 ? 0 : _props$weekStart,
     _props$limitEndYear = props.limitEndYear,
     limitEndYear = _props$limitEndYear === void 0 ? 1000 : _props$limitEndYear,
     limitStartYear = props.limitStartYear,
@@ -78,8 +82,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange = props.onChange,
     onChangeCalendarDate = props.onChangeCalendarDate,
     onClean = props.onClean,
-    onEntered = props.onEntered,
-    onExited = props.onExited,
+    onEnter = props.onEnter,
+    onExit = props.onExit,
     onNextMonth = props.onNextMonth,
     onOk = props.onOk,
     onPrevMonth = props.onPrevMonth,
@@ -88,11 +92,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onToggleTimeDropdown = props.onToggleTimeDropdown,
     onShortcutClick = props.onShortcutClick,
     renderCell = props.renderCell,
+    renderValue = props.renderValue,
     DEPRECATED_disabledDate = props.disabledDate,
     DEPRECATED_disabledHours = props.disabledHours,
     DEPRECATED_disabledMinutes = props.disabledMinutes,
     DEPRECATED_disabledSeconds = props.disabledSeconds,
-    restProps = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEntered", "onExited", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
+    restProps = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "readOnly", "plaintext", "format", "id", "isoWeek", "weekStart", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "size", "caretAs", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "onChange", "onChangeCalendarDate", "onClean", "onEnter", "onExit", "onNextMonth", "onOk", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick", "renderCell", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
   var id = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -402,6 +407,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       limitStartYear: limitStartYear,
       format: formatStr,
       isoWeek: isoWeek,
+      weekStart: weekStart,
       calendarDate: calendarDate,
       renderCellOnPicker: renderCell,
       onMoveForward: handleMoveForward,
@@ -457,14 +463,27 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ariaProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   var invalidValue = value && isErrorValue(value);
+  var customizedProps = {
+    value: value,
+    formatStr: formatStr,
+    renderValue: renderValue,
+    readOnly: readOnly,
+    editable: editable,
+    loading: loading
+  };
+  var _useCustomizedInput = useCustomizedInput(customizedProps),
+    customValue = _useCustomizedInput.customValue,
+    inputReadOnly = _useCustomizedInput.inputReadOnly,
+    Input = _useCustomizedInput.Input,
+    events = _useCustomizedInput.events;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: trigger,
     placement: placement,
     onClose: handleTriggerClose,
-    onEntered: onEntered,
-    onExited: onExited,
+    onEnter: createChainedFunction(events.onActive, onEnter),
+    onExit: createChainedFunction(events.onInactive, onExit),
     speaker: renderCalendarOverlay
   }, /*#__PURE__*/React.createElement(Component, {
     className: merge(className, classes, (_merge = {}, _merge[prefix('error')] = invalidValue, _merge)),
@@ -477,24 +496,24 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, getRestProps(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
+    disabled: disabled,
     onClick: handleClick
   }), /*#__PURE__*/React.createElement(PickerLabel, {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/React.createElement(DateInput, _extends({
+  }, label), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
     "aria-labelledby": label ? id + "-label" : undefined
   }, ariaProps, {
     ref: target,
     id: id,
-    value: value,
+    value: customValue || value,
     format: formatStr,
     placeholder: placeholder ? placeholder : formatStr,
     disabled: disabled,
+    readOnly: inputReadOnly,
     onChange: handleInputChange,
-    readOnly: readOnly || !editable || loading,
-    plaintext: plaintext,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
     loading: loading,
@@ -516,6 +535,7 @@ DatePicker.propTypes = _extends({}, pickerPropTypes, deprecatedPropTypes, {
   hideMinutes: PropTypes.func,
   hideSeconds: PropTypes.func,
   isoWeek: PropTypes.bool,
+  weekStart: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6]),
   limitEndYear: PropTypes.number,
   limitStartYear: PropTypes.number,
   onChange: PropTypes.func,

package/esm/DatePicker/PredefinedRanges.js

@@ -2,10 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useState } from 'react';
-import Button from '../Button';
-import Stack from '../Stack';
-import { useUpdateEffect } from '../utils';
-import { getDefaultRanges, getRanges } from './utils';
+import Button from "../Button";
+import Stack from "../Stack";
+import { useUpdateEffect } from "../internals/hooks";
+import { getDefaultRanges, getRanges } from "./utils";
 var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
     disableShortcut = props.disableShortcut,

package/esm/DatePicker/Toolbar.js

@@ -2,10 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import Button from '../Button';
-import { useClassNames } from '../utils';
-import PredefinedRanges from './PredefinedRanges';
-import Stack from '../Stack';
+import Button from "../Button";
+import { useClassNames } from "../internals/hooks";
+import PredefinedRanges from "./PredefinedRanges";
+import Stack from "../Stack";
 var OkButton = function OkButton(_ref) {
   var disableOkBtn = _ref.disableOkBtn,
     calendarDate = _ref.calendarDate,

package/esm/DatePicker/hooks/useCustomizedInput.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface UseCustomizedInputProps<T> {
+    value?: T | null;
+    formatStr: string;
+    readOnly?: boolean;
+    editable?: boolean;
+    loading?: boolean;
+    mode?: 'date' | 'dateRange';
+    renderValue?: (value: T, format: string) => string;
+}
+declare function useCustomizedInput<T>(props: UseCustomizedInputProps<T>): {
+    customValue: string | null;
+    Input: import("../../internals/types").RsRefForwardingComponent<"input", import("../../Input").InputProps> | import("react").ForwardRefExoticComponent<import("../../DateInput").DateInputProps & import("react").RefAttributes<unknown>> | import("react").ForwardRefExoticComponent<import("../../DateRangeInput").DateRangeInputProps & import("react").RefAttributes<unknown>>;
+    inputReadOnly: boolean;
+    events: {
+        onActive: () => void;
+        onInactive: () => void;
+    };
+};
+export default useCustomizedInput;

package/esm/DatePicker/hooks/useCustomizedInput.js

@@ -0,0 +1,54 @@
+'use client';
+import { useState, useCallback } from 'react';
+import { isValid } from "../../internals/utils/date";
+import Input from "../../Input";
+import DateInput from "../../DateInput";
+import DateRangeInput from "../../DateRangeInput";
+function useCustomizedInput(props) {
+  var value = props.value,
+    formatStr = props.formatStr,
+    readOnly = props.readOnly,
+    editable = props.editable,
+    loading = props.loading,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'date' : _props$mode,
+    renderValue = props.renderValue;
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var onActive = useCallback(function () {
+    return setActive(true);
+  }, []);
+  var onInactive = useCallback(function () {
+    return setActive(false);
+  }, []);
+
+  // Custom rendering of the selected value
+  var customValue = null;
+
+  // Input box is read-only when the component is uneditable or loading state
+  var inputReadOnly = readOnly || !editable || loading || false;
+
+  // If the component is not active or editable, the custom rendering value is displayed
+  var customized = !active || !editable;
+  if (typeof renderValue === 'function' && value && customized) {
+    if (Array.isArray(value) ? value.every(isValid) : isValid(value)) {
+      customValue = renderValue(value, formatStr);
+
+      // If the custom rendering value, the input box is read-only
+      inputReadOnly = true;
+    }
+  }
+  var TargetInput = mode === 'dateRange' ? DateRangeInput : DateInput;
+  var CustomizedInput = customValue ? Input : TargetInput;
+  return {
+    customValue: customValue,
+    Input: CustomizedInput,
+    inputReadOnly: inputReadOnly,
+    events: {
+      onActive: onActive,
+      onInactive: onInactive
+    }
+  };
+}
+export default useCustomizedInput;

package/esm/DatePicker/hooks/useFocus.js

@@ -2,10 +2,9 @@
 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';
+import { useEventCallback, useCustom } from "../../internals/hooks";
+import { getAriaLabel } from "../../Calendar/utils";
+import { onMenuKeyDown } from "../../internals/Picker/utils";
 function useFocus(props) {
   var target = props.target,
     showMonth = props.showMonth,

package/esm/DatePicker/hooks/useMonthView.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import useEventCallback from '../../utils/useEventCallback';
+import { useEventCallback } from "../../internals/hooks";
 function useMonthView(props) {
   var onToggleMonthDropdown = props.onToggleMonthDropdown;
   var _useState = useState(false),

package/esm/DatePicker/index.js

@@ -1,3 +1,3 @@
 'use client';
-import DatePicker from './DatePicker';
+import DatePicker from "./DatePicker";
 export default DatePicker;

package/esm/DatePicker/types.d.ts

@@ -41,8 +41,4 @@ export interface DeprecatedProps {
      * @deprecated Use {@link shouldDisableSecond} instead
      */
     disabledSeconds?: (second: number, date: Date) => boolean;
-    /**
-     * @deprecated
-     */
-    renderValue?: (value: Date, format: string) => string;
 }

package/esm/DatePicker/utils.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 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';
+import { deprecatePropTypeNew } from "../internals/propTypes";
+import { omitTriggerPropKeys } from "../internals/Picker";
+import { subDays, startOfDay, endOfDay, calendarOnlyProps } from "../internals/utils/date";
 export function getDefaultRanges(value) {
   var today = new Date();
 

package/esm/DateRangeInput/DateRangeInput.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { InputProps } from '../Input';
-import { FormControlBaseProps } from '../@types/common';
+import { FormControlBaseProps } from '@/internals/types';
 declare type ValueType = [Date | null, Date | null] | null;
 export interface DateRangeInputProps extends Omit<InputProps, 'value' | 'onChange' | 'defaultValue'>, FormControlBaseProps<ValueType> {
     /**

package/esm/DateRangeInput/DateRangeInput.js

@@ -3,10 +3,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useState, useRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import Input from '../Input';
-import { mergeRefs, useClassNames, useCustom, useControlled, useEventCallback } from '../utils';
-import { validateDateTime, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused, useSelectedState, useFieldCursor } from '../DateInput';
-import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from './utils';
+import Input from "../Input";
+import { useClassNames, useCustom, useControlled, useEventCallback } from "../internals/hooks";
+import { mergeRefs } from "../internals/utils";
+import { validateDateTime, useDateInputState, useInputSelection, useKeyboardInputEvent, useIsFocused, useSelectedState, useFieldCursor } from "../DateInput";
+import { getInputSelectedState, DateType, getDateType, isSwitchDateType } from "./utils";
 /**
  * The DateRangeInput component lets users select a date with the keyboard.
  * @version 5.59.0

package/esm/DateRangeInput/index.js

@@ -1,3 +1,3 @@
 'use client';
-import DateRangeInput from './DateRangeInput';
+import DateRangeInput from "./DateRangeInput";
 export default DateRangeInput;

package/esm/DateRangeInput/utils.js

@@ -1,6 +1,6 @@
 'use client';
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { getSelectIndexGap, isCursorAfterMonth, getDatePattern } from '../DateInput';
+import { getSelectIndexGap, isCursorAfterMonth, getDatePattern } from "../DateInput";
 export var DateType;
 (function (DateType) {
   DateType["Start"] = "Start";

package/esm/DateRangePicker/Calendar.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
+import { DATERANGE_DISABLED_TARGET } from '@/internals/constants';
 import { CalendarProps as CalendarCoreProps } from '../Calendar/CalendarContainer';
 import { DateRange } from './types';
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
+import { RsRefForwardingComponent, WithAsProps } from '@/internals/types';
 import { DatePickerLocale } from '../locales';
-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?: DateRange;
@@ -12,6 +12,7 @@ export interface CalendarProps extends WithAsProps, Omit<CalendarCoreProps, Omit
     hoverRangeValue?: DateRange;
     index: number;
     isoWeek?: boolean;
+    weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
     limitEndYear?: number;
     limitStartYear?: number;
     locale?: DatePickerLocale;

package/esm/DateRangePicker/Calendar.js

@@ -2,10 +2,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
-import PropTypes from 'prop-types';
-import { addMonths } from '../utils/dateUtils';
-import CalendarCore from '../Calendar/CalendarContainer';
-import { DATERANGE_DISABLED_TARGET, useEventCallback } from '../utils';
+import { addMonths } from "../internals/utils/date";
+import { DATERANGE_DISABLED_TARGET } from "../internals/constants";
+import { useEventCallback } from "../internals/hooks";
+import CalendarCore from "../Calendar/CalendarContainer";
 var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? CalendarCore : _props$as,
@@ -75,19 +75,4 @@ var Calendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 Calendar.displayName = 'DateRangePicker.Calendar';
-Calendar.propTypes = {
-  value: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  hoverValue: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  calendarDate: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
-  index: PropTypes.number,
-  format: PropTypes.string,
-  isoWeek: PropTypes.bool,
-  limitEndYear: PropTypes.number,
-  limitStartYear: PropTypes.number,
-  classPrefix: PropTypes.string,
-  disabledDate: PropTypes.func,
-  onSelect: PropTypes.func,
-  onMouseMove: PropTypes.func,
-  onChangeCalendarMonth: PropTypes.func
-};
 export default Calendar;

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -1,36 +1,48 @@
 import React from 'react';
-import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
+import { FormControlBaseProps, PickerBaseProps } from '@/internals/types';
 import { DateRangePickerLocale } from '../locales';
-import { PickerComponent } from '../internals/Picker';
+import { PickerComponent } from '@/internals/Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
 export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLocale>, FormControlBaseProps<DateRange | null> {
-    /** Custom caret component */
+    /**
+     * Custom caret component
+     */
     caretAs?: React.ElementType | null;
     /** Predefined date ranges */
     ranges?: RangeType[];
     /**
      * 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.
-     *
      * @default true
      */
     editable?: boolean;
-    /** The date range that will be selected when you click on the date */
+    /**
+     * The date range that will be selected when you click on the date
+     */
     hoverRange?: 'week' | 'month' | ((date: Date) => DateRange);
-    /** Whether to click once on selected date range，Can be used with hoverRange */
+    /**
+     * 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
-     *
      * @see https://en.wikipedia.org/wiki/ISO_week_date
      */
     isoWeek?: boolean;
-    /** A label displayed at the beginning of toggle button */
+    /**
+     * The index of the first day of the week (0 - Sunday)
+     * If `isoWeek` is `true`, the value of `weekStart` is ignored.
+     *
+     * @default 0
+     */
+    weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * 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.
@@ -38,15 +50,25 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * @default 1000
      */
     limitEndYear?: number;
-    /** Set the lower limit of the available year relative to the current selection date */
+    /**
+     * Set the lower limit of the available year relative to the current selection date
+     */
     limitStartYear?: number;
-    /** Whether to display a loading state indicator */
+    /**
+     * Whether to display a loading state indicator
+     */
     loading?: boolean;
-    /** Whether to show week numbers */
+    /**
+     *  to show week numbers
+     */
     showWeekNumbers?: boolean;
-    /** Show only one calendar select */
+    /**
+     * Show only one calendar select
+     */
     showOneCalendar?: boolean;
-    /** Meridian format */
+    /**
+     * Meridian format
+     */
     showMeridian?: boolean;
     /**
      * Whether to display the formatted date range at the header of the calendar
@@ -54,13 +76,17 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * @version 5.52.0
      */
     showHeader?: boolean;
-    /** Set default date for calendar */
+    /**
+     * Set default date for calendar
+     */
     defaultCalendarValue?: DateRange;
-    /** The character that separates two dates */
+    /**
+     * The character that separates two dates
+     * @default ' ~ '
+     */
     character?: string;
     /**
      * Disabled date
-     *
      * @deprecated Use {@link shouldDisableDate} instead
      */
     disabledDate?: DisabledDateFunction;
@@ -68,20 +94,29 @@ export interface DateRangePickerProps extends PickerBaseProps<DateRangePickerLoc
      * Whether a date cell is disabled
      */
     shouldDisableDate?: DisabledDateFunction;
-    /** Called when the option is selected */
+    /**
+     * Called when the option is selected
+     */
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
-    /** Called after clicking the OK button */
+    /**
+     * Called after clicking the OK button
+     */
     onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
-    /** Called after clicking the shortcut button */
+    /**
+     * Called after clicking the shortcut button
+     */
     onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;
-    /** Called when clean */
+    /**
+     * Called when the value is cleared
+     */
     onClean?: (event: React.MouseEvent) => void;
     /**
-     * Custom render value
-     * @deprecated
+     * Custom rendering of the selected date range.
+     */
+    renderValue?: (value: DateRange, format: string) => string;
+    /**
+     * Custom render for calendar title
      */
-    renderValue?: (value: DateRange, format: string) => React.ReactNode;
-    /** Custom render for calendar title */
     renderTitle?: (date: Date) => React.ReactNode;
 }
 export interface DateRangePickerComponent extends PickerComponent<DateRangePickerProps> {