rsuite 5.42.0 → 5.44.0

package/esm/AutoComplete/AutoComplete.js

@@ -10,6 +10,7 @@ import { useClassNames, useControlled, PLACEMENT, mergeRefs, useIsMounted, parti
 import { animationPropTypes } from '../Animation/utils';
 import { PickerToggleTrigger, onMenuKeyDown, DropdownMenu, DropdownMenuItem, PickerOverlay, useFocusItemValue, usePublicMethods, pickTriggerPropKeys } from '../Picker';
 import { transformData, shouldDisplay } from './utils';
+import Plaintext from '../Plaintext';
 /**
  * TODO: Remove unnecessary .rs-auto-complete element
  * TODO: role=combobox and aria-autocomplete on input element
@@ -37,6 +38,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     menuClassName = props.menuClassName,
     id = props.id,
     readOnly = props.readOnly,
+    plaintext = props.plaintext,
     renderMenu = props.renderMenu,
     renderMenuItem = props.renderMenuItem,
     onSelect = props.onSelect,
@@ -48,7 +50,7 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onMenuFocus = props.onMenuFocus,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "disabled", "className", "placement", "selectOnEnter", "classPrefix", "defaultValue", "menuAutoWidth", "data", "value", "open", "style", "size", "menuClassName", "id", "readOnly", "plaintext", "renderMenu", "renderMenuItem", "onSelect", "filterBy", "onKeyDown", "onChange", "onClose", "onOpen", "onFocus", "onBlur", "onMenuFocus"]);
   var datalist = transformData(data);
   var _useControlled = useControlled(valueProp, defaultValue),
     value = _useControlled[0],
@@ -179,6 +181,12 @@ var AutoComplete = /*#__PURE__*/React.forwardRef(function (props, ref) {
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
+  if (plaintext) {
+    return /*#__PURE__*/React.createElement(Plaintext, {
+      ref: ref,
+      localeKey: "unfilled"
+    }, typeof value === 'undefined' ? defaultValue : value);
+  }
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     ref: triggerRef,
     placement: placement,

package/esm/Cascader/Cascader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerHandle } from '../Picker';
+import { PickerHandle, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 export declare type ValueType = number | string;
-export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>> {
+export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType<T>>, Pick<PickerToggleProps, 'loading'> {
     /** Sets the width of the menu */
     menuWidth?: number;
     /** Sets the height of the menu */

package/esm/CheckPicker/CheckPicker.d.ts

@@ -4,7 +4,7 @@ import { PickerHandle, PickerToggleProps } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs'> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T>, Pick<PickerToggleProps, 'label' | 'caretAs' | 'loading'> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */

package/esm/CheckTreePicker/CheckTreePicker.d.ts

@@ -4,7 +4,7 @@ import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (string | number)[];
-export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
+export interface CheckTreePickerProps<T = ValueType> extends TreeBaseProps<T, ItemDataType>, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     /** Tree node cascade */
     cascade?: boolean;
     /** A picker that can be counted */

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -482,7 +482,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       handleSelect(activeItem, event);
     }
   }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);
-  var onPickerKeydown = useToggleKeyDownEvent({
+  var onPickerKeydown = useToggleKeyDownEvent(_extends({
     toggle: !focusItemValue || !active,
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -505,7 +505,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         del: handleClean
       });
     }
-  });
+  }, rest));
   var handleTreeKeydown = useCallback(function (event) {
     if (!treeViewRef.current) {
       return;

package/esm/DatePicker/DatePicker.d.ts

@@ -4,7 +4,7 @@ import { DatePickerLocale } from '../locales';
 import { PickerToggleProps } from '../Picker';
 import { FormControlBaseProps, PickerBaseProps, RsRefForwardingComponent } from '../@types/common';
 export type { RangeType } from './Toolbar';
-export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
+export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, FormControlBaseProps<Date | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext' | 'loading'> {
     /** Predefined date Ranges */
     ranges?: RangeType<Date>[];
     /** Calendar panel default presentation date and time */
@@ -94,6 +94,8 @@ export interface DatePickerProps extends PickerBaseProps<DatePickerLocale>, Form
     onNextMonth?: (date: Date) => void;
     /** Called after clicking the OK button */
     onOk?: (date: Date, event: React.SyntheticEvent) => void;
+    /** Called after clicking the shortcut button */
+    onShortcutClick?: (range: RangeType<Date>, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */

package/esm/DatePicker/DatePicker.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import mapValues from 'lodash/mapValues';
 import pick from 'lodash/pick';
 import omit from 'lodash/omit';
+import debounce from 'lodash/debounce';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
 import CalendarContainer from '../Calendar/CalendarContainer';
@@ -75,7 +76,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onSelect = props.onSelect,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown"]);
+    onShortcutClick = props.onShortcutClick,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "calendarDefaultDate", "cleanable", "editable", "defaultValue", "disabled", "format", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "appearance", "placement", "oneTap", "placeholder", "ranges", "value", "showMeridian", "showWeekNumbers", "style", "toggleAs", "caretAs", "disabledDate", "disabledHours", "disabledMinutes", "disabledSeconds", "shouldDisableDate", "shouldDisableHour", "shouldDisableMinute", "shouldDisableSecond", "renderValue", "onChange", "onChangeCalendarDate", "onClean", "onClose", "onEntered", "onExited", "onNextMonth", "onOk", "onOpen", "onPrevMonth", "onSelect", "onToggleMonthDropdown", "onToggleTimeDropdown", "onShortcutClick"]);
   var _useCustom = useCustom('DatePicker', overrideLocale),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate,
@@ -174,10 +176,12 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * The callback triggered after the date in the shortcut area is clicked.
    */
-  var handleShortcutPageDate = useCallback(function (value, closeOverlay, event) {
+  var handleShortcutPageDate = useCallback(function (range, closeOverlay, event) {
+    var value = range.value;
     updateValue(event, value, closeOverlay);
     handleDateChange(value, event);
-  }, [handleDateChange, updateValue]);
+    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);
+  }, [handleDateChange, onShortcutClick, updateValue]);
 
   /**
    * The callback triggered after clicking the OK button.
@@ -290,6 +294,14 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setInputState('Initial');
   }, [inputState, calendarDate, updateValue]);
+  var handleInputBackspace = useCallback(function (event) {
+    var value = event.target.value;
+
+    // When the input box is empty, the date is cleared.
+    if (value === '') {
+      handleClean(event);
+    }
+  }, [handleClean]);
   var handleEntered = useCallback(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
@@ -380,14 +392,14 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
-      onClickShortcut: handleShortcutPageDate
+      onShortcutClick: handleShortcutPageDate
     }), /*#__PURE__*/React.createElement(React.Fragment, null, calendar, /*#__PURE__*/React.createElement(Toolbar, {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
       disabledOkBtn: isOKButtonDisabled,
       disabledShortcut: disabledToolbarHandle,
-      onClickShortcut: handleShortcutPageDate,
+      onShortcutClick: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
     }))));
