rsuite 5.44.0 → 5.45.0

package/Button/styles/index.less

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

package/CHANGELOG.md

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

package/Drawer/styles/index.less

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

package/Modal/styles/index.less

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

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

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