rsuite 5.42.0 → 5.44.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [5.44.0](https://github.com/rsuite/rsuite/compare/5.43.0...5.44.0) (2023-11-10)
+
+### Bug Fixes
+
+- **DatePicker,DateRangePicker:** fix inability to clear values via Backspace key ([#3446](https://github.com/rsuite/rsuite/issues/3446)) ([ca7dcdd](https://github.com/rsuite/rsuite/commit/ca7dcddb1406b8d6a20ff4ad11755fbac83be07e))
+- **toaster:** fix useToaster not keep same reference when re-renders ([#3440](https://github.com/rsuite/rsuite/issues/3440)) ([a603033](https://github.com/rsuite/rsuite/commit/a603033eeb0a1de2299938c506fb42ee13375f2c))
+
+### Features
+
+- add loading prop for all pickers ([#3444](https://github.com/rsuite/rsuite/issues/3444)) ([3c5b2af](https://github.com/rsuite/rsuite/commit/3c5b2af3658bb44c8eb22f1c59f8a9c989c7e62e))
+- **DatePicker,DateRangePicker:** add support for onShortcutClick ([#3439](https://github.com/rsuite/rsuite/issues/3439)) ([ae00f90](https://github.com/rsuite/rsuite/commit/ae00f9045fd7dba95739f1f3fc8a21d671b6875b))
+
+# [5.43.0](https://github.com/rsuite/rsuite/compare/5.42.0...5.43.0) (2023-11-03)
+
+### Bug Fixes
+
+- **AutoComplete:** fix AutoComplete plaintext mode not working ([#3436](https://github.com/rsuite/rsuite/issues/3436)) ([72b79e7](https://github.com/rsuite/rsuite/commit/72b79e7b6dfb90ec23bb81b1145db125f8b827cd))
+- **Drawer:** change Drawer title font-size to 18px ([#3430](https://github.com/rsuite/rsuite/issues/3430)) ([3eff439](https://github.com/rsuite/rsuite/commit/3eff439a0fa28e5349e306b6b2ded8eb9e847f95))
+
+### Features
+
+- **CSS:** use CSS custom properties instead of less variables ([#3428](https://github.com/rsuite/rsuite/issues/3428)) ([f6474e4](https://github.com/rsuite/rsuite/commit/f6474e490036cd8faf228332e2b7bd6b85902671))
+
 # [5.42.0](https://github.com/rsuite/rsuite/compare/v5.41.0...v5.42.0) (2023-10-29)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -18,10 +18,6 @@
     max-width: 100%;
   }
 
-  &-toggle {
-    min-width: 75px;
-  }
-
   &-toggle.rs-btn {
     .rs-ripple-pond {
       display: none !important;

package/Placeholder/styles/index.less

@@ -111,7 +111,7 @@
         var(--rs-placeholder) 63%
       );
       background-size: 400% 100% !important;
-      animation: placeholder-active 3s ease infinite;
+      animation: placeholder-active 1.5s ease infinite;
     }
   }
 

package/cjs/AutoComplete/AutoComplete.js

@@ -16,6 +16,7 @@ var _utils = require("../utils");
 var _utils2 = require("../Animation/utils");
 var _Picker = require("../Picker");
 var _utils3 = require("./utils");
+var _Plaintext = _interopRequireDefault(require("../Plaintext"));
 /**
  * TODO: Remove unnecessary .rs-auto-complete element
  * TODO: role=combobox and aria-autocomplete on input element
@@ -43,6 +44,7 @@ var AutoComplete = /*#__PURE__*/_react.default.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,
@@ -54,7 +56,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onMenuFocus = props.onMenuFocus,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils3.transformData)(data);
   var _useControlled = (0, _utils.useControlled)(valueProp, defaultValue),
     value = _useControlled[0],
@@ -185,6 +187,12 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
+  if (plaintext) {
+    return /*#__PURE__*/_react.default.createElement(_Plaintext.default, {
+      ref: ref,
+      localeKey: "unfilled"
+    }, typeof value === 'undefined' ? defaultValue : value);
+  }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     ref: triggerRef,
     placement: placement,

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

@@ -487,7 +487,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       handleSelect(activeItem, event);
     }
   }, [flattenNodes, focusItemValue, handleSelect, uncheckableItemValues, valueKey]);
-  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)({
+  var onPickerKeydown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     toggle: !focusItemValue || !active,
     triggerRef: triggerRef,
     targetRef: targetRef,
@@ -510,7 +510,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
         del: handleClean
       });
     }
-  });
+  }, rest));
   var handleTreeKeydown = (0, _react.useCallback)(function (event) {
     if (!treeViewRef.current) {
       return;

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

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _mapValues = _interopRequireDefault(require("lodash/mapValues"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
 var _CalendarContainer = _interopRequireDefault(require("../Calendar/CalendarContainer"));
@@ -81,7 +82,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSelect = props.onSelect,
     onToggleMonthDropdown = props.onToggleMonthDropdown,
     onToggleTimeDropdown = props.onToggleTimeDropdown,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useCustom)('DatePicker', overrideLocale),
     locale = _useCustom.locale,
     formatDate = _useCustom.formatDate,
@@ -180,10 +182,12 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   /**
    * The callback triggered after the date in the shortcut area is clicked.
    */
-  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _react.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.
@@ -296,6 +300,14 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     setInputState('Initial');
   }, [inputState, calendarDate, updateValue]);
+  var handleInputBackspace = (0, _react.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 = (0, _react.useCallback)(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
@@ -386,14 +398,14 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledToolbarHandle,
-      onClickShortcut: handleShortcutPageDate
+      onShortcutClick: handleShortcutPageDate
     }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, calendar, /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
       locale: locale,
       ranges: bottomRanges,
       calendarDate: calendarDate,
       disabledOkBtn: isOKButtonDisabled,
       disabledShortcut: disabledToolbarHandle,
-      onClickShortcut: handleShortcutPageDate,
+      onShortcutClick: handleShortcutPageDate,
       onOk: handleOK,
       hideOkBtn: oneTap
     }))));