@@ -445,6 +457,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,
+    onInputBackspace: debounce(handleInputBackspace, 10),
     onKeyDown: onPickerKeyDown,
     onClean: createChainedFunction(handleClean, onClean),
     cleanable: cleanable && !disabled,

package/esm/DatePicker/PredefinedRanges.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import { StackProps } from '../Stack';
-import { RangeType } from './types';
+import { InnerRange, RangeType } from './types';
 import { CalendarLocale } from '../locales';
 export interface PredefinedRangesProps<T = any, Shortcut = T> extends StackProps {
     ranges?: RangeType<Shortcut>[];
     calendarDate: T;
     locale: CalendarLocale;
     disabledShortcut?: (value: T) => boolean;
-    onClickShortcut?: (value: Shortcut, closeOverlay: boolean, event: React.MouseEvent) => void;
+    onShortcutClick?: (range: InnerRange<Shortcut>, closeOverlay: boolean, event: React.MouseEvent) => void;
 }
 declare const PredefinedRanges: React.ForwardRefExoticComponent<PredefinedRangesProps<any, any> & React.RefAttributes<HTMLDivElement>>;
 export default PredefinedRanges;

package/esm/DatePicker/PredefinedRanges.js

@@ -9,11 +9,11 @@ import { getDefaultRanges, getRanges } from './utils';
 var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
     disabledShortcut = props.disabledShortcut,
-    onClickShortcut = props.onClickShortcut,
+    onShortcutClick = props.onShortcutClick,
     calendarDate = props.calendarDate,
     rangesProp = props.ranges,
     locale = props.locale,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+    rest = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
   var _useState = useState(getRanges(props)),
     ranges = _useState[0],
     setRanges = _useState[1];
@@ -36,17 +36,17 @@ var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
     ref: ref,
     alignItems: "flex-start",
     spacing: 4
