rsuite 5.60.2 → 5.61.0

package/esm/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/esm/CheckTreePicker/hooks/useFocusState.js

@@ -0,0 +1,37 @@
+'use client';
+import { useState } from 'react';
+import { useEventCallback } from '../../utils';
+function useFocusState(props) {
+  var target = props.target;
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = useState(null),
+    focusItemValue = _useState2[0],
+    setFocusItemValue = _useState2[1];
+  var focusTarget = useEventCallback(function () {
+    var _target$current;
+    (_target$current = target.current) === null || _target$current === void 0 ? void 0 : _target$current.focus();
+  });
+  var onEnter = 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 = 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
+    }
+  };
+}
+export default useFocusState;

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

@@ -19,6 +19,7 @@ import { mergeRefs, useClassNames, useControlled, useCustom, useUniqueId, useEve
 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 Input from '../Input';
 import DateInput from '../DateInput';
 import InputGroup from '../InputGroup';
 import { splitRanges, deprecatedPropTypes, getRestProps } from './utils';
@@ -88,11 +89,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", "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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -457,6 +459,19 @@ var DatePicker = /*#__PURE__*/React.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 : DateInput;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, pickTriggerPropKeys),
@@ -477,24 +492,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(TargetInput, _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,
     onChange: handleInputChange,
-    readOnly: readOnly || !editable || loading,
-    plaintext: plaintext,
+    readOnly: inputReadOnly,
     onKeyDown: handleInputKeyDown
   })), /*#__PURE__*/React.createElement(PickerIndicator, {
     loading: loading,

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/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/esm/DateRangePicker/DateRangePicker.js

@@ -22,8 +22,10 @@ import { getSafeCalendarDate, getMonthHoverRange, getWeekHoverRange, isSameRange
 import { deprecatePropTypeNew, oneOf } from '../internals/propTypes';
 import DateRangePickerContext from './DateRangePickerContext';
 import DateRangeInput from '../DateRangeInput';
+import Input from '../Input';
 import InputGroup from '../InputGroup';
 import Header from './Header';
+import useDateDisabled from './hooks/useDateDisabled';
 /**
  * A date range picker allows you to select a date range from a calendar.
  *
@@ -48,7 +50,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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,
@@ -90,7 +92,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect = props.onSelect,
     onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    restProps = _objectWithoutPropertiesLoose(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 = _objectWithoutPropertiesLoose(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 = useUniqueId('rs-', idProp);
   var _usePickerRef = usePickerRef(ref),
     trigger = _usePickerRef.trigger,
@@ -144,6 +147,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * so declare a Ref to temporarily store the `selectValue` of the first click.
    */
   var selectRangeValueRef = useRef(null);
+
+  /**
+   *
+   * The key of the currently active calendar panel.
+   * Used to switch when only one calendar panel is displayed.
+   */
   var _useState5 = useState(),
     activeCalendarKey = _useState5[0],
     setActiveCalendarKey = _useState5[1];
@@ -192,9 +201,8 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setSelectedDates(nextCalendarDate);
     }
   };
-
-  // if valueProp changed then update selectValue/hoverValue
   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]);
@@ -475,41 +483,39 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
     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 = useDateDisabled({
+    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 (isBefore(start, end) || isSameDay(start, end)) {
+        if (isDateDisabled(start, {
+          selectDate: selectedDates,
+          selectedDone: isSelectedIdle,
+          target: target
+        })) {
+          return true;
+        }
+        start = 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 (isBefore(start, end) || 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 = 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, TARGET.TOOLBAR_BUTTON_OK);
-  };
   var disableShortcut = function disableShortcut(value) {
     if (value === void 0) {
       value = [];
@@ -520,26 +526,33 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (!start || !end) {
       return true;
     }
-    return disableByBetween(start, end, TARGET.TOOLBAR_SHORTCUT);
+    return disableByRange(start, end, TARGET.TOOLBAR_SHORTCUT);
   };
   var handleClose = 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 = useEventCallback(function (event) {
     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,
@@ -560,13 +573,6 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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,
@@ -578,12 +584,12 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       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() {
@@ -691,7 +697,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       selectedDone: isSelectedIdle,
       target: 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;
@@ -704,6 +710,19 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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 : DateRangeInput;
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     ref: trigger,
@@ -723,23 +742,24 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext
   }) : /*#__PURE__*/React.createElement(InputGroup, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
     inside: true,
+    disabled: disabled,
     size: size
   }), /*#__PURE__*/React.createElement(PickerLabel, {
     className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["label"]))),
     id: id + "-label"
-  }, label), /*#__PURE__*/React.createElement(DateRangeInput, _extends({
+  }, label), /*#__PURE__*/React.createElement(TargetInput, _extends({
     "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/esm/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/esm/DateRangePicker/hooks/useDateDisabled.js

@@ -0,0 +1,26 @@
+'use client';
+import { useCallback } from '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 = 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;
+}
+export default useDateDisabled;

package/esm/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/esm/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;

package/esm/Highlight/Highlight.js

@@ -0,0 +1,52 @@
+'use client';
+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 { useClassNames } from '../utils';
+import { highlightText } from './utils/highlightText';
+import { stringifyReactNode } from '../internals/utils';
+function defaultRenderMark(match, index) {
+  return /*#__PURE__*/React.createElement("mark", {
+    key: index,
+    className: "rs-highlight-mark"
+  }, match);
+}
+
+/**
+ *
+ * Highlight the matching text in the content.
+ *
+ * @see https://rsuitejs.com/components/highlight
+ */
+var Highlight = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'highlight' : _props$classPrefix,
+    className = props.className,
+    children = props.children,
+    query = props.query,
+    _props$renderMark = props.renderMark,
+    renderMark = _props$renderMark === void 0 ? defaultRenderMark : _props$renderMark,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "children", "query", "renderMark"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge;
+  var classes = merge(className, withClassPrefix());
+  var text = stringifyReactNode(children);
+  return /*#__PURE__*/React.createElement(Component, _extends({
+    ref: ref,
+    className: classes
+  }, rest), highlightText(text, {
+    query: query,
+    renderMark: renderMark
+  }));
+});
+Highlight.displayName = 'Highlight';
+Highlight.propTypes = {
+  className: PropTypes.string,
+  classPrefix: PropTypes.string,
+  as: PropTypes.elementType
+};
+export default Highlight;

package/esm/Highlight/index.d.ts

@@ -0,0 +1,3 @@
+import Highlight from './Highlight';
+export type { HighlightProps } from './Highlight';
+export default Highlight;

package/esm/Highlight/index.js

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