rsuite 5.43.0 → 5.45.0

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 = {

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

package/cjs/Modal/ModalHeader.js

@@ -14,7 +14,9 @@ var _ModalContext = require("./ModalContext");
 var _CloseButton = _interopRequireDefault(require("../CloseButton"));
 var _Close = _interopRequireDefault(require("@rsuite/icons/Close"));
 var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
 var ModalHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useContext, _useContext2;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -30,16 +32,17 @@ var ModalHeader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var context = (0, _react.useContext)(_ModalContext.ModalContext);
-  var buttonElement = !(context !== null && context !== void 0 && context.isDrawer) ? /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
-    className: prefix('close'),
-    onClick: (0, _utils.createChainedFunction)(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
-  }) : /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+  var onModalClose = (_useContext = (0, _react.useContext)(_ModalContext.ModalContext)) === null || _useContext === void 0 ? void 0 : _useContext.onModalClose;
+  var isDrawer = (_useContext2 = (0, _react.useContext)(_DrawerContext.default)) === null || _useContext2 === void 0 ? void 0 : _useContext2.isDrawer;
+  var buttonElement = isDrawer ? /*#__PURE__*/_react.default.createElement(_IconButton.default, {
     icon: /*#__PURE__*/_react.default.createElement(_Close.default, null),
     appearance: "subtle",
     size: "sm",
     className: prefix('close'),
-    onClick: (0, _utils.createChainedFunction)(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
+    onClick: (0, _utils.createChainedFunction)(onClose, onModalClose)
+  }) : /*#__PURE__*/_react.default.createElement(_CloseButton.default, {
+    className: prefix('close'),
+    onClick: (0, _utils.createChainedFunction)(onClose, onModalClose)
   });
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,

package/cjs/Modal/index.d.ts

@@ -5,4 +5,5 @@ export type { ModalDialogProps } from './ModalDialog';
 export type { ModalFooterProps } from './ModalFooter';
 export type { ModalHeaderProps } from './ModalHeader';
 export type { ModalTitleProps } from './ModalTitle';
+export type { ModalSize } from './utils';
 export default Modal;

package/cjs/Modal/utils.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
+import { TypeAttributes } from '../@types/common';
+export declare type ModalSize = TypeAttributes.Size | 'full' | number | string;
 export declare const useBodyStyles: (ref: React.RefObject<HTMLElement>, options: {
     overflow: boolean;
     drawer: boolean;
+    size?: ModalSize | undefined;
     prefix: (...classes: any) => string;
-}) => [import("react").CSSProperties, (entering?: boolean) => void, () => void];
+}) => [import("react").CSSProperties | null, (entering?: boolean) => void, () => void];

package/cjs/Modal/utils.js