-  }, rest), ranges.map(function (_ref, index) {
-    var value = _ref.value,
-      closeOverlay = _ref.closeOverlay,
-      label = _ref.label,
-      rest = _objectWithoutPropertiesLoose(_ref, ["value", "closeOverlay", "label"]);
+  }, rest), ranges.map(function (range, index) {
+    var value = range.value,
+      closeOverlay = range.closeOverlay,
+      label = range.label,
+      rest = _objectWithoutPropertiesLoose(range, ["value", "closeOverlay", "label"]);
     var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
     var handleClickShortcut = function handleClickShortcut(event) {
       if (disabled) {
         return;
       }
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
+      onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, closeOverlay !== false ? true : false, event);
     };
     return /*#__PURE__*/React.createElement(Button, _extends({
       appearance: "link",

package/esm/DatePicker/Toolbar.js

@@ -36,11 +36,11 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     disabledShortcut = props.disabledShortcut,
     hideOkBtn = props.hideOkBtn,
     onOk = props.onOk,
-    onClickShortcut = props.onClickShortcut,
+    onShortcutClick = props.onShortcutClick,
     calendarDate = props.calendarDate,
     ranges = props.ranges,
     locale = props.locale,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+    rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onShortcutClick", "calendarDate", "ranges", "locale"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -61,7 +61,7 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
     calendarDate: calendarDate,
     locale: locale,
     disabledShortcut: disabledShortcut,
-    onClickShortcut: onClickShortcut
+    onShortcutClick: onShortcutClick
   }), /*#__PURE__*/React.createElement("div", {
     className: prefix('right')
   }, /*#__PURE__*/React.createElement(SubmitButton, {
@@ -77,7 +77,7 @@ Toolbar.propTypes = {
   className: PropTypes.string,
   classPrefix: PropTypes.string,
   calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.arrayOf(PropTypes.instanceOf(Date))]).isRequired,
-  onClickShortcut: PropTypes.func,
+  onShortcutClick: PropTypes.func,
   onOk: PropTypes.func,
   disabledShortcut: PropTypes.func,
   disabledOkBtn: PropTypes.func,

package/esm/DateRangePicker/DateRangePicker.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { FormControlBaseProps, PickerBaseProps } from '../@types/common';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { DisabledDateFunction, RangeType, DateRange } from './types';
-export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext'> {
+export interface DateRangePickerProps extends PickerBaseProps, FormControlBaseProps<DateRange | null>, Pick<PickerToggleProps, 'caretAs' | 'readOnly' | 'plaintext' | 'loading'> {
     /** Predefined date ranges */
     ranges?: RangeType[];
     /** Format date */
@@ -43,6 +43,8 @@ export interface DateRangePickerProps extends PickerBaseProps, FormControlBasePr
     onSelect?: (date: Date, event?: React.SyntheticEvent) => void;
     /** Called after clicking the OK button */
     onOk?: (date: DateRange, event: React.SyntheticEvent) => void;
+    /** Called after clicking the shortcut button */
+    onShortcutClick?: (range: RangeType, event: React.MouseEvent) => void;
     /** Called when clean */
     onClean?: (event: React.MouseEvent) => void;
     /** Custom render value */

package/esm/DateRangePicker/DateRangePicker.js

@@ -6,6 +6,7 @@ import isNil from 'lodash/isNil';
 import omit from 'lodash/omit';
 import partial from 'lodash/partial';
 import pick from 'lodash/pick';
+import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedDate } from '../CustomProvider';
@@ -75,8 +76,9 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onOk = props.onOk,
     onOpen = props.onOpen,
     onSelect = props.onSelect,
+    onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "renderTitle"]);
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "className", "appearance", "editable", "cleanable", "character", "defaultCalendarValue", "defaultValue", "disabled", "disabledDate", "shouldDisableDate", "format", "hoverRange", "isoWeek", "limitEndYear", "limitStartYear", "locale", "menuClassName", "menuStyle", "oneTap", "placeholder", "placement", "ranges", "renderValue", "showOneCalendar", "showWeekNumbers", "showMeridian", "style", "toggleAs", "caretAs", "value", "onChange", "onClean", "onClose", "onEnter", "onEntered", "onExited", "onOk", "onOpen", "onSelect", "onShortcutClick", "renderTitle"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -402,10 +404,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   /**
    * Toolbar operation callback function
    */
-  var handleShortcutPageDate = useCallback(function (value, closeOverlay, event) {
+  var handleShortcutPageDate = useCallback(function (range, closeOverlay, event) {
     if (closeOverlay === void 0) {
       closeOverlay = false;
     }
+    var value = range.value;
     updateCalendarDateRange({
       dateRange: value
     });
@@ -414,10 +417,11 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     } else {
       setSelectedDates(value !== null && value !== void 0 ? value : []);
     }
+    onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);
 
     // End unfinished selections.
     setSelectedIdle(true);
-  }, [handleValueUpdate, updateCalendarDateRange]);
+  }, [handleValueUpdate, onShortcutClick, updateCalendarDateRange]);
   var handleOK = useCallback(function (event) {
     handleValueUpdate(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
@@ -475,6 +479,14 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setInputState('Initial');
   }, [handleValueUpdate, selectedDates, inputState]);
+  var handleInputBackspace = useCallback(function (event) {
+    var value = event.target.value;
+
+    // When the input box is empty, the date is cleared.
+    if (value === '') {
+      handleClean(event);
+    }
+  }, [handleClean]);
   var handleEnter = useCallback(function () {
     var nextCalendarDate;
     if (value && value.length) {
@@ -605,7 +617,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
-      onClickShortcut: handleShortcutPageDate
+      onShortcutClick: handleShortcutPageDate
     }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/React.createElement("div", {
@@ -627,7 +639,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       disabledShortcut: disabledShortcutButton,
       hideOkBtn: oneTap,
       onOk: handleOK,
-      onClickShortcut: handleShortcutPageDate,
+      onShortcutClick: handleShortcutPageDate,
       ranges: bottomRanges
     })))));
   };
