rsuite 5.60.2 → 5.62.0

package/cjs/DatePicker/hooks/useCustomizedInput.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _date = require("../../internals/utils/date");
+var _Input = _interopRequireDefault(require("../../Input"));
+var _DateInput = _interopRequireDefault(require("../../DateInput"));
+var _DateRangeInput = _interopRequireDefault(require("../../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 = (0, _react.useState)(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var onActive = (0, _react.useCallback)(function () {
+    return setActive(true);
+  }, []);
+  var onInactive = (0, _react.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(_date.isValid) : (0, _date.isValid)(value)) {
+      customValue = renderValue(value, formatStr);
+
+      // If the custom rendering value, the input box is read-only
+      inputReadOnly = true;
+    }
+  }
+  var TargetInput = mode === 'dateRange' ? _DateRangeInput.default : _DateInput.default;
+  var CustomizedInput = customValue ? _Input.default : TargetInput;
+  return {
+    customValue: customValue,
+    Input: CustomizedInput,
+    inputReadOnly: inputReadOnly,
+    events: {
+      onActive: onActive,
+      onInactive: onInactive
+    }
+  };
+}
+var _default = useCustomizedInput;
+exports.default = _default;

package/cjs/DatePicker/hooks/useFocus.js

@@ -7,16 +7,15 @@ exports.default = void 0;
 var _delay = _interopRequireDefault(require("lodash/delay"));
 var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
 var _addDays = _interopRequireDefault(require("date-fns/addDays"));
-var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+var _hooks = require("../../internals/hooks");
 var _utils = require("../../Calendar/utils");
