rsuite 5.44.0 → 5.45.0

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

package/esm/Modal/ModalHeader.js

@@ -8,7 +8,9 @@ import { ModalContext } from './ModalContext';
 import CloseButton from '../CloseButton';
 import Close from '@rsuite/icons/Close';
 import IconButton from '../IconButton';
+import DrawerContext from '../Drawer/DrawerContext';
 var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useContext, _useContext2;
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'div' : _props$as,
     _props$classPrefix = props.classPrefix,
@@ -24,16 +26,17 @@ var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     withClassPrefix = _useClassNames.withClassPrefix,
     prefix = _useClassNames.prefix;
   var classes = merge(className, withClassPrefix());
-  var context = useContext(ModalContext);
-  var buttonElement = !(context !== null && context !== void 0 && context.isDrawer) ? /*#__PURE__*/React.createElement(CloseButton, {
-    className: prefix('close'),
-    onClick: createChainedFunction(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
-  }) : /*#__PURE__*/React.createElement(IconButton, {
+  var onModalClose = (_useContext = useContext(ModalContext)) === null || _useContext === void 0 ? void 0 : _useContext.onModalClose;
+  var isDrawer = (_useContext2 = useContext(DrawerContext)) === null || _useContext2 === void 0 ? void 0 : _useContext2.isDrawer;
+  var buttonElement = isDrawer ? /*#__PURE__*/React.createElement(IconButton, {
     icon: /*#__PURE__*/React.createElement(Close, null),
     appearance: "subtle",
     size: "sm",
     className: prefix('close'),
-    onClick: createChainedFunction(onClose, context === null || context === void 0 ? void 0 : context.onModalClose)
+    onClick: createChainedFunction(onClose, onModalClose)
+  }) : /*#__PURE__*/React.createElement(CloseButton, {
+    className: prefix('close'),
+    onClick: createChainedFunction(onClose, onModalClose)
   });
   return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,

package/esm/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/esm/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/esm/Modal/utils.js

@@ -9,7 +9,8 @@ export 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 = useRef();
   var contentElement = useRef(null);
   var contentElementResizeObserver = useRef();
@@ -46,7 +47,11 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
     contentElementResizeObserver.current = null;
   }, []);
   var onChangeBodyStyles = 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) {
@@ -59,10 +64,10 @@ export var useBodyStyles = function useBodyStyles(ref, options) {
         contentElementResizeObserver.current.observe(contentElement.current);
       }
     }
-  }, [drawer, overflow, prefix, ref, updateBodyStyles]);
+  }, [drawer, overflow, prefix, ref, size, updateBodyStyles]);
   useEffect(function () {
     return onDestroyEvents;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return [overflow ? bodyStyles : {}, onChangeBodyStyles, onDestroyEvents];
+  return [overflow ? bodyStyles : null, onChangeBodyStyles, onDestroyEvents];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.44.0",
+  "version": "5.45.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -38,7 +38,7 @@
     "prop-types": "^15.8.1",
     "react-use-set": "^1.0.0",
     "react-window": "^1.8.8",
-    "rsuite-table": "^5.16.0",
+    "rsuite-table": "^5.17.0",
     "schema-typed": "^2.1.3"
   },
   "peerDependencies": {