@@ -664,6 +676,7 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,
+    onInputBackspace: debounce(handleInputBackspace, 10),
     onKeyDown: onPickerKeyDown,
     onClean: createChainedFunction(handleClean, onClean),
     cleanable: cleanable && !disabled,

package/esm/DateRangePicker/types.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import { DATERANGE_DISABLED_TARGET } from '../utils/constants';
 export declare type ValueType = [Date?, Date?];
 export declare type DateRange = [Date, Date];
-export interface RangeType {
+export interface RangeType<T = DateRange> {
     label: React.ReactNode;
-    value: DateRange | ((value?: ValueType) => DateRange);
+    value: T | ((value?: T) => T);
     closeOverlay?: boolean;
     placement?: 'bottom' | 'left';
 }

package/esm/InputPicker/InputPicker.d.ts

@@ -26,7 +26,7 @@ interface InputItemDataType extends ItemDataType {
     create?: boolean;
 }
 export declare type ValueType = any;
-export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs'> {
+export interface InputPickerProps<T = ValueType> extends FormControlPickerProps<T, InputPickerLocale, InputItemDataType>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     tabIndex?: number;
     /** Settings can create new options */
     creatable?: boolean;

package/esm/InputPicker/InputPicker.js

@@ -604,7 +604,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["disabled-options"])))] = disabledOptions, _merge));
   var searching = !!searchKeyword && open;
