rsuite 5.44.0 → 5.46.0

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 delay from 'lodash/delay';
 import debounce from 'lodash/debounce';
 import IconCalendar from '@rsuite/icons/legacy/Calendar';
 import IconClockO from '@rsuite/icons/legacy/ClockO';
@@ -15,10 +16,12 @@ import { isEveryDateInMonth } from '../Calendar/MonthDropdown';
 import Toolbar from './Toolbar';
 import Stack from '../Stack';
 import PredefinedRanges from './PredefinedRanges';
-import { composeFunctions, createChainedFunction, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
-import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
+import { composeFunctions, createChainedFunction, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
+import { shouldRenderMonth, shouldRenderDate, shouldRenderTime, shouldOnlyRenderTime, setHours, getHours, addMonths, addDays, setMinutes, getMinutes, setSeconds, getSeconds, isValid, format, getDateMask, disabledTime, isMatch, calendarOnlyProps } from '../utils/dateUtils';
+import { PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, omitTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent, onMenuKeyDown } from '../Picker';
 import { OverlayCloseCause } from '../Overlay/OverlayTrigger';
 import { deprecatePropTypeNew } from '../utils/deprecatePropType';
+import { getAriaLabel } from '../Calendar/utils';
 var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -92,12 +95,17 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
-  var _useState = useState(),
-    inputState = _useState[0],
-    setInputState = _useState[1];
-  var _useState2 = useState(false),
-    active = _useState2[0],
-    setActive = _useState2[1];
+  var _useState = useState(false),
+    showMonthDropdown = _useState[0],
+    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr);
+  var showMonth = onlyShowMonth || showMonthDropdown;
+  var _useState2 = useState(),
+    inputState = _useState2[0],
+    setInputState = _useState2[1];
+  var _useState3 = useState(false),
+    active = _useState3[0],
+    setActive = _useState3[1];
   var triggerRef = useRef(null);
   var rootRef = useRef(null);
   var targetRef = useRef(null);
@@ -151,9 +159,9 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * The callback triggered when PM/AM is switched.
    */
   var handleToggleMeridian = useCallback(function () {
-    var hours = DateUtils.getHours(calendarDate);
+    var hours = getHours(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = DateUtils.setHours(calendarDate, nextHours);
+    var nextDate = setHours(calendarDate, nextHours);
     handleChangeTime(nextDate);
   }, [calendarDate, handleChangeTime]);
   var updateValue = useCallback(function (event, nextPageDate, closeOverlay) {
@@ -183,13 +191,57 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onShortcutClick === null || onShortcutClick === void 0 ? void 0 : onShortcutClick(range, event);
   }, [handleDateChange, onShortcutClick, updateValue]);
 
+  /**
+   * Get the corresponding container based on date selection and month selection
+   */
+  var getOverlayContainer = useCallback(function () {
+    var _overlayRef$current;
+    return (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.querySelector(showMonth ? '[role="menu"]' : '[role="grid"]');
+  }, [showMonth]);
+
+  /**
+   * Check whether the date is focusable
+   */
+  var checkFocusable = useCallback(function (date) {
+    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
+    var ariaLabel = getAriaLabel(date, formatStr, formatDate);
+    var container = getOverlayContainer();
+    var dateElement = container.querySelector("[aria-label=\"" + ariaLabel + "\"]");
+    if (dateElement !== null && dateElement !== void 0 && dateElement.hasAttribute('aria-disabled')) {
+      return false;
+    }
+    return true;
+  }, [formatDate, getOverlayContainer, locale, showMonth]);
+
+  /**
+   * Focus on the currently selected date element
+   */
+  var focusSelectedDate = useCallback(function () {
+    delay(function () {
+      var container = getOverlayContainer();
+      var selectedElement = container === null || container === void 0 ? void 0 : container.querySelector('[aria-selected="true"]');
+      selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.focus();
+    }, 1);
+  }, [getOverlayContainer]);
+
+  /**
+   * Focus on the input element
+   */
+  var focusTargetButton = useCallback(function () {
+    delay(function () {
+      var _targetRef$current, _targetRef$current$qu;
+      (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$qu = _targetRef$current.querySelector('input')) === null || _targetRef$current$qu === void 0 ? void 0 : _targetRef$current$qu.focus();
+    }, 100);
+  }, []);
+
   /**
    * The callback triggered after clicking the OK button.
    */
   var handleOK = useCallback(function (event) {
     updateValue(event);
     onOk === null || onOk === void 0 ? void 0 : onOk(calendarDate, event);
-  }, [updateValue, onOk, calendarDate]);
+    focusTargetButton();
+  }, [updateValue, onOk, calendarDate, focusTargetButton]);
 
   /**
    * Callback after clicking the clear button.
@@ -198,6 +250,54 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     updateValue(event, null);
     resetCalendarDate(null);
   }, [resetCalendarDate, updateValue]);
+  var handlePickerToggleKeyDown = useCallback(function (event) {
+    var _event$target;
+    var tagName = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.tagName;
+    if (tagName === 'INPUT') {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        focusSelectedDate();
+      } else if (event.key === 'Enter') {
+        var _triggerRef$current2, _triggerRef$current2$;
+        (_triggerRef$current2 = triggerRef.current) === null || _triggerRef$current2 === void 0 ? void 0 : (_triggerRef$current2$ = _triggerRef$current2.open) === null || _triggerRef$current2$ === void 0 ? void 0 : _triggerRef$current2$.call(_triggerRef$current2);
+      }
+    }
+  }, [focusSelectedDate]);
+  var handlePickerOverlayKeyDown = useCallback(function (event) {
+    var delta = 0;
+    var step = showMonth ? 6 : 7;
+    var changeDateFunc = showMonth ? addMonths : addDays;
+    onMenuKeyDown(event, {
+      down: function down() {
+        delta = step;
+      },
+      up: function up() {
+        delta = -step;
+      },
+      right: function right() {
+        delta = 1;
+      },
+      left: function left() {
+        delta = -1;
+      },
+      enter: function enter() {
+        handleOK(event);
+      }
+    });
+    var nextDate = changeDateFunc(calendarDate, delta);
+    if (checkFocusable(nextDate)) {
+      setCalendarDate(nextDate);
+      focusSelectedDate();
+    }
+  }, [showMonth, calendarDate, checkFocusable, handleOK, setCalendarDate, focusSelectedDate]);
+
+  /**
+   * The callback triggered after the month selection box is opened or closed.
+   */
+  var handleToggleMonthDropdown = useCallback(function (toggle) {
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
+    setShowMonthDropdown(toggle);
+  }, [onToggleMonthDropdown]);
 
   /**
    * Handle keyboard events.
@@ -205,8 +305,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onPickerKeyDown = useToggleKeyDownEvent(_extends({
     triggerRef: triggerRef,
     targetRef: targetRef,
+    overlayRef: overlayRef,
     active: active,
-    onExit: handleClean
+    onExit: handleClean,
+    onKeyDown: handlePickerToggleKeyDown
   }, rest));
 
   /**
@@ -218,18 +320,18 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     setCalendarDate(
     // Determine whether the current value contains time, if not, use calendarDate.
-    DateUtils.shouldRenderTime(formatStr) ? nextValue : composeFunctions(function (d) {
-      return DateUtils.setHours(d, DateUtils.getHours(calendarDate));
+    shouldRenderTime(formatStr) ? nextValue : composeFunctions(function (d) {
+      return setHours(d, getHours(calendarDate));
     }, function (d) {
-      return DateUtils.setMinutes(d, DateUtils.getMinutes(calendarDate));
+      return setMinutes(d, getMinutes(calendarDate));
     }, function (d) {
-      return DateUtils.setSeconds(d, DateUtils.getSeconds(calendarDate));
+      return setSeconds(d, getSeconds(calendarDate));
     })(nextValue));
     handleDateChange(nextValue);
     if (oneTap && updatableValue) {
       updateValue(event, nextValue);
     }
-  }, [formatStr, handleDateChange, oneTap, calendarDate, setCalendarDate, updateValue]);
+  }, [setCalendarDate, formatStr, handleDateChange, oneTap, calendarDate, updateValue]);
 
   /**
    *  A callback triggered when the date on the calendar changes.
@@ -237,13 +339,11 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleChangeMonth = useCallback(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
-
-    // Show only the calendar month panel. formatStr = 'yyyy-MM'
-    var onlyShowMonth = DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr);
+    focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
     }
-  }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
+  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);
   var isDateDisabled = useCallback(function (date) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
@@ -262,7 +362,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!DateUtils.isMatch(value, formatStr, {
+    if (!isMatch(value, formatStr, {
       locale: locale.dateLocale
     })) {
       setInputState('Error');
@@ -271,10 +371,10 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var date = parseDate(value, formatStr);
 
     // If only the time is included in the characters, it will default to today.
-    if (DateUtils.shouldOnlyRenderTime(formatStr)) {
-      date = new Date(DateUtils.format(new Date(), 'yyyy-MM-dd') + " " + value);
+    if (shouldOnlyRenderTime(formatStr)) {
+      date = new Date(format(new Date(), 'yyyy-MM-dd') + " " + value);
     }
-    if (!DateUtils.isValid(date)) {
+    if (!isValid(date)) {
       setInputState('Error');
       return;
     }
@@ -315,7 +415,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var disabledToolbarHandle = useCallback(function (date) {
     var _DEPRECATED_disabledD;
     var allowDate = (_DEPRECATED_disabledD = DEPRECATED_disabledDate === null || DEPRECATED_disabledDate === void 0 ? void 0 : DEPRECATED_disabledDate(date)) !== null && _DEPRECATED_disabledD !== void 0 ? _DEPRECATED_disabledD : false;
-    var allowTime = DateUtils.disabledTime(props, date);
+    var allowTime = disabledTime(props, date);
     return allowDate || allowTime;
   }, [DEPRECATED_disabledDate, props]);
 
@@ -326,13 +426,13 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
   var isOKButtonDisabled = useCallback(function (selectedDate) {
-    if (DateUtils.shouldRenderMonth(formatStr) && !DateUtils.shouldRenderDate(formatStr)) {
+    if (shouldRenderMonth(formatStr) && !shouldRenderDate(formatStr)) {
       return isEveryDateInMonth(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
     return disabledToolbarHandle(selectedDate);
   }, [disabledToolbarHandle, formatStr]);
   var calendarProps = useMemo(function () {
-    return mapValues(pick(props, DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
+    return mapValues(pick(props, calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
       return function (next, date) {
         var _disabledOrHiddenTime;
         return (_disabledOrHiddenTime = disabledOrHiddenTimeFunc === null || disabledOrHiddenTimeFunc === void 0 ? void 0 : disabledOrHiddenTimeFunc(next, date)) !== null && _disabledOrHiddenTime !== void 0 ? _disabledOrHiddenTime : false;
@@ -355,15 +455,19 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onMoveForward: handleMoveForward,
     onMoveBackward: handleMoveBackward,
     onSelect: handleSelect,
-    onToggleMonthDropdown: onToggleMonthDropdown,
+    onToggleMonthDropdown: handleToggleMonthDropdown,
     onToggleTimeDropdown: onToggleTimeDropdown,
     onChangeMonth: handleChangeMonth,
     onChangeTime: handleChangeTime,
     onToggleMeridian: handleToggleMeridian
   }));
+
+  // The shortcut option on the left side of the calendar panel
   var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
     return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
   })) || [];
+
+  // The shortcut option on the bottom of the calendar panel
   var bottomRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
     return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
   })) || [];
@@ -381,7 +485,8 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className: classes,
       ref: mergeRefs(overlayRef, speakerRef),
       style: styles,
-      target: triggerRef
+      target: triggerRef,
+      onKeyDown: handlePickerOverlayKeyDown
     }, /*#__PURE__*/React.createElement(Stack, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/React.createElement(PredefinedRanges, {
@@ -422,20 +527,22 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return (_renderValue = renderValue === null || renderValue === void 0 ? void 0 : renderValue(value, formatStr)) !== null && _renderValue !== void 0 ? _renderValue : formatDate(value, formatStr);
   }, [formatStr, formatDate, placeholder, renderValue, value]);
   var caretAs = useMemo(function () {
-    return caretAsProp || (DateUtils.shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
+    return caretAsProp || (shouldOnlyRenderTime(formatStr) ? IconClockO : IconCalendar);
   }, [caretAsProp, formatStr]);
+  var handleTriggerClose = useCallback(function (cause) {
+    // Unless overlay is closing on user clicking "OK" button,
+    // reset the selected date on calendar panel
+    if (cause !== OverlayCloseCause.ImperativeHandle) {
+      resetCalendarDate();
+    }
+    setShowMonthDropdown(false);
+  }, [resetCalendarDate]);
   return /*#__PURE__*/React.createElement(PickerToggleTrigger, {
     trigger: "active",
     pickerProps: pick(props, pickTriggerPropKeys),
     ref: triggerRef,
     placement: placement,
-    onClose: function onClose(cause) {
-      // Unless overlay is closing on user clicking "OK" button,
-      // reset the selected date on calendar panel
-      if (cause !== OverlayCloseCause.ImperativeHandle) {
-        resetCalendarDate();
-      }
-    },
+    onClose: handleTriggerClose,
     onEntered: createChainedFunction(handleEntered, onEntered),
     onExited: createChainedFunction(handleExited, onExited),
     speaker: renderDropdownMenu
@@ -443,7 +550,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: merge(className, classes),
     style: style,
     ref: rootRef
-  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, DateUtils.calendarOnlyProps)), {
+  }, /*#__PURE__*/React.createElement(PickerToggle, _extends({}, omit(rest, [].concat(omitTriggerPropKeys, usedClassNamePropKeys, calendarOnlyProps)), {
     className: prefix({
       error: inputState === 'Error'
     }),
@@ -453,7 +560,7 @@ var DatePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     editable: editable,
     inputValue: value ? formatDate(value, formatStr) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
-    inputMask: DateUtils.getDateMask(formatStr),
+    inputMask: getDateMask(formatStr),
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,

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.js

@@ -143,9 +143,12 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return multi ? clone(value) || [] : value;
   }, [multi, value]);
   var handleClose = useCallback(function () {
-    var _triggerRef$current;
+    var _triggerRef$current, _targetRef$current, _targetRef$current$fo;
     triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
-  }, [triggerRef]);
+
+    // The focus is on the trigger button after closing
+    (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : (_targetRef$current$fo = _targetRef$current.focus) === null || _targetRef$current$fo === void 0 ? void 0 : _targetRef$current$fo.call(_targetRef$current);
+  }, []);
 
   // Used to hover the focuse item  when trigger `onKeydown`
   var _useFocusItemValue = useFocusItemValue(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
@@ -651,7 +654,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     plaintext: plaintext,
     ref: targetRef,
     as: toggleAs,
-    tabIndex: undefined,
+    tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
@@ -663,7 +666,7 @@ var InputPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/React.createElement("div", {
     className: prefix(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["tag-wrapper"])))
   }, tagElements, displaySearchInput && /*#__PURE__*/React.createElement(InputSearch, _extends({}, inputProps, {
-    tabIndex: tabIndex,
+    tabIndex: -1,
     readOnly: readOnly,
     onBlur: onBlur,
     onFocus: createChainedFunction(handleFocus, onFocus),

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.'),

package/esm/Modal/ModalBody.js

@@ -7,8 +7,9 @@ import { useClassNames } from '../utils';
 import { ModalContext } from './ModalContext';
 import IconButton from '../IconButton';
 import Close from '@rsuite/icons/Close';
+import DrawerContext from '../Drawer/DrawerContext';
 var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _context$getBodyStyle;
+  var _context$getBodyStyle, _useContext;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -24,17 +25,22 @@ var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix());
   var context = useContext(ModalContext);
   var bodyStyles = context === null || context === void 0 ? void 0 : (_context$getBodyStyle = context.getBodyStyles) === null || _context$getBodyStyle === void 0 ? void 0 : _context$getBodyStyle.call(context);
+  var closeButton = (_useContext = useContext(DrawerContext)) === null || _useContext === void 0 ? void 0 : _useContext.closeButton;
+  var buttonElement = null;
+  if (closeButton) {
+    buttonElement = typeof closeButton === 'boolean' ? /*#__PURE__*/React.createElement(IconButton, {
+      icon: /*#__PURE__*/React.createElement(Close, null),
+      appearance: "subtle",
+      size: "sm",
+      className: prefix('close'),
+      onClick: context === null || context === void 0 ? void 0 : context.onModalClose
+    }) : closeButton;
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     style: _extends({}, bodyStyles, style),
     className: classes
-  }), (context === null || context === void 0 ? void 0 : context.isDrawer) && /*#__PURE__*/React.createElement(IconButton, {
-    icon: /*#__PURE__*/React.createElement(Close, null),
-    appearance: "subtle",
-    size: "sm",
-    className: prefix('close'),
-    onClick: context === null || context === void 0 ? void 0 : context.onModalClose
-  }), children);
+  }), buttonElement, children);
 });
 ModalBody.displayName = 'ModalBody';
 ModalBody.propTypes = {

package/esm/Modal/ModalContext.d.ts

@@ -5,8 +5,6 @@ export interface ModalContextProps {
     /** Pass the close event callback to the header close button. */
     onModalClose?: (event: React.MouseEvent<Element, MouseEvent>) => void;
     /** Pass the latest style to body. */
-    getBodyStyles?: () => React.CSSProperties;
-    /** Whether this Modal is a Drawer */
-    isDrawer: boolean;
+    getBodyStyles?: () => React.CSSProperties | null;
 }
 export declare const ModalContext: React.Context<ModalContextProps | null>;