@@ -451,6 +463,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,
+    onInputBackspace: (0, _debounce.default)(handleInputBackspace, 10),
     onKeyDown: onPickerKeyDown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,

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

@@ -15,11 +15,11 @@ var _utils2 = require("./utils");
 var PredefinedRanges = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "disabledShortcut", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "disabledShortcut", "onShortcutClick", "calendarDate", "ranges", "locale"]);
   var _useState = (0, _react.useState)((0, _utils2.getRanges)(props)),
     ranges = _useState[0],
     setRanges = _useState[1];
@@ -42,17 +42,17 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
     ref: ref,
     alignItems: "flex-start",
     spacing: 4
-  }, rest), ranges.map(function (_ref, index) {
-    var value = _ref.value,
-      closeOverlay = _ref.closeOverlay,
-      label = _ref.label,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["value", "closeOverlay", "label"]);
+  }, rest), ranges.map(function (range, index) {
+    var value = range.value,
+      closeOverlay = range.closeOverlay,
+      label = range.label,
+      rest = (0, _objectWithoutPropertiesLoose2.default)(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.default.createElement(_Button.default, (0, _extends2.default)({
       appearance: "link",

package/cjs/DatePicker/Toolbar.js

@@ -41,11 +41,11 @@ var Toolbar = /*#__PURE__*/_react.default.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 = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onShortcutClick", "calendarDate", "ranges", "locale"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -66,7 +66,7 @@ var Toolbar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     calendarDate: calendarDate,
     locale: locale,
     disabledShortcut: disabledShortcut,
-    onClickShortcut: onClickShortcut
+    onShortcutClick: onShortcutClick
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('right')
   }, /*#__PURE__*/_react.default.createElement(SubmitButton, {
@@ -82,7 +82,7 @@ Toolbar.propTypes = {
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
   calendarDate: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.arrayOf(_propTypes.default.instanceOf(Date))]).isRequired,
-  onClickShortcut: _propTypes.default.func,
+  onShortcutClick: _propTypes.default.func,
   onOk: _propTypes.default.func,
   disabledShortcut: _propTypes.default.func,
   disabledOkBtn: _propTypes.default.func,

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

@@ -12,6 +12,7 @@ var _isNil = _interopRequireDefault(require("lodash/isNil"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
 var _partial = _interopRequireDefault(require("lodash/partial"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _CustomProvider = require("../CustomProvider");
@@ -81,8 +82,9 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onOk = props.onOk,
     onOpen = props.onOpen,
     onSelect = props.onSelect,
+    onShortcutClick = props.onShortcutClick,
     renderTitle = props.renderTitle,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -408,10 +410,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   /**
    * Toolbar operation callback function
    */
-  var handleShortcutPageDate = (0, _react.useCallback)(function (value, closeOverlay, event) {
+  var handleShortcutPageDate = (0, _react.useCallback)(function (range, closeOverlay, event) {
     if (closeOverlay === void 0) {
       closeOverlay = false;
     }
+    var value = range.value;
     updateCalendarDateRange({
       dateRange: value
     });
@@ -420,10 +423,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } 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 = (0, _react.useCallback)(function (event) {
     handleValueUpdate(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
@@ -481,6 +485,14 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
     setInputState('Initial');
   }, [handleValueUpdate, selectedDates, inputState]);
+  var handleInputBackspace = (0, _react.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 = (0, _react.useCallback)(function () {
     var nextCalendarDate;
     if (value && value.length) {
@@ -611,7 +623,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
-      onClickShortcut: handleShortcutPageDate
+      onShortcutClick: handleShortcutPageDate
     }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/_react.default.createElement("div", {
@@ -633,7 +645,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       disabledShortcut: disabledShortcutButton,
       hideOkBtn: oneTap,
       onOk: handleOK,
-      onClickShortcut: handleShortcutPageDate,
+      onShortcutClick: handleShortcutPageDate,
       ranges: bottomRanges
     })))));
   };
@@ -670,6 +682,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,
+    onInputBackspace: (0, _debounce.default)(handleInputBackspace, 10),
     onKeyDown: onPickerKeyDown,
     onClean: (0, _utils.createChainedFunction)(handleClean, onClean),
     cleanable: cleanable && !disabled,

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

@@ -611,7 +611,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     usedClassNamePropKeys = _usePickerClassName[1];
   var classes = merge(pickerClasses, (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["tag"])))] = multi, _merge[prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["focused"])))] = open, _merge[prefix(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["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/cjs/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/cjs/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/cjs/Picker/PickerToggle.js

@@ -50,6 +50,7 @@ var PickerToggle = /*#__PURE__*/_react.default.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,
@@ -62,7 +63,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useRef)(null);
   var comboboxRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -136,10 +137,15 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);
   }, [onInputChange]);
   var handleInputKeyDown = (0, _react.useCallback)(function (event) {
-    if (editable && event.key === _utils.KEY_VALUES.ENTER) {
-      onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+    if (editable) {
+      if (event.key === _utils.KEY_VALUES.ENTER) {
+        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+      }
+      if (event.key === _utils.KEY_VALUES.BACKSPACE) {
+        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
+      }
     }
-  }, [onInputPressEnter, editable]);
+  }, [editable, onInputPressEnter, onInputBackspace]);
   var renderInput = (0, _react.useCallback)(function (ref, props) {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(inputRef, ref),

package/cjs/Picker/utils.js

@@ -367,6 +367,7 @@ 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,
@@ -393,7 +394,7 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
   }, [active, handleOpen, handleClose]);
   var onToggle = (0, _react.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)) {
@@ -439,7 +440,7 @@ 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;
 };
 exports.useToggleKeyDownEvent = useToggleKeyDownEvent;

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