-  var displaySearchInput = searchable && !disabled;
+  var displaySearchInput = searchable && !disabled && !rest.loading;
   var inputProps = multi ? {
     inputStyle: {
       maxWidth: maxWidth - 63

package/esm/MultiCascader/MultiCascader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (number | string)[];
-export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType> {
+export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'loading'> {
     cascade?: boolean;
     /** A picker that can be counted */
     countable?: boolean;

package/esm/Picker/PickerToggle.d.ts

@@ -15,6 +15,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     readOnly?: boolean;
     plaintext?: boolean;
     tabIndex?: number;
+    /** Whether to display an loading indicator on toggle button */
     loading?: boolean;
     editable?: boolean;
     name?: string;
@@ -22,6 +23,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     inputMask?: (string | RegExp)[];
     onInputChange?: (value: string, event: React.ChangeEvent) => void;
     onInputPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
     onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
     placement?: TypeAttributes.Placement;

package/esm/Picker/PickerToggle.js

@@ -44,6 +44,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,
     onInputChange = props.onInputChange,
     onInputPressEnter = props.onInputPressEnter,
+    onInputBackspace = props.onInputBackspace,
     onInputBlur = props.onInputBlur,
     onInputFocus = props.onInputFocus,
     onClean = props.onClean,
@@ -56,7 +57,7 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
+    rest = _objectWithoutPropertiesLoose(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBackspace", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
   var inputRef = useRef(null);
   var comboboxRef = useRef(null);
   var _useState = useState(false),
@@ -130,10 +131,15 @@ var PickerToggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);
   }, [onInputChange]);
   var handleInputKeyDown = useCallback(function (event) {
-    if (editable && event.key === KEY_VALUES.ENTER) {
-      onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+    if (editable) {
+      if (event.key === KEY_VALUES.ENTER) {
+        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+      }
+      if (event.key === KEY_VALUES.BACKSPACE) {
+        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
+      }
     }
-  }, [onInputPressEnter, editable]);
+  }, [editable, onInputPressEnter, onInputBackspace]);
   var renderInput = useCallback(function (ref, props) {
     return /*#__PURE__*/React.createElement("input", _extends({
       ref: mergeRefs(inputRef, ref),

package/esm/Picker/utils.js

@@ -354,6 +354,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     active = props.active,
     readOnly = props.readOnly,
     disabled = props.disabled,
+    loading = props.loading,
     onExit = props.onExit,
     onOpen = props.onOpen,
     onClose = props.onClose,
@@ -380,7 +381,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
   }, [active, handleOpen, handleClose]);
   var onToggle = useCallback(function (event) {
     // Keyboard events should not be processed when readOnly and disabled are set.
-    if (readOnly || disabled) {
+    if (readOnly || disabled || loading) {
       return;
     }
     if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
@@ -426,7 +427,7 @@ export var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
     // Native event callback
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [readOnly, disabled, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
+  }, [readOnly, disabled, loading, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
   return onToggle;
 };
 /**

package/esm/SelectPicker/SelectPicker.d.ts

@@ -6,8 +6,6 @@ import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export interface SelectProps<T> {
     /** Set group condition key in data */
     groupBy?: string;
-    /** Whether to display an loading indicator on toggle button */
-    loading?: boolean;
     /** Whether dispaly search input box */
     searchable?: boolean;
     /** Whether using virtualized list */
@@ -41,7 +39,7 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
     /** Custom render selected items */
     renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
 }
-export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label'> {
+export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {
     /** Initial value */
     defaultValue?: T;
     /** Current value of the component. Creates a controlled component */

package/esm/TreePicker/TreePicker.d.ts

@@ -3,7 +3,7 @@ import { PickerLocale } from '../locales';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
-export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
+export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     /** The height of Dropdown */
     height?: number;
     /** Tree node cascade */

package/esm/toaster/useToaster.js

@@ -1,4 +1,5 @@
 'use client';
+import { useMemo } from 'react';
 import toaster from './toaster';
 import { useCustom } from '../utils';
 
@@ -9,24 +10,26 @@ import { useCustom } from '../utils';
 var useToaster = function useToaster() {
   var _useCustom = useCustom(),
     toasters = _useCustom.toasters;
-  return {
-    push: function push(message, options) {
-      var _toasters$current;
-      var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
-      return customToaster ? customToaster.push(message, options) : toaster.push(message, options);
-    },
-    remove: function remove(key) {
-      toasters ? Array.from(toasters.current).forEach(function (_ref) {
-        var c = _ref[1];
-        return c === null || c === void 0 ? void 0 : c.remove(key);
-      }) : toaster.remove(key);
-    },
-    clear: function clear() {
-      toasters ? Array.from(toasters.current).forEach(function (_ref2) {
-        var c = _ref2[1];
-        return c === null || c === void 0 ? void 0 : c.clear();
-      }) : toaster.clear();
-    }
-  };
+  return useMemo(function () {
+    return {
+      push: function push(message, options) {
+        var _toasters$current;
+        var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
+        return customToaster ? customToaster.push(message, options) : toaster.push(message, options);
+      },
+      remove: function remove(key) {
+        toasters ? Array.from(toasters.current).forEach(function (_ref) {
+          var c = _ref[1];
+          return c === null || c === void 0 ? void 0 : c.remove(key);
+        }) : toaster.remove(key);
+      },
+      clear: function clear() {
+        toasters ? Array.from(toasters.current).forEach(function (_ref2) {
+          var c = _ref2[1];
+          return c === null || c === void 0 ? void 0 : c.clear();
+        }) : toaster.clear();
+      }
+    };
+  }, [toasters]);
 };
 export default useToaster;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.42.0",
+  "version": "5.44.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -38,7 +38,7 @@
     "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
-    "rsuite-table": "^5.15.0",
+    "rsuite-table": "^5.16.0",
     "schema-typed": "^2.1.3"
   },
   "peerDependencies": {