rsuite 5.44.0 → 5.46.0

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 _delay = _interopRequireDefault(require("lodash/delay"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _Calendar = _interopRequireDefault(require("@rsuite/icons/legacy/Calendar"));
 var _ClockO = _interopRequireDefault(require("@rsuite/icons/legacy/ClockO"));
@@ -22,9 +23,11 @@ var _Toolbar = _interopRequireDefault(require("./Toolbar"));
 var _Stack = _interopRequireDefault(require("../Stack"));
 var _PredefinedRanges = _interopRequireDefault(require("./PredefinedRanges"));
 var _utils = require("../utils");
+var _dateUtils = require("../utils/dateUtils");
 var _Picker = require("../Picker");
 var _OverlayTrigger = require("../Overlay/OverlayTrigger");
 var _deprecatePropType = require("../utils/deprecatePropType");
+var _utils2 = require("../Calendar/utils");
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
@@ -98,12 +101,17 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     calendarDate = _useCalendarDate.calendarDate,
     setCalendarDate = _useCalendarDate.setCalendarDate,
     resetCalendarDate = _useCalendarDate.resetCalendarDate;
-  var _useState = (0, _react.useState)(),
-    inputState = _useState[0],
-    setInputState = _useState[1];
-  var _useState2 = (0, _react.useState)(false),
-    active = _useState2[0],
-    setActive = _useState2[1];
+  var _useState = (0, _react.useState)(false),
+    showMonthDropdown = _useState[0],
+    setShowMonthDropdown = _useState[1]; // Show only the calendar month panel. formatStr = 'yyyy-MM'
+  var onlyShowMonth = (0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr);
+  var showMonth = onlyShowMonth || showMonthDropdown;
+  var _useState2 = (0, _react.useState)(),
+    inputState = _useState2[0],
+    setInputState = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    active = _useState3[0],
+    setActive = _useState3[1];
   var triggerRef = (0, _react.useRef)(null);
   var rootRef = (0, _react.useRef)(null);
   var targetRef = (0, _react.useRef)(null);
@@ -157,9 +165,9 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * The callback triggered when PM/AM is switched.
    */
   var handleToggleMeridian = (0, _react.useCallback)(function () {
-    var hours = _utils.DateUtils.getHours(calendarDate);
+    var hours = (0, _dateUtils.getHours)(calendarDate);
     var nextHours = hours >= 12 ? hours - 12 : hours + 12;
-    var nextDate = _utils.DateUtils.setHours(calendarDate, nextHours);
+    var nextDate = (0, _dateUtils.setHours)(calendarDate, nextHours);
     handleChangeTime(nextDate);
   }, [calendarDate, handleChangeTime]);
   var updateValue = (0, _react.useCallback)(function (event, nextPageDate, closeOverlay) {
@@ -189,13 +197,57 @@ var DatePicker = /*#__PURE__*/_react.default.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 = (0, _react.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 = (0, _react.useCallback)(function (date) {
+    var formatStr = showMonth ? locale.formattedMonthPattern : locale.formattedDayPattern;
+    var ariaLabel = (0, _utils2.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 = (0, _react.useCallback)(function () {
+    (0, _delay.default)(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 = (0, _react.useCallback)(function () {
+    (0, _delay.default)(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 = (0, _react.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.
@@ -204,6 +256,54 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     updateValue(event, null);
     resetCalendarDate(null);
   }, [resetCalendarDate, updateValue]);
+  var handlePickerToggleKeyDown = (0, _react.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 = (0, _react.useCallback)(function (event) {
+    var delta = 0;
+    var step = showMonth ? 6 : 7;
+    var changeDateFunc = showMonth ? _dateUtils.addMonths : _dateUtils.addDays;
+    (0, _Picker.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 = (0, _react.useCallback)(function (toggle) {
+    onToggleMonthDropdown === null || onToggleMonthDropdown === void 0 ? void 0 : onToggleMonthDropdown(toggle);
+    setShowMonthDropdown(toggle);
+  }, [onToggleMonthDropdown]);
 
   /**
    * Handle keyboard events.
@@ -211,8 +311,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var onPickerKeyDown = (0, _Picker.useToggleKeyDownEvent)((0, _extends2.default)({
     triggerRef: triggerRef,
     targetRef: targetRef,
+    overlayRef: overlayRef,
     active: active,
-    onExit: handleClean
+    onExit: handleClean,
+    onKeyDown: handlePickerToggleKeyDown
   }, rest));
 
   /**
@@ -224,18 +326,18 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
     setCalendarDate(
     // Determine whether the current value contains time, if not, use calendarDate.
-    _utils.DateUtils.shouldRenderTime(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {
-      return _utils.DateUtils.setHours(d, _utils.DateUtils.getHours(calendarDate));
+    (0, _dateUtils.shouldRenderTime)(formatStr) ? nextValue : (0, _utils.composeFunctions)(function (d) {
+      return (0, _dateUtils.setHours)(d, (0, _dateUtils.getHours)(calendarDate));
     }, function (d) {
-      return _utils.DateUtils.setMinutes(d, _utils.DateUtils.getMinutes(calendarDate));
+      return (0, _dateUtils.setMinutes)(d, (0, _dateUtils.getMinutes)(calendarDate));
     }, function (d) {
-      return _utils.DateUtils.setSeconds(d, _utils.DateUtils.getSeconds(calendarDate));
+      return (0, _dateUtils.setSeconds)(d, (0, _dateUtils.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.
@@ -243,13 +345,11 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleChangeMonth = (0, _react.useCallback)(function (nextPageDate, event) {
     setCalendarDate(nextPageDate);
     handleDateChange(nextPageDate);
-
-    // Show only the calendar month panel. formatStr = 'yyyy-MM'
-    var onlyShowMonth = _utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr);
+    focusSelectedDate();
     if (oneTap && onlyShowMonth) {
       updateValue(event, nextPageDate);
     }
-  }, [formatStr, handleDateChange, oneTap, setCalendarDate, updateValue]);
+  }, [focusSelectedDate, handleDateChange, oneTap, onlyShowMonth, setCalendarDate, updateValue]);
   var isDateDisabled = (0, _react.useCallback)(function (date) {
     if (typeof shouldDisableDate === 'function') {
       return shouldDisableDate(date);
@@ -268,7 +368,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
     // isMatch('01/11/2020', 'MM/dd/yyyy') ==> true
     // isMatch('2020-11-01', 'MM/dd/yyyy') ==> false
-    if (!_utils.DateUtils.isMatch(value, formatStr, {
+    if (!(0, _dateUtils.isMatch)(value, formatStr, {
       locale: locale.dateLocale
     })) {
       setInputState('Error');
@@ -277,10 +377,10 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var date = parseDate(value, formatStr);
 
     // If only the time is included in the characters, it will default to today.
-    if (_utils.DateUtils.shouldOnlyRenderTime(formatStr)) {
-      date = new Date(_utils.DateUtils.format(new Date(), 'yyyy-MM-dd') + " " + value);
+    if ((0, _dateUtils.shouldOnlyRenderTime)(formatStr)) {
+      date = new Date((0, _dateUtils.format)(new Date(), 'yyyy-MM-dd') + " " + value);
     }
-    if (!_utils.DateUtils.isValid(date)) {
+    if (!(0, _dateUtils.isValid)(date)) {
       setInputState('Error');
       return;
     }
@@ -321,7 +421,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var disabledToolbarHandle = (0, _react.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 = _utils.DateUtils.disabledTime(props, date);
+    var allowTime = (0, _dateUtils.disabledTime)(props, date);
     return allowDate || allowTime;
   }, [DEPRECATED_disabledDate, props]);
 
@@ -332,13 +432,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
    * - If format is month, disable ok button if all dates in the month of selected date are disabled
    */
   var isOKButtonDisabled = (0, _react.useCallback)(function (selectedDate) {
-    if (_utils.DateUtils.shouldRenderMonth(formatStr) && !_utils.DateUtils.shouldRenderDate(formatStr)) {
+    if ((0, _dateUtils.shouldRenderMonth)(formatStr) && !(0, _dateUtils.shouldRenderDate)(formatStr)) {
       return (0, _MonthDropdown.isEveryDateInMonth)(selectedDate.getFullYear(), selectedDate.getMonth(), disabledToolbarHandle);
     }
     return disabledToolbarHandle(selectedDate);
   }, [disabledToolbarHandle, formatStr]);
   var calendarProps = (0, _react.useMemo)(function () {
-    return (0, _mapValues.default)((0, _pick.default)(props, _utils.DateUtils.calendarOnlyProps), function (disabledOrHiddenTimeFunc) {
+    return (0, _mapValues.default)((0, _pick.default)(props, _dateUtils.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;
@@ -361,15 +461,19 @@ var DatePicker = /*#__PURE__*/_react.default.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;
   })) || [];
@@ -387,7 +491,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       className: classes,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       style: styles,
-      target: triggerRef
+      target: triggerRef,
+      onKeyDown: handlePickerOverlayKeyDown
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
     }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
@@ -428,20 +533,22 @@ var DatePicker = /*#__PURE__*/_react.default.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 = (0, _react.useMemo)(function () {
-    return caretAsProp || (_utils.DateUtils.shouldOnlyRenderTime(formatStr) ? _ClockO.default : _Calendar.default);
+    return caretAsProp || ((0, _dateUtils.shouldOnlyRenderTime)(formatStr) ? _ClockO.default : _Calendar.default);
   }, [caretAsProp, formatStr]);
+  var handleTriggerClose = (0, _react.useCallback)(function (cause) {
+    // Unless overlay is closing on user clicking "OK" button,
+    // reset the selected date on calendar panel
+    if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
+      resetCalendarDate();
+    }
+    setShowMonthDropdown(false);
+  }, [resetCalendarDate]);
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
     trigger: "active",
     pickerProps: (0, _pick.default)(props, _Picker.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 !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
-        resetCalendarDate();
-      }
-    },
+    onClose: handleTriggerClose,
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderDropdownMenu
@@ -449,7 +556,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: merge(className, classes),
     style: style,
     ref: rootRef
-  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _utils.DateUtils.calendarOnlyProps)), {
+  }, /*#__PURE__*/_react.default.createElement(_Picker.PickerToggle, (0, _extends2.default)({}, (0, _omit.default)(rest, [].concat(_Picker.omitTriggerPropKeys, usedClassNamePropKeys, _dateUtils.calendarOnlyProps)), {
     className: prefix({
       error: inputState === 'Error'
     }),
@@ -459,7 +566,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     editable: editable,
     inputValue: value ? formatDate(value, formatStr) : '',
     inputPlaceholder: typeof placeholder === 'string' && placeholder ? placeholder : formatStr,
-    inputMask: _utils.DateUtils.getDateMask(formatStr),
+    inputMask: (0, _dateUtils.getDateMask)(formatStr),
     onInputChange: handleInputChange,
     onInputBlur: handleInputPressEnd,
     onInputPressEnter: handleInputPressEnd,

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

@@ -150,9 +150,12 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return multi ? (0, _clone.default)(value) || [] : value;
   }, [multi, value]);
   var handleClose = (0, _react.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 = (0, _Picker.useFocusItemValue)(multi ? value === null || value === void 0 ? void 0 : value[0] : value, {
@@ -658,7 +661,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     plaintext: plaintext,
     ref: targetRef,
     as: toggleAs,
-    tabIndex: undefined,
+    tabIndex: tabIndex,
     onClean: handleClean,
     cleanable: cleanable && !disabled,
     hasValue: hasValue,
@@ -670,7 +673,7 @@ var InputPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), searching || multi && hasValue ? null : itemNode || placeholderNode), !(!multi && disabled) && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["tag-wrapper"])))
   }, tagElements, displaySearchInput && /*#__PURE__*/_react.default.createElement(_InputSearch.default, (0, _extends2.default)({}, inputProps, {
-    tabIndex: tabIndex,
+    tabIndex: -1,
     readOnly: readOnly,
     onBlur: onBlur,
     onFocus: (0, _utils.createChainedFunction)(handleFocus, onFocus),

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;

package/cjs/Modal/Modal.js

@@ -25,9 +25,11 @@ var _ModalFooter = _interopRequireDefault(require("./ModalFooter"));
 var _utils2 = require("./utils");
 var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 var _deprecatePropType = _interopRequireDefault(require("../utils/deprecatePropType"));
+var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var _templateObject, _templateObject2;
 var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _prefix;
   var className = props.className,
     children = props.children,
     _props$classPrefix = props.classPrefix,
@@ -50,8 +52,6 @@ var Modal = /*#__PURE__*/_react.default.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,
@@ -61,7 +61,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     idProp = props.id,
     ariaLabelledby = props['aria-labelledby'],
     ariaDescribedby = props['aria-describedby'],
-    rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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
   };
@@ -71,17 +71,21 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useState = (0, _react.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 = (0, _react.useRef)(null);
   var transitionEndListener = (0, _react.useRef)();
 
-  // The style of the Modal body will be updated with the size of the window or container.
+  // Render Modal as Drawer
+  var _ref = (0, _react.useContext)(_DrawerContext.default) || {},
+    _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 = (0, _utils2.useBodyStyles)(dialogRef, {
       overflow: overflow,
-      drawer: drawer,
-      prefix: prefix
+      drawer: isDrawer,
+      prefix: prefix,
+      size: size
     }),
     bodyStyles = _useBodyStyles[0],
     onChangeBodyStyles = _useBodyStyles[1],
@@ -93,10 +97,9 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onModalClose: onClose,
       getBodyStyles: function getBodyStyles() {
         return bodyStyles;
-      },
-      isDrawer: drawer
+      }
     };
-  }, [dialogId, onClose, bodyStyles, drawer]);
+  }, [dialogId, onClose, bodyStyles]);
   var handleExited = (0, _react.useCallback)(function (node) {
     var _transitionEndListene;
     onExited === null || onExited === void 0 ? void 0 : onExited(node);
@@ -150,6 +153,12 @@ var Modal = /*#__PURE__*/_react.default.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.default.createElement(_ModalContext.ModalContext.Provider, {
     value: modalContextValue
   }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
@@ -173,13 +182,15 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onClick: backdrop ? handleBackdropClick : undefined,
     onMouseDown: handleMouseDown
   }), function (transitionProps, transitionRef) {
+    var _ref3;
     var transitionClassName = transitionProps.className,
       transitionRest = (0, _objectWithoutPropertiesLoose2.default)(transitionProps, ["className"]);
     return /*#__PURE__*/_react.default.createElement(Dialog, (0, _extends2.default)({
       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, (0, _pick.default)(rest, Object.keys(_ModalDialog.modalDialogPropTypes)), {
       ref: (0, _utils.mergeRefs)(dialogRef, transitionRef),
       classPrefix: classPrefix,
@@ -202,7 +213,7 @@ Modal.propTypes = (0, _extends2.default)({}, _Modal.modalPropTypes, {
   animationTimeout: _propTypes.default.number,
   classPrefix: _propTypes.default.string,
   dialogClassName: _propTypes.default.string,
-  size: _propTypes.default.oneOf(modalSizes),
+  size: _propTypes.default.oneOfType([_propTypes.default.oneOf(modalSizes), _propTypes.default.number, _propTypes.default.string]),
   dialogStyle: _propTypes.default.object,
   dialogAs: _propTypes.default.elementType,
   full: (0, _deprecatePropType.default)(_propTypes.default.bool, 'Use size="full" instead.'),

package/cjs/Modal/ModalBody.js

@@ -13,8 +13,9 @@ var _utils = require("../utils");
 var _ModalContext = require("./ModalContext");
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
+var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var ModalBody = /*#__PURE__*/_react.default.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,
@@ -30,17 +31,22 @@ var ModalBody = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix());
   var context = (0, _react.useContext)(_ModalContext.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 = (0, _react.useContext)(_DrawerContext.default)) === null || _useContext === void 0 ? void 0 : _useContext.closeButton;
+  var buttonElement = null;
+  if (closeButton) {
+    buttonElement = typeof closeButton === 'boolean' ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),
+      appearance: "subtle",
+      size: "sm",
+      className: prefix('close'),
+      onClick: context === null || context === void 0 ? void 0 : context.onModalClose
+    }) : closeButton;
+  }
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     style: (0, _extends2.default)({}, bodyStyles, style),
     className: classes
-  }), (context === null || context === void 0 ? void 0 : context.isDrawer) && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-    icon: /*#__PURE__*/_react.default.createElement(_Close.default, 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 = {