rsuite 5.43.0 → 5.45.0

package/Button/styles/index.less

@@ -24,7 +24,7 @@
   text-decoration: none;
   color: var(--rs-btn-default-text);
   background-color: var(--rs-btn-default-bg);
-  border-radius: @border-radius;
+  border-radius: @btn-border-radius;
 
   .high-contrast-mode({
     transition: none;

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [5.45.0](https://github.com/rsuite/rsuite/compare/v5.44.0...v5.45.0) (2023-11-17)
+
+### Bug Fixes
+
+- **Button:** fix button radius using wrong less variable ([#3451](https://github.com/rsuite/rsuite/issues/3451)) ([037a2b3](https://github.com/rsuite/rsuite/commit/037a2b3fb2696a55390018958a3d84cd0dc38958))
+- formControll will pass undefined as value when value is null defaultValue is undefined ([#3456](https://github.com/rsuite/rsuite/issues/3456)) ([cde5a88](https://github.com/rsuite/rsuite/commit/cde5a889036f1873115b8be2ac31a31b8ff28bd3))
+
+### Features
+
+- **Drawer:** add support for closeButton ([#3450](https://github.com/rsuite/rsuite/issues/3450)) ([90f25d0](https://github.com/rsuite/rsuite/commit/90f25d09e131e606c9ebd6dca41c0047e02f7908))
+- **Modal,Drawer:** size prop supports number and string values ([#3103](https://github.com/rsuite/rsuite/issues/3103)) ([39741b7](https://github.com/rsuite/rsuite/commit/39741b755460e29cb8cfefb32bf4056b14cbf985))
+
+# [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

package/Drawer/styles/index.less

@@ -73,7 +73,7 @@
 
   // Full page
   &-full {
-    @max-width: ~'calc(100% - @{drawer-full-size-margin})';
+    @max-width: 100%;
     @max-height: @max-width;
 
     &.rs-drawer-top,

package/Modal/styles/index.less

@@ -72,8 +72,30 @@
   }
 
   &-full {
-    @modal-full-size-margin-value: @modal-full-size-margin* 2;
-    .content-width(~'calc(100% - @{modal-full-size-margin-value})');
+    margin: 0;
+    height: 100%;
+
+    .rs-modal-content {
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      border-radius: 0;
+      display: flex;
+      flex-direction: column;
+
+      .rs-modal-header {
+        flex: 0 0 auto;
+      }
+
+      .rs-modal-body {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
+
+      .rs-modal-footer {
+        flex: 0 0 auto;
+      }
+    }
   }
 }
 

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

@@ -4,6 +4,8 @@ import { TypeAttributes, RsRefForwardingComponent } from '../@types/common';
 export interface DrawerProps extends ModalProps {
     /** The placement of Drawer */
     placement?: TypeAttributes.Placement4;
+    /** Custom close button */
+    closeButton?: React.ReactNode | boolean;
 }
 declare const DrawerBody: RsRefForwardingComponent<'div', ModalBodyProps>;
 declare const DrawerHeader: RsRefForwardingComponent<'div', ModalHeaderProps>;

package/cjs/Drawer/Drawer.js

@@ -1,17 +1,19 @@
 'use client';
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Slide = _interopRequireDefault(require("../Animation/Slide"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _utils = require("../utils");
 var _deprecateComponent = _interopRequireDefault(require("../utils/deprecateComponent"));
+var _DrawerContext = _interopRequireDefault(require("./DrawerContext"));
 var DrawerBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement(_Modal.default.Body, (0, _extends2.default)({
     classPrefix: "drawer-body"
@@ -55,7 +57,9 @@ var Drawer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
     _props$animation = props.animation,
     animation = _props$animation === void 0 ? _Slide.default : _props$animation,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "placement", "classPrefix", "animation"]);
+    _props$closeButton = props.closeButton,
+    closeButton = _props$closeButton === void 0 ? true : _props$closeButton,
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["className", "placement", "classPrefix", "animation", "closeButton"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -63,14 +67,21 @@ var Drawer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var animationProps = {
     placement: placement
   };
-  return /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      closeButton: closeButton,
+      isDrawer: true
+    };
+  }, [closeButton]);
+  return /*#__PURE__*/_react.default.createElement(_DrawerContext.default.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
     ref: ref,
-    drawer: true,
     classPrefix: classPrefix,
     className: classes,
     animation: animation,
     animationProps: animationProps
-  }));
+  })));
 });
 DrawerBody.displayName = 'DrawerBody';
 DrawerHeader.displayName = 'DrawerHeader';

package/cjs/Drawer/DrawerContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface DrawerContextProps {
+    /** Custom close button */
+    closeButton?: React.ReactNode | boolean;
+    /** Render Modal as Drawer */
+    isDrawer: boolean;
+}
+declare const DrawerContext: React.Context<DrawerContextProps | null>;
+export default DrawerContext;

package/cjs/Drawer/DrawerContext.js

@@ -0,0 +1,10 @@
+'use client';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var DrawerContext = /*#__PURE__*/_react.default.createContext(null);
+var _default = DrawerContext;
+exports.default = _default;

package/cjs/FormControl/FormControl.js

@@ -134,7 +134,7 @@ var FormControl = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   if (AccepterComponent === _Toggle.default) {
     valueKey = 'checked';
   }
-  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val !== null && val !== void 0 ? val : defaultValue, _accepterProps);
+  var accepterProps = (_accepterProps = {}, _accepterProps[valueKey] = val === undefined ? defaultValue : val, _accepterProps);
   return /*#__PURE__*/_react.default.createElement(Component, {
     className: classes,
     ref: ref

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

@@ -5,8 +5,8 @@ import ModalBody from './ModalBody';
 import ModalHeader from './ModalHeader';
 import ModalTitle from './ModalTitle';
 import ModalFooter from './ModalFooter';
-import { TypeAttributes, RsRefForwardingComponent } from '../@types/common';
-export declare type ModalSize = TypeAttributes.Size | 'full';
+import { ModalSize } from './utils';
+import { RsRefForwardingComponent } from '../@types/common';
 export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HTMLElement>, 'role' | 'id' | 'aria-labelledby' | 'aria-describedby'> {
     /** A modal can have different sizes */
     size?: ModalSize;
@@ -27,8 +27,6 @@ export interface ModalProps extends BaseModalProps, Pick<React.HTMLAttributes<HT
     dialogAs?: React.ElementType;
     /** Automatically sets the height when the body content is too long. */
     overflow?: boolean;
-    /** Render Modal as Drawer */
-    drawer?: boolean;
 }
 interface ModalComponent extends RsRefForwardingComponent<'div', ModalProps> {
     Body: typeof ModalBody;