-var _utils2 = require("../../utils");
-var _utils3 = require("../../internals/Picker/utils");
+var _utils2 = require("../../internals/Picker/utils");
 function useFocus(props) {
   var target = props.target,
     showMonth = props.showMonth,
     id = props.id,
     localeProp = props.locale;
-  var _useCustom = (0, _utils2.useCustom)('DatePicker', localeProp),
+  var _useCustom = (0, _hooks.useCustom)('DatePicker', localeProp),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate;
   /**
@@ -54,19 +53,19 @@ function useFocus(props) {
   /**
    * Focus on the input element
    */
-  var focusInput = (0, _useEventCallback.default)(function () {
+  var focusInput = (0, _hooks.useEventCallback)(function () {
     (0, _delay.default)(function () {
       var _target$current;
       return (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
     }, 1);
   });
-  var onKeyFocusEvent = (0, _useEventCallback.default)(function (event, options) {
+  var onKeyFocusEvent = (0, _hooks.useEventCallback)(function (event, options) {
     var date = options.date,
       callback = options.callback;
     var delta = 0;
     var step = showMonth ? 6 : 7;
     var changeDateFunc = showMonth ? _addMonths.default : _addDays.default;
-    (0, _utils3.onMenuKeyDown)(event, {
+    (0, _utils2.onMenuKeyDown)(event, {
       down: function down() {
         delta = step;
       },

package/cjs/DatePicker/hooks/useMonthView.js

@@ -1,11 +1,10 @@
 'use client';
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _react = require("react");
-var _useEventCallback = _interopRequireDefault(require("../../utils/useEventCallback"));
+var _hooks = require("../../internals/hooks");
 function useMonthView(props) {
   var onToggleMonthDropdown = props.onToggleMonthDropdown;
   var _useState = (0, _react.useState)(false),
@@ -14,7 +13,7 @@ function useMonthView(props) {
   /**
    * The callback triggered after the month selection box is opened or closed.
    */
-  var toggleMonthView = (0, _useEventCallback.default)(function (show) {
+  var toggleMonthView = (0, _hooks.useEventCallback)(function (show) {
     onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(show);
     setMonthView(show);
   });

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

@@ -12,7 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _propTypes2 = require("../internals/propTypes");
 var _Picker = require("../internals/Picker");
-var _dateUtils = require("../utils/dateUtils");
+var _date = require("../internals/utils/date");
 function getDefaultRanges(value) {
   var today = new Date();
 
@@ -23,13 +23,13 @@ function getDefaultRanges(value) {
   if (value instanceof Array) {
     return [{
       label: 'today',
-      value: [(0, _dateUtils.startOfDay)(today), (0, _dateUtils.endOfDay)(today)]
+      value: [(0, _date.startOfDay)(today), (0, _date.endOfDay)(today)]
     }, {
       label: 'yesterday',
-      value: [(0, _dateUtils.startOfDay)((0, _dateUtils.subDays)(today, 1)), (0, _dateUtils.endOfDay)((0, _dateUtils.subDays)(today, 1))]
+      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 1)), (0, _date.endOfDay)((0, _date.subDays)(today, 1))]
     }, {
       label: 'last7Days',
-      value: [(0, _dateUtils.startOfDay)((0, _dateUtils.subDays)(today, 6)), (0, _dateUtils.endOfDay)(today)]
+      value: [(0, _date.startOfDay)((0, _date.subDays)(today, 6)), (0, _date.endOfDay)(today)]
     }];
   }
   return [{
@@ -37,7 +37,7 @@ function getDefaultRanges(value) {
     value: today
   }, {
     label: 'yesterday',
-    value: (0, _dateUtils.subDays)(today, 1)
+    value: (0, _date.subDays)(today, 1)
   }];
 }
 var generateRangesIterator = function generateRangesIterator(_ref) {
@@ -90,6 +90,6 @@ var getRestProps = function getRestProps(props, omitProps) {
   if (omitProps === void 0) {
     omitProps = [];
   }
-  return (0, _omit.default)(props, [].concat(_Picker.omitTriggerPropKeys, _dateUtils.calendarOnlyProps, omitProps));
+  return (0, _omit.default)(props, [].concat(_Picker.omitTriggerPropKeys, _date.calendarOnlyProps, omitProps));
 };
 exports.getRestProps = getRestProps;

package/cjs/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/cjs/DateRangeInput/DateRangeInput.js

@@ -10,7 +10,8 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Input = _interopRequireDefault(require("../Input"));
-var _utils = require("../utils");
+var _hooks = require("../internals/hooks");
+var _utils = require("../internals/utils");
 var _DateInput = require("../DateInput");
 var _utils2 = require("./utils");
 /**
@@ -35,7 +36,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "character", "format", "value", "defaultValue", "placeholder", "onChange", "onKeyDown", "onBlur", "onFocus"]);
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
+  var _useClassNames = (0, _hooks.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix());
@@ -43,11 +44,11 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
   var _useSelectedState = (0, _DateInput.useSelectedState)(),
     selectedState = _useSelectedState.selectedState,
     setSelectedState = _useSelectedState.setSelectedState;
-  var _useCustom = (0, _utils.useCustom)('Calendar'),
+  var _useCustom = (0, _hooks.useCustom)('Calendar'),
     locale = _useCustom.locale;
   var rangeFormatStr = "" + formatStr + character + formatStr;
   var dateLocale = locale.dateLocale;
-  var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
+  var _useControlled = (0, _hooks.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
     setValue = _useControlled[1],
     isControlled = _useControlled[2];
@@ -98,12 +99,12 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     character: character
   };
   var setSelectionRange = (0, _DateInput.useInputSelection)(inputRef);
-  var handleChange = (0, _utils.useEventCallback)(function (date, event) {
+  var handleChange = (0, _hooks.useEventCallback)(function (date, event) {
     var nextValue = dateType === _utils2.DateType.Start ? [date, value === null || value === void 0 ? void 0 : value[1]] : [value === null || value === void 0 ? void 0 : value[0], date];
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
     setValue(nextValue);
   });
-  var onSegmentChange = (0, _utils.useEventCallback)(function (event, nextDirection) {
+  var onSegmentChange = (0, _hooks.useEventCallback)(function (event, nextDirection) {
     var input = event.target;
     var key = event.key;
     var direction = nextDirection || (key === 'ArrowRight' ? 'right' : 'left');
@@ -126,7 +127,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     setSelectionRange(state.selectionStart, state.selectionEnd);
     reset();
   });
-  var onSegmentValueChange = (0, _utils.useEventCallback)(function (event) {
+  var onSegmentValueChange = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
     var key = event.key;
     var offset = key === 'ArrowUp' ? 1 : -1;
@@ -140,7 +141,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     });
     setSelectionRange(state.selectionStart, state.selectionEnd);
   });
-  var onSegmentValueChangeWithNumericKeys = (0, _utils.useEventCallback)(function (event) {
+  var onSegmentValueChangeWithNumericKeys = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
     var key = event.key;
     var pattern = selectedState.selectedPattern;
@@ -176,7 +177,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       onSegmentChange(event, 'right');
     }
   });
-  var onSegmentValueRemove = (0, _utils.useEventCallback)(function (event) {
+  var onSegmentValueRemove = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
     if (selectedState.selectedPattern) {
       var nextState = (0, _utils2.getInputSelectedState)((0, _extends2.default)({}, keyPressOptions, {
@@ -191,7 +192,7 @@ var DateRangeInput = /*#__PURE__*/_react.default.forwardRef(function (props, ref
       reset();
     }
   });
-  var handleClick = (0, _utils.useEventCallback)(function (event) {
+  var handleClick = (0, _hooks.useEventCallback)(function (event) {
     var input = event.target;
     if (input.selectionStart === null) {
       return;

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

@@ -7,15 +7,15 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _dateUtils = require("../utils/dateUtils");
+var _date = require("../internals/utils/date");
+var _constants = require("../internals/constants");
+var _hooks = require("../internals/hooks");
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
-var _utils = require("../utils");
 var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? _CalendarContainer.default : _props$as,
     _props$calendarDate = props.calendarDate,
-    calendarDate = _props$calendarDate === void 0 ? [new Date(), (0, _dateUtils.addMonths)(new Date(), 1)] : _props$calendarDate,
+    calendarDate = _props$calendarDate === void 0 ? [new Date(), (0, _date.addMonths)(new Date(), 1)] : _props$calendarDate,
     _props$format = props.format,
     format = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
     disabledDate = props.disabledDate,
@@ -30,35 +30,35 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     _props$value = props.value,
     value = _props$value === void 0 ? [] : _props$value,
     rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "calendarDate", "format", "disabledDate", "index", "limitEndYear", "limitStartYear", "onChangeCalendarMonth", "onChangeCalendarTime", "onToggleMeridian", "onSelect", "value"]);
-  var onMoveForward = (0, _utils.useEventCallback)(function (nextPageDate) {
+  var onMoveForward = (0, _hooks.useEventCallback)(function (nextPageDate) {
     onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
   });
-  var onMoveBackward = (0, _utils.useEventCallback)(function (nextPageDate) {
+  var onMoveBackward = (0, _hooks.useEventCallback)(function (nextPageDate) {
     onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
   });
-  var handleSelect = (0, _utils.useEventCallback)(function (date, event) {
+  var handleSelect = (0, _hooks.useEventCallback)(function (date, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(index, date, event);
   });
-  var handleChangeMonth = (0, _utils.useEventCallback)(function (nextPageDate) {
+  var handleChangeMonth = (0, _hooks.useEventCallback)(function (nextPageDate) {
     onChangeCalendarMonth === null || onChangeCalendarMonth === void 0 ? void 0 : onChangeCalendarMonth(index, nextPageDate);
   });
-  var handleChangeTime = (0, _utils.useEventCallback)(function (nextPageDate) {
+  var handleChangeTime = (0, _hooks.useEventCallback)(function (nextPageDate) {
     onChangeCalendarTime === null || onChangeCalendarTime === void 0 ? void 0 : onChangeCalendarTime(index, nextPageDate);
   });
-  var handleToggleMeridian = (0, _utils.useEventCallback)(function (event) {
+  var handleToggleMeridian = (0, _hooks.useEventCallback)(function (event) {
     onToggleMeridian(index, event);
   });
   var getCalendarDate = function getCalendarDate() {
     return calendarDate[index];
   };
-  var handleMoveForward = (0, _utils.useEventCallback)(function () {
-    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward((0, _dateUtils.addMonths)(getCalendarDate(), 1));
+  var handleMoveForward = (0, _hooks.useEventCallback)(function () {
+    onMoveForward === null || onMoveForward === void 0 ? void 0 : onMoveForward((0, _date.addMonths)(getCalendarDate(), 1));
   });
-  var handleMoveBackward = (0, _utils.useEventCallback)(function () {
-    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _dateUtils.addMonths)(getCalendarDate(), -1));
+  var handleMoveBackward = (0, _hooks.useEventCallback)(function () {
+    onMoveBackward === null || onMoveBackward === void 0 ? void 0 : onMoveBackward((0, _date.addMonths)(getCalendarDate(), -1));
   });
   var disabledMonth = function disabledMonth(date) {
-    return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _utils.DATERANGE_DISABLED_TARGET.CALENDAR);
+    return disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date, value, _constants.DATERANGE_DISABLED_TARGET.CALENDAR);
   };
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     "data-testid": "calendar-" + (index === 0 ? 'start' : 'end')
@@ -80,20 +80,5 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }));
 });
 Calendar.displayName = 'DateRangePicker.Calendar';
-Calendar.propTypes = {
-  value: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
-  hoverValue: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
-  calendarDate: _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date)),
-  index: _propTypes.default.number,
-  format: _propTypes.default.string,
-  isoWeek: _propTypes.default.bool,
-  limitEndYear: _propTypes.default.number,
-  limitStartYear: _propTypes.default.number,
-  classPrefix: _propTypes.default.string,
-  disabledDate: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  onMouseMove: _propTypes.default.func,
-  onChangeCalendarMonth: _propTypes.default.func
-};
 var _default = Calendar;
 exports.default = _default;

package/cjs/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> {