rsuite 5.60.2 → 5.61.0

package/cjs/CheckTreePicker/hooks/useFocusState.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface FocusStateProps {
+    target: React.RefObject<HTMLElement>;
+    onEnter?: (node: HTMLElement) => void;
+    onExit?: (node: HTMLElement) => void;
+}
+declare function useFocusState(props: FocusStateProps): {
+    active: boolean;
+    focusItemValue: string | number | null | undefined;
+    setFocusItemValue: import("react").Dispatch<import("react").SetStateAction<string | number | null | undefined>>;
+    triggerProps: {
+        onEnter: (...args: any[]) => any;
+        onExit: (...args: any[]) => any;
+    };
+};
+export default useFocusState;

package/cjs/CheckTreePicker/hooks/useFocusState.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+var _utils = require("../../utils");
+function useFocusState(props) {
+  var target = props.target;
+  var _useState = (0, _react.useState)(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = (0, _react.useState)(null),
+    focusItemValue = _useState2[0],
+    setFocusItemValue = _useState2[1];
+  var focusTarget = (0, _utils.useEventCallback)(function () {
+    var _target$current;
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var onEnter = (0, _utils.useEventCallback)(function (node) {
+    var _props$onEnter;
+    setActive(true);
+    (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 ? void 0 : _props$onEnter.call(props, node);
+  });
+  var onExit = (0, _utils.useEventCallback)(function (node) {
+    var _props$onExit;
+    setActive(false);
+    focusTarget();
+    (_props$onExit = props.onExit) === null || _props$onExit === void 0 ? void 0 : _props$onExit.call(props, node);
+  });
+  return {
+    active: active,
+    focusItemValue: focusItemValue,
+    setFocusItemValue: setFocusItemValue,
+    triggerProps: {
+      onEnter: onEnter,
+      onExit: onExit
+    }
+  };
+}
+var _default = useFocusState;
+exports.default = _default;

package/cjs/DatePicker/DatePicker.d.ts

@@ -82,6 +82,10 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
+    /**
+     * Custom rendering of the selected date.
+     */
+    renderValue?: (value: Date, format: string) => string;
     /**
      * Custom rendering calendar cell content.
      *

package/cjs/DatePicker/DatePicker.js

@@ -24,6 +24,7 @@ var _utils = require("../utils");
 var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../internals/Picker");
 var _OverlayTrigger = require("../internals/Overlay/OverlayTrigger");
+var _Input = _interopRequireDefault(require("../Input"));
 var _DateInput = _interopRequireDefault(require("../DateInput"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _utils2 = require("./utils");
@@ -94,11 +95,12 @@ var DatePicker = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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", "renderValue", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -463,6 +465,19 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     ariaProps = _partitionHTMLProps[0],
     rest = _partitionHTMLProps[1];
   var invalidValue = value && isErrorValue(value);
+
+  // 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 (typeof renderValue === 'function' && value) {
+    customValue = renderValue(value, formatStr);
+
+    // If the custom rendering value, the input box is read-only
+    inputReadOnly = true;
+  }
+  var TargetInput = customValue ? _Input.default : _DateInput.default;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
@@ -483,24 +498,24 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _utils2.getRestProps)(rest, usedClassNamePropKeys), {
     inside: true,
     size: size,
+    disabled: disabled,
     onClick: handleClick
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/_react.default.createElement(_DateInput.default, (0, _extends2.default)({
+  }, label), /*#__PURE__*/_react.default.createElement(TargetInput, (0, _extends2.default)({
     "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,
     onChange: handleInputChange,
-    readOnly: readOnly || !editable || loading,
-    plaintext: plaintext,
+    readOnly: inputReadOnly,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/_react.default.createElement(_Picker.PickerIndicator, {
     loading: loading,

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/DateRangePicker/DateRangePicker.d.ts

@@ -4,33 +4,38 @@ import { DateRangePickerLocale } from '../locales';
 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 */
+    /**
+     * 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 +43,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 +69,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 +87,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> {

package/cjs/DateRangePicker/DateRangePicker.js

@@ -27,8 +27,10 @@ var _utils2 = require("./utils");
 var _propTypes2 = require("../internals/propTypes");
 var _DateRangePickerContext = _interopRequireDefault(require("./DateRangePickerContext"));
 var _DateRangeInput = _interopRequireDefault(require("../DateRangeInput"));
+var _Input = _interopRequireDefault(require("../Input"));
 var _InputGroup = _interopRequireDefault(require("../InputGroup"));
 var _Header = _interopRequireDefault(require("./Header"));
+var _useDateDisabled = _interopRequireDefault(require("./hooks/useDateDisabled"));
 var _templateObject;
 /**
  * A date range picker allows you to select a date range from a calendar.
@@ -54,7 +56,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     defaultValue = props.defaultValue,
     plaintext = props.plaintext,
     disabled = props.disabled,
-    DEPRECATED_disabledDateProp = props.disabledDate,
+    DEPRECATED_disabledDate = props.disabledDate,
     shouldDisableDate = props.shouldDisableDate,
     _props$format = props.format,
     formatStr = _props$format === void 0 ? 'yyyy-MM-dd' : _props$format,
@@ -96,7 +98,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onEntered", "onExited", "onOk", "onSelect", "onShortcutClick", "renderTitle"]);
+    renderValue = props.renderValue,
+    restProps = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "plaintext", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "id", "isoWeek", "limitEndYear", "limitStartYear", "locale", "loading", "label", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "readOnly", "showOneCalendar", "showWeekNumbers", "showMeridian", "showHeader", "style", "size", "caretAs", "value", "onChange", "onClean", "onEnter", "onEntered", "onExited", "onOk", "onSelect", "onShortcutClick", "renderTitle", "renderValue"]);
   var id = (0, _utils.useUniqueId)('rs-', idProp);
   var _usePickerRef = (0, _Picker.usePickerRef)(ref),
     trigger = _usePickerRef.trigger,
@@ -150,6 +153,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = (0, _react.useRef)(null);
+
+  /**
+   *
+   * The key of the currently active calendar panel.
+   * Used to switch when only one calendar panel is displayed.
+   */
   var _useState5 = (0, _react.useState)(),
     activeCalendarKey = _useState5[0],
     setActiveCalendarKey = _useState5[1];
@@ -198,9 +207,8 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       setSelectedDates(nextCalendarDate);
     }
   };
-
-  // if valueProp changed then update selectValue/hoverValue
   (0, _react.useEffect)(function () {
+    // If value changes, update the selected and hover date values on the calendar panel.
     setSelectedDates(valueProp !== null && valueProp !== void 0 ? valueProp : []);
     setHoverDateRange(valueProp !== null && valueProp !== void 0 ? valueProp : null);
   }, [valueProp]);
@@ -481,41 +489,39 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     });
     setDateRange(event, selectValue);
   });
-  var isDateDisabled = function isDateDisabled(date, options) {
-    var selectDate = options.selectDate,
-      selectedDone = options.selectedDone,
-      target = options.target;
-    if (typeof shouldDisableDate === 'function') {
-      return shouldDisableDate(date, selectDate, selectedDone, target);
-    }
-    if (typeof DEPRECATED_disabledDateProp === 'function') {
-      return DEPRECATED_disabledDateProp(date, selectDate, selectedDone, target);
+  var isDateDisabled = (0, _useDateDisabled.default)({
+    shouldDisableDate: shouldDisableDate,
+    DEPRECATED_disabledDate: DEPRECATED_disabledDate
+  });
+  var disableByRange = function disableByRange(start, end, target) {
+    if (isDateDisabled) {
+      // If the date is between the start and the end the button is disabled
+      while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
+        if (isDateDisabled(start, {
+          selectDate: selectedDates,
+          selectedDone: isSelectedIdle,
+          target: target
+        })) {
+          return true;
+        }
+        start = (0, _dateUtils.addDays)(start, 1);
+      }
     }
     return false;
   };
-  var disableByBetween = function disableByBetween(start, end, type) {
-    // If the date is between the start and the end
-    // the button is disabled
-    while ((0, _dateUtils.isBefore)(start, end) || (0, _dateUtils.isSameDay)(start, end)) {
-      if (isDateDisabled(start, {
-        selectDate: selectedDates,
-        selectedDone: isSelectedIdle,
-        target: type
-      })) {
+  var disableOkButton = function disableOkButton() {
+    var _trigger$current;
+    var _ref4 = ((_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : _trigger$current.getState()) || {},
+      open = _ref4.open;
+    if (open) {
+      var start = selectedDates[0],
+        end = selectedDates[1];
+      if (!start || !end || !isSelectedIdle) {
         return true;
       }
-      start = (0, _dateUtils.addDays)(start, 1);
     }
     return false;
   };
-  var disableOkButton = function disableOkButton() {
-    var start = selectedDates[0],
-      end = selectedDates[1];
-    if (!start || !end || !isSelectedIdle) {
-      return true;
-    }
-    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_BUTTON_OK);
-  };
   var disableShortcut = function disableShortcut(value) {
     if (value === void 0) {
       value = [];
@@ -526,26 +532,33 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (!start || !end) {
       return true;
     }
-    return disableByBetween(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
+    return disableByRange(start, end, _utils.DATERANGE_DISABLED_TARGET.TOOLBAR_SHORTCUT);
   };
   var handleClose = (0, _utils.useEventCallback)(function () {
-    var _trigger$current, _trigger$current$clos;
-    (_trigger$current = trigger.current) === null || _trigger$current === void 0 ? void 0 : (_trigger$current$clos = _trigger$current.close) === null || _trigger$current$clos === void 0 ? void 0 : _trigger$current$clos.call(_trigger$current);
+    var _trigger$current2, _trigger$current2$clo;
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : (_trigger$current2$clo = _trigger$current2.close) === null || _trigger$current2$clo === void 0 ? void 0 : _trigger$current2$clo.call(_trigger$current2);
   });
   var handleInputKeyDown = (0, _utils.useEventCallback)(function (event) {
     (0, _Picker.onMenuKeyDown)(event, {
       esc: handleClose,
       enter: function enter() {
-        var _trigger$current2;
-        var _ref4 = ((_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 ? void 0 : _trigger$current2.getState()) || {},
-          open = _ref4.open;
+        var _trigger$current3;
+        var _ref5 = ((_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.getState()) || {},
+          open = _ref5.open;
         if (!open) {
-          var _trigger$current3;
-          (_trigger$current3 = trigger.current) === null || _trigger$current3 === void 0 ? void 0 : _trigger$current3.open();
+          var _trigger$current4;
+          (_trigger$current4 = trigger.current) === null || _trigger$current4 === void 0 ? void 0 : _trigger$current4.open();
         }
       }
     });
   });
+  var disableCalendarDate = isDateDisabled ? function (date, values, type) {
+    return isDateDisabled(date, {
+      selectDate: values,
+      selectedDone: isSelectedIdle,
+      target: type
+    });
+  } : undefined;
   var renderCalendarOverlay = function renderCalendarOverlay(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
@@ -566,13 +579,6 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    var disabledDate = function disabledDate(date, values, type) {
-      return isDateDisabled(date, {
-        selectDate: values,
-        selectedDone: isSelectedIdle,
-        target: type
-      });
-    };
     var calendarProps = {
       locale: locale,
       isoWeek: isoWeek,
@@ -584,12 +590,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       format: formatStr,
       value: selectedDates,
       hoverRangeValue: hoverDateRange !== null && hoverDateRange !== void 0 ? hoverDateRange : undefined,
+      disabledDate: disableCalendarDate,
       onSelect: handleSelectDate,
       onChangeCalendarMonth: onChangeCalendarMonth,
       onChangeCalendarTime: onChangeCalendarTime,
       onToggleMeridian: onToggleMeridian,
       onMouseMove: onMouseMove,
-      disabledDate: disabledDate,
       renderTitle: renderTitle
     };
     var getCalendars = function getCalendars() {
@@ -697,7 +703,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       selectedDone: isSelectedIdle,
       target: _utils.DATERANGE_DISABLED_TARGET.INPUT
     };
-    if (isDateDisabled(startDate, disabledOptions) || isDateDisabled(endDate, disabledOptions)) {
+    if (isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(startDate, disabledOptions) || isDateDisabled !== null && isDateDisabled !== void 0 && isDateDisabled(endDate, disabledOptions)) {
       return true;
     }
     return false;
@@ -710,6 +716,19 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rest = _partitionHTMLProps[1];
   var showCleanButton = cleanable && hasValue && !readOnly;
   var invalidValue = value && isErrorValue(value);
+
+  // 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 (typeof renderValue === 'function' && value) {
+    customValue = renderValue(value, formatStr);
+
+    // If the custom rendering value, the input box is read-only
+    inputReadOnly = true;
+  }
+  var TargetInput = customValue ? _Input.default : _DateRangeInput.default;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     ref: trigger,
@@ -729,23 +748,24 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     plaintext: plaintext
   }) : /*#__PURE__*/_react.default.createElement(_InputGroup.default, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
     inside: true,
+    disabled: disabled,
     size: size
   }), /*#__PURE__*/_react.default.createElement(_Picker.PickerLabel, {
     className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/_react.default.createElement(_DateRangeInput.default, (0, _extends2.default)({
+  }, label), /*#__PURE__*/_react.default.createElement(TargetInput, (0, _extends2.default)({
     "aria-haspopup": "dialog",
     "aria-invalid": invalidValue,
     "aria-labelledby": label ? id + "-label" : undefined
   }, ariaProps, {
     ref: target,
     id: id,
-    value: value,
+    value: customValue || value,
     character: character,
     format: formatStr,
     placeholder: placeholder ? placeholder : rangeFormatStr,
     disabled: disabled,
-    readOnly: readOnly || !editable || loading,
+    readOnly: inputReadOnly,
     plaintext: plaintext,
     htmlSize: getInputHtmlSize(),
     onChange: handleInputChange,

package/cjs/DateRangePicker/hooks/useDateDisabled.d.ts

@@ -0,0 +1,16 @@
+import { DATERANGE_DISABLED_TARGET as TARGET } from '../../utils';
+import { DisabledDateFunction, SelectedDatesState } from '../types';
+interface UseDateDisabledProps {
+    shouldDisableDate?: DisabledDateFunction;
+    DEPRECATED_disabledDate?: DisabledDateFunction;
+}
+interface DateDisabledOptions {
+    selectDate?: SelectedDatesState;
+    selectedDone?: boolean;
+    target?: TARGET;
+}
+/**
+ * Returns a function that determines whether a date is disabled and is compatible with the deprecated `disabledDate` prop.
+ */
+declare function useDateDisabled(props: UseDateDisabledProps): ((date: Date, options: DateDisabledOptions) => boolean) | undefined;
+export default useDateDisabled;

package/cjs/DateRangePicker/hooks/useDateDisabled.js

@@ -0,0 +1,31 @@
+'use client';
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _react = require("react");
+/**
+ * Returns a function that determines whether a date is disabled and is compatible with the deprecated `disabledDate` prop.
+ */
+function useDateDisabled(props) {
+  var shouldDisableDate = props.shouldDisableDate,
+    DEPRECATED_disabledDate = props.DEPRECATED_disabledDate;
+  var isDateDisabled = (0, _react.useCallback)(function (date, options) {
+    var selectDate = options.selectDate,
+      selectedDone = options.selectedDone,
+      target = options.target;
+    if (typeof shouldDisableDate === 'function') {
+      return shouldDisableDate(date, selectDate, selectedDone, target);
+    }
+    if (typeof DEPRECATED_disabledDate === 'function') {
+      return DEPRECATED_disabledDate(date, selectDate, selectedDone, target);
+    }
+    return false;
+  }, [shouldDisableDate, DEPRECATED_disabledDate]);
+  if (shouldDisableDate || DEPRECATED_disabledDate) {
+    return isDateDisabled;
+  }
+  return undefined;
+}
+var _default = useDateDisabled;
+exports.default = _default;

package/cjs/DateRangePicker/types.d.ts

@@ -26,3 +26,4 @@ selectedDone?: boolean,
  * Call the target of the `shouldDisableDate` function.
  */
 target?: DATERANGE_DISABLED_TARGET) => boolean;
+export declare type SelectedDatesState = [] | [Date] | [Date, Date];

package/cjs/Highlight/Highlight.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+export interface HighlightProps extends WithAsProps {
+    query?: string | string[];
+    renderMark?: (match: string, index: number) => React.ReactNode;
+}
+/**
+ *
+ * Highlight the matching text in the content.
+ *
+ * @see https://rsuitejs.com/components/highlight
+ */
+declare const Highlight: RsRefForwardingComponent<'div', HighlightProps>;
+export default Highlight;