@@ -14,7 +14,8 @@ var useBodyStyles = function useBodyStyles(ref, options) {
     setBodyStyles = _useState[1];
   var overflow = options.overflow,
     drawer = options.drawer,
-    prefix = options.prefix;
+    prefix = options.prefix,
+    size = options.size;
   var windowResizeListener = (0, _react.useRef)();
   var contentElement = (0, _react.useRef)(null);
   var contentElementResizeObserver = (0, _react.useRef)();
@@ -51,7 +52,11 @@ var useBodyStyles = function useBodyStyles(ref, options) {
     contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = (0, _react.useCallback)(function (entering) {
-    if (overflow && !drawer && ref.current) {
+    if (drawer || size === 'full') {
+      setBodyStyles(null);
+      return;
+    }
+    if (overflow && ref.current) {
       updateBodyStyles(undefined, entering);
       contentElement.current = ref.current.querySelector("." + prefix('content'));
       if (!windowResizeListener.current) {
@@ -64,11 +69,11 @@ var useBodyStyles = function useBodyStyles(ref, options) {
         contentElementResizeObserver.current.observe(contentElement.current);
       }
     }
-  }, [drawer, overflow, prefix, ref, updateBodyStyles]);
+  }, [drawer, overflow, prefix, ref, size, updateBodyStyles]);
   (0, _react.useEffect)(function () {
     return onDestroyEvents;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
+  return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];
 };
 exports.useBodyStyles = useBodyStyles;

package/cjs/MultiCascader/MultiCascader.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
+import { PickerComponent, PickerToggleProps } from '../Picker';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export declare type ValueType = (number | string)[];
-export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType> {
+export interface MultiCascaderProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'loading'> {
     cascade?: boolean;
     /** A picker that can be counted */
     countable?: boolean;

package/cjs/Picker/PickerToggle.d.ts

@@ -15,6 +15,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     readOnly?: boolean;
     plaintext?: boolean;
     tabIndex?: number;
+    /** Whether to display an loading indicator on toggle button */
     loading?: boolean;
     editable?: boolean;
     name?: string;
@@ -22,6 +23,7 @@ export interface PickerToggleProps extends ToggleButtonProps {
     inputMask?: (string | RegExp)[];
     onInputChange?: (value: string, event: React.ChangeEvent) => void;
     onInputPressEnter?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onInputBackspace?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onInputBlur?: (event: React.FocusEvent<HTMLElement>) => void;
     onInputFocus?: (event: React.FocusEvent<HTMLElement>) => void;
     placement?: TypeAttributes.Placement;

package/cjs/Picker/PickerToggle.js

@@ -50,6 +50,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     inputMask = _props$inputMask === void 0 ? defaultInputMask : _props$inputMask,
     onInputChange = props.onInputChange,
     onInputPressEnter = props.onInputPressEnter,
+    onInputBackspace = props.onInputBackspace,
     onInputBlur = props.onInputBlur,
     onInputFocus = props.onInputFocus,
     onClean = props.onClean,
@@ -62,7 +63,7 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     caretAs = _props$caretAs === void 0 ? caretComponent : _props$caretAs,
     label = props.label,
     name = props.name,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["active", "as", "classPrefix", "children", "caret", "className", "disabled", "readOnly", "plaintext", "hasValue", "editable", "loading", "cleanable", "tabIndex", "id", "value", "inputPlaceholder", "inputValue", "inputMask", "onInputChange", "onInputPressEnter", "onInputBackspace", "onInputBlur", "onInputFocus", "onClean", "onFocus", "onBlur", "placement", "caretComponent", "caretAs", "label", "name"]);
   var inputRef = (0, _react.useRef)(null);
   var comboboxRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(false),
@@ -136,10 +137,15 @@ var PickerToggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(value, event);
   }, [onInputChange]);
   var handleInputKeyDown = (0, _react.useCallback)(function (event) {
-    if (editable && event.key === _utils.KEY_VALUES.ENTER) {
-      onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+    if (editable) {
+      if (event.key === _utils.KEY_VALUES.ENTER) {
+        onInputPressEnter === null || onInputPressEnter === void 0 ? void 0 : onInputPressEnter(event);
+      }
+      if (event.key === _utils.KEY_VALUES.BACKSPACE) {
+        onInputBackspace === null || onInputBackspace === void 0 ? void 0 : onInputBackspace(event);
+      }
     }
-  }, [onInputPressEnter, editable]);
+  }, [editable, onInputPressEnter, onInputBackspace]);
   var renderInput = (0, _react.useCallback)(function (ref, props) {
     return /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: (0, _utils.mergeRefs)(inputRef, ref),

package/cjs/Picker/utils.js

@@ -367,6 +367,7 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
     active = props.active,
     readOnly = props.readOnly,
     disabled = props.disabled,
+    loading = props.loading,
     onExit = props.onExit,
     onOpen = props.onOpen,
     onClose = props.onClose,
@@ -393,7 +394,7 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
   }, [active, handleOpen, handleClose]);
   var onToggle = (0, _react.useCallback)(function (event) {
     // Keyboard events should not be processed when readOnly and disabled are set.
-    if (readOnly || disabled) {
+    if (readOnly || disabled || loading) {
       return;
     }
     if (event.target === (targetRef === null || targetRef === void 0 ? void 0 : targetRef.current)) {
@@ -439,7 +440,7 @@ var useToggleKeyDownEvent = function useToggleKeyDownEvent(props) {
 
     // Native event callback
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [readOnly, disabled, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
+  }, [readOnly, disabled, loading, targetRef, overlayRef, onKeyDown, toggle, handleToggleDropdown, onExit, onMenuKeyDown, searchInputRef, onMenuPressEnter, onMenuPressBackspace, handleClose]);
   return onToggle;
 };
 exports.useToggleKeyDownEvent = useToggleKeyDownEvent;

package/cjs/SelectPicker/SelectPicker.d.ts

@@ -6,8 +6,6 @@ import { FormControlPickerProps, ItemDataType } from '../@types/common';
 export interface SelectProps<T> {
     /** Set group condition key in data */
     groupBy?: string;
-    /** Whether to display an loading indicator on toggle button */
-    loading?: boolean;
     /** Whether dispaly search input box */
     searchable?: boolean;
     /** Whether using virtualized list */
@@ -41,7 +39,7 @@ export interface MultipleSelectProps<T> extends Omit<SelectProps<T>, 'renderValu
     /** Custom render selected items */
     renderValue?: (value: T[], item: ItemDataType<T>[], selectedElement: React.ReactNode) => React.ReactNode;
 }
-export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label'> {
+export interface SelectPickerProps<T> extends Omit<FormControlPickerProps<T, PickerLocale, ItemDataType<T>>, 'value' | 'defaultValue' | 'onChange'>, SelectProps<T>, Pick<PickerToggleProps, 'caretAs' | 'label' | 'loading'> {
     /** Initial value */
     defaultValue?: T;
     /** Current value of the component. Creates a controlled component */

package/cjs/TreePicker/TreePicker.d.ts

@@ -3,7 +3,7 @@ import { PickerLocale } from '../locales';
 import { PickerComponent, PickerToggleProps } from '../Picker';
 import { TreeDragProps, TreeBaseProps } from '../Tree/Tree';
 import { FormControlPickerProps, ItemDataType } from '../@types/common';
-export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs'> {
+export interface TreePickerProps<T = number | string> extends TreeBaseProps<T, ItemDataType>, TreeDragProps, FormControlPickerProps<T, PickerLocale, ItemDataType>, Pick<PickerToggleProps, 'caretAs' | 'loading'> {
     /** The height of Dropdown */
     height?: number;
     /** Tree node cascade */

package/cjs/toaster/useToaster.js

@@ -4,6 +4,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.default = void 0;
+var _react = require("react");
 var _toaster = _interopRequireDefault(require("./toaster"));
 var _utils = require("../utils");
 /**
@@ -13,25 +14,27 @@ var _utils = require("../utils");
 var useToaster = function useToaster() {
   var _useCustom = (0, _utils.useCustom)(),
     toasters = _useCustom.toasters;
-  return {
-    push: function push(message, options) {
-      var _toasters$current;
-      var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
-      return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);
-    },
-    remove: function remove(key) {
-      toasters ? Array.from(toasters.current).forEach(function (_ref) {
-        var c = _ref[1];
-        return c === null || c === void 0 ? void 0 : c.remove(key);
-      }) : _toaster.default.remove(key);
-    },
-    clear: function clear() {
-      toasters ? Array.from(toasters.current).forEach(function (_ref2) {
-        var c = _ref2[1];
-        return c === null || c === void 0 ? void 0 : c.clear();
-      }) : _toaster.default.clear();
-    }
-  };
+  return (0, _react.useMemo)(function () {
+    return {
+      push: function push(message, options) {
+        var _toasters$current;
+        var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
+        return customToaster ? customToaster.push(message, options) : _toaster.default.push(message, options);
+      },
+      remove: function remove(key) {
+        toasters ? Array.from(toasters.current).forEach(function (_ref) {
+          var c = _ref[1];
+          return c === null || c === void 0 ? void 0 : c.remove(key);
+        }) : _toaster.default.remove(key);
+      },
+      clear: function clear() {
+        toasters ? Array.from(toasters.current).forEach(function (_ref2) {
+          var c = _ref2[1];
+          return c === null || c === void 0 ? void 0 : c.clear();
+        }) : _toaster.default.clear();
+      }
+    };
+  }, [toasters]);
 };
 var _default = useToaster;
 exports.default = _default;

package/dist/rsuite-no-reset-rtl.css

@@ -4721,7 +4721,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 }
 .rs-drawer-full.rs-drawer-top,
 .rs-drawer-full.rs-drawer-bottom {
-  height: calc(100% - 60px);
+  height: 100%;
 }
 .rs-drawer-full.rs-drawer-top .rs-drawer-content,
 .rs-drawer-full.rs-drawer-bottom .rs-drawer-content {
@@ -4729,7 +4729,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 }
 .rs-drawer-full.rs-drawer-left,
 .rs-drawer-full.rs-drawer-right {
-  width: calc(100% - 60px);
+  width: 100%;
 }
 .rs-drawer-right {
   left: 0;
@@ -9473,8 +9473,37 @@ textarea.rs-picker-search-input {
   max-width: calc(100% - 10px);
 }
 .rs-modal-full {
-  width: calc(100% - 120px);
-  max-width: calc(100% - 10px);
+  margin: 0;
+  height: 100%;
+}
+.rs-modal-full .rs-modal-content {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  border-radius: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.rs-modal-full .rs-modal-content .rs-modal-header {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
+}
+.rs-modal-full .rs-modal-content .rs-modal-body {
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
+  overflow: auto;
+}
+.rs-modal-full .rs-modal-content .rs-modal-footer {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
 }
 .rs-modal-shake .rs-modal-dialog {
   -webkit-animation: 0.3s linear shakeHead;
@@ -10797,9 +10826,6 @@ textarea.rs-picker-search-input {
   vertical-align: middle;
   max-width: 100%;
 }
-.rs-picker-toggle {
-  min-width: 75px;
-}
 .rs-picker-toggle.rs-btn .rs-ripple-pond {
   display: none !important;
 }