rsuite 5.43.0 → 5.45.0

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

@@ -1,12 +1,13 @@
 'use client';
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import Slide from '../Animation/Slide';
 import Modal from '../Modal';
 import { useClassNames } from '../utils';
 import deprecateComponent from '../utils/deprecateComponent';
+import DrawerContext from './DrawerContext';
 var DrawerBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement(Modal.Body, _extends({
     classPrefix: "drawer-body"
@@ -50,7 +51,9 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
     classPrefix = _props$classPrefix === void 0 ? 'drawer' : _props$classPrefix,
     _props$animation = props.animation,
     animation = _props$animation === void 0 ? Slide : _props$animation,
-    rest = _objectWithoutPropertiesLoose(props, ["className", "placement", "classPrefix", "animation"]);
+    _props$closeButton = props.closeButton,
+    closeButton = _props$closeButton === void 0 ? true : _props$closeButton,
+    rest = _objectWithoutPropertiesLoose(props, ["className", "placement", "classPrefix", "animation", "closeButton"]);
   var _useClassNames = useClassNames(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix;
@@ -58,14 +61,21 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var animationProps = {
     placement: placement
   };
-  return /*#__PURE__*/React.createElement(Modal, _extends({}, rest, {
+  var contextValue = useMemo(function () {
+    return {
+      closeButton: closeButton,
+      isDrawer: true
+    };
+  }, [closeButton]);
+  return /*#__PURE__*/React.createElement(DrawerContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Modal, _extends({}, rest, {
     ref: ref,
-    drawer: true,
     classPrefix: classPrefix,
     className: classes,
     animation: animation,
     animationProps: animationProps
-  }));
+  })));
 });
 DrawerBody.displayName = 'DrawerBody';
 DrawerHeader.displayName = 'DrawerHeader';

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

@@ -0,0 +1,4 @@
+'use client';
+import React from 'react';
+var DrawerContext = /*#__PURE__*/React.createContext(null);
+export default DrawerContext;

package/esm/FormControl/FormControl.js

@@ -130,7 +130,7 @@ var FormControl = /*#__PURE__*/React.forwardRef(function (props, ref) {
   if (AccepterComponent === Toggle) {
     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.createElement(Component, {
     className: classes,
     ref: ref

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

package/esm/Modal/Modal.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 var _templateObject, _templateObject2;
-import React, { useRef, useMemo, useState, useCallback } from 'react';
+import React, { useRef, useMemo, useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import pick from 'lodash/pick';
 import on from 'dom-lib/on';
@@ -20,8 +20,10 @@ import ModalFooter from './ModalFooter';
 import { useBodyStyles } from './utils';
 import useUniqueId from '../utils/useUniqueId';
 import deprecatePropType from '../utils/deprecatePropType';
+import DrawerContext from '../Drawer/DrawerContext';
 var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _prefix;
   var className = props.className,
     children = props.children,
     _props$classPrefix = props.classPrefix,
@@ -44,8 +46,6 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
     _props$overflow = props.overflow,
     overflow = _props$overflow === void 0 ? true : _props$overflow,
-    _props$drawer = props.drawer,
-    drawer = _props$drawer === void 0 ? false : _props$drawer,
     onClose = props.onClose,
     onEntered = props.onEntered,
     onEntering = props.onEntering,
@@ -55,7 +55,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     idProp = props.id,
     ariaLabelledby = props['aria-labelledby'],
     ariaDescribedby = props['aria-describedby'],
-    rest = _objectWithoutPropertiesLoose(props, ["className", "children", "classPrefix", "dialogClassName", "backdropClassName", "backdrop", "dialogStyle", "animation", "open", "size", "full", "dialogAs", "animationProps", "animationTimeout", "overflow", "drawer", "onClose", "onEntered", "onEntering", "onExited", "role", "id", "aria-labelledby", "aria-describedby"]);
+    rest = _objectWithoutPropertiesLoose(props, ["className", "children", "classPrefix", "dialogClassName", "backdropClassName", "backdrop", "dialogStyle", "animation", "open", "size", "full", "dialogAs", "animationProps", "animationTimeout", "overflow", "onClose", "onEntered", "onEntering", "onExited", "role", "id", "aria-labelledby", "aria-describedby"]);
   var inClass = {
     in: open && !animation
   };
@@ -65,17 +65,21 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useState = useState(false),
     shake = _useState[0],
     setShake = _useState[1];
-  var classes = merge(className, prefix(size, {
+  var classes = merge(className, prefix((_prefix = {
     full: full
-  }));
+  }, _prefix[size] = modalSizes.includes(size), _prefix)));
   var dialogRef = useRef(null);
   var transitionEndListener = useRef();
 
-  // The style of the Modal body will be updated with the size of the window or container.
+  // Render Modal as Drawer
+  var _ref = useContext(DrawerContext) || {},
+    _ref$isDrawer = _ref.isDrawer,
+    isDrawer = _ref$isDrawer === void 0 ? false : _ref$isDrawer; // The style of the Modal body will be updated with the size of the window or container.
   var _useBodyStyles = useBodyStyles(dialogRef, {
       overflow: overflow,
-      drawer: drawer,
-      prefix: prefix
+      drawer: isDrawer,
+      prefix: prefix,
+      size: size
     }),
     bodyStyles = _useBodyStyles[0],
     onChangeBodyStyles = _useBodyStyles[1],
@@ -87,10 +91,9 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onModalClose: onClose,
       getBodyStyles: function getBodyStyles() {
         return bodyStyles;
-      },
-      isDrawer: drawer
+      }
     };
-  }, [dialogId, onClose, bodyStyles, drawer]);
+  }, [dialogId, onClose, bodyStyles]);
   var handleExited = useCallback(function (node) {
     var _transitionEndListene;
     onExited === null || onExited === void 0 ? void 0 : onExited(node);
@@ -144,6 +147,12 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var _transitionEndListene2;
     (_transitionEndListene2 = transitionEndListener.current) === null || _transitionEndListene2 === void 0 ? void 0 : _transitionEndListene2.off();
   });
+  var sizeKey = 'width';
+  if (isDrawer) {
+    var _ref2 = animationProps || {},
+      placement = _ref2.placement; // The width or height of the drawer depends on the placement.
+    sizeKey = placement === 'top' || placement === 'bottom' ? 'height' : 'width';
+  }
   return /*#__PURE__*/React.createElement(ModalContext.Provider, {
     value: modalContextValue
   }, /*#__PURE__*/React.createElement(BaseModal, _extends({}, rest, {
@@ -167,13 +176,15 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: backdrop ? handleBackdropClick : undefined,
     onMouseDown: handleMouseDown
   }), function (transitionProps, transitionRef) {
+    var _ref3;
     var transitionClassName = transitionProps.className,
       transitionRest = _objectWithoutPropertiesLoose(transitionProps, ["className"]);
     return /*#__PURE__*/React.createElement(Dialog, _extends({
       role: role,
       id: dialogId,
       "aria-labelledby": ariaLabelledby !== null && ariaLabelledby !== void 0 ? ariaLabelledby : dialogId + "-title",
-      "aria-describedby": ariaDescribedby
+      "aria-describedby": ariaDescribedby,
+      style: (_ref3 = {}, _ref3[sizeKey] = modalSizes.includes(size) ? undefined : size, _ref3)
     }, transitionRest, pick(rest, Object.keys(modalDialogPropTypes)), {
       ref: mergeRefs(dialogRef, transitionRef),
       classPrefix: classPrefix,
@@ -196,7 +207,7 @@ Modal.propTypes = _extends({}, modalPropTypes, {
   animationTimeout: PropTypes.number,
   classPrefix: PropTypes.string,
   dialogClassName: PropTypes.string,
-  size: PropTypes.oneOf(modalSizes),
+  size: PropTypes.oneOfType([PropTypes.oneOf(modalSizes), PropTypes.number, PropTypes.string]),
   dialogStyle: PropTypes.object,
   dialogAs: PropTypes.elementType,
   full: deprecatePropType(PropTypes.bool, 'Use size="full" instead.'),