rsuite 5.58.0 → 5.59.0

package/cjs/Modal/Modal.js

@@ -26,46 +26,47 @@ var _utils2 = require("./utils");
 var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
 var _propTypes2 = require("../internals/propTypes");
 var _DrawerContext = _interopRequireDefault(require("../Drawer/DrawerContext"));
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 var modalSizes = ['xs', 'sm', 'md', 'lg', 'full'];
 /**
  * The `Modal` component is used to show content in a layer above the app.
  * @see https://rsuitejs.com/components/modal
  */
 var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _prefix;
-  var className = props.className,
+  var _prefix, _merge;
+  var _props$animation = props.animation,
+    animation = _props$animation === void 0 ? _Bounce.default : _props$animation,
+    animationProps = props.animationProps,
+    _props$animationTimeo = props.animationTimeout,
+    animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
+    ariaLabelledby = props['aria-labelledby'],
+    ariaDescribedby = props['aria-describedby'],
+    backdropClassName = props.backdropClassName,
+    _props$backdrop = props.backdrop,
+    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
+    className = props.className,
     children = props.children,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'modal' : _props$classPrefix,
     dialogClassName = props.dialogClassName,
-    backdropClassName = props.backdropClassName,
-    _props$backdrop = props.backdrop,
-    backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
     dialogStyle = props.dialogStyle,
-    _props$animation = props.animation,
-    animation = _props$animation === void 0 ? _Bounce.default : _props$animation,
-    open = props.open,
-    _props$size = props.size,
-    size = _props$size === void 0 ? 'sm' : _props$size,
-    full = props.full,
     _props$dialogAs = props.dialogAs,
     Dialog = _props$dialogAs === void 0 ? _ModalDialog.default : _props$dialogAs,
-    animationProps = props.animationProps,
-    _props$animationTimeo = props.animationTimeout,
-    animationTimeout = _props$animationTimeo === void 0 ? 300 : _props$animationTimeo,
+    enforceFocusProp = props.enforceFocus,
+    full = props.full,
     _props$overflow = props.overflow,
     overflow = _props$overflow === void 0 ? true : _props$overflow,
+    open = props.open,
     onClose = props.onClose,
     onEntered = props.onEntered,
     onEntering = props.onEntering,
     onExited = props.onExited,
     _props$role = props.role,
     role = _props$role === void 0 ? 'dialog' : _props$role,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'sm' : _props$size,
     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", "onClose", "onEntered", "onEntering", "onExited", "role", "id", "aria-labelledby", "aria-describedby"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["animation", "animationProps", "animationTimeout", "aria-labelledby", "aria-describedby", "backdropClassName", "backdrop", "className", "children", "classPrefix", "dialogClassName", "dialogStyle", "dialogAs", "enforceFocus", "full", "overflow", "open", "onClose", "onEntered", "onEntering", "onExited", "role", "size", "id"]);
   var inClass = {
     in: open && !animation
   };
@@ -163,18 +164,32 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       placement = _ref2.placement; // The width or height of the drawer depends on the placement.
     sizeKey = placement === 'top' || placement === 'bottom' ? 'height' : 'width';
   }
+  var enforceFocus = (0, _react.useMemo)(function () {
+    if (typeof enforceFocusProp === 'boolean') {
+      return enforceFocusProp;
+    }
+
+    // When the Drawer is displayed and the backdrop is not displayed, the focus is not restricted.
+    if (isDrawer && backdrop === false) {
+      return false;
+    }
+  }, [backdrop, enforceFocusProp, isDrawer]);
+  var wrapperClassName = merge(prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["wrapper"]))), (_merge = {}, _merge[prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["no-backdrop"])))] = backdrop === false, _merge));
   return /*#__PURE__*/_react.default.createElement(_ModalContext.ModalContext.Provider, {
     value: modalContextValue
-  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({}, rest, {
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, (0, _extends2.default)({
+    "data-testid": isDrawer ? 'drawer-wrapper' : 'modal-wrapper'
+  }, rest, {
     ref: ref,
     backdrop: backdrop,
+    enforceFocus: enforceFocus,
     open: open,
     onClose: onClose,
-    className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["wrapper"]))),
+    className: wrapperClassName,
     onEntered: handleEntered,
     onEntering: handleEntering,
     onExited: handleExited,
-    backdropClassName: merge(prefix(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["backdrop"]))), backdropClassName, inClass),
+    backdropClassName: merge(prefix(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["backdrop"]))), backdropClassName, inClass),
     containerClassName: prefix({
       open: open,
       'has-backdrop': backdrop

package/cjs/Text/index.d.ts

@@ -1,3 +1,3 @@
 import Text from './Text';
-export { type TextProps } from './Text';
+export type { TextProps } from './Text';
 export default Text;

package/cjs/Text/index.js

@@ -1,10 +1,9 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
-exports.default = exports.TextProps = void 0;
-var _Text = _interopRequireWildcard(require("./Text"));
-exports.TextProps = _Text.TextProps;
+exports.default = void 0;
+var _Text = _interopRequireDefault(require("./Text"));
 var _default = _Text.default;
 exports.default = _default;

package/cjs/internals/Overlay/Modal.js

@@ -198,7 +198,8 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         var className = fadeProps.className,
           rest = (0, _objectWithoutPropertiesLoose2.default)(fadeProps, ["className"]);
         return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-          "aria-hidden": true
+          "aria-hidden": true,
+          "data-testid": "backdrop"
         }, rest, {
           style: backdropStyle,
           ref: (0, _utils2.mergeRefs)(modal.setBackdropRef, ref),

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

@@ -320,6 +320,8 @@
   --rs-uploader-dnd-hover-border: var(--rs-primary-500);
   --rs-avatar-bg: var(--rs-gray-300);
   --rs-avatar-text: var(--rs-gray-0);
+  --rs-avatar-offset-color: var(--rs-gray-0);
+  --rs-avatar-ring-color: var(--rs-avatar-bg);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
@@ -688,6 +690,8 @@
   --rs-uploader-dnd-hover-border: var(--rs-primary-500);
   --rs-avatar-bg: var(--rs-gray-400);
   --rs-avatar-text: var(--rs-gray-0);
+  --rs-avatar-offset-color: var(--rs-gray-900);
+  --rs-avatar-ring-color: var(--rs-avatar-bg);
   --rs-badge-bg: var(--rs-color-red);
   --rs-badge-text: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
@@ -1055,6 +1059,8 @@
   --rs-uploader-dnd-hover-border: var(--rs-primary-500);
   --rs-avatar-bg: var(--rs-gray-400);
   --rs-avatar-text: var(--rs-gray-0);
+  --rs-avatar-offset-color: var(--rs-gray-900);
+  --rs-avatar-ring-color: var(--rs-avatar-bg);
   --rs-badge-bg: var(--rs-red-500);
   --rs-badge-text: var(--rs-gray-0);
   --rs-close-button-hover-color: var(--rs-color-red);
@@ -1554,13 +1560,47 @@ tbody.rs-anim-collapse.rs-anim-in {
   background: var(--rs-avatar-bg);
   text-align: center;
   padding: 0 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+}
+.rs-avatar-icon {
+  position: absolute;
+}
+.rs-avatar-bordered {
+  --rs-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
+  --rs-ring-shadow: var(--rs-avatar-ring-color) 0 0 0 4px;
+  -webkit-box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
+          box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
 }
 .rs-avatar-circle {
   border-radius: 50%;
 }
+.rs-avatar-xxl {
+  width: 120px;
+  height: 120px;
+  font-size: 48px;
+}
+.rs-avatar-xxl > .rs-icon {
+  font-size: 84px;
+  height: 84px;
+}
+.rs-avatar-xxl > .rs-avatar-image {
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+}
+.rs-avatar-xl {
+  width: 90px;
+  height: 90px;
+  font-size: 36px;
+}
+.rs-avatar-xl > .rs-icon {
+  font-size: 63px;
+  height: 63px;
+}
+.rs-avatar-xl > .rs-avatar-image {
+  width: 90px;
+  height: 90px;
+  line-height: 90px;
+}
 .rs-avatar-lg {
   width: 60px;
   height: 60px;
@@ -1603,6 +1643,34 @@ tbody.rs-anim-collapse.rs-anim-in {
   height: 20px;
   line-height: 20px;
 }
+.rs-avatar-red {
+  --rs-avatar-bg: var(--rs-red-500);
+  --rs-avatar-ring-color: var(--rs-red-500);
+}
+.rs-avatar-orange {
+  --rs-avatar-bg: var(--rs-orange-500);
+  --rs-avatar-ring-color: var(--rs-orange-500);
+}
+.rs-avatar-yellow {
+  --rs-avatar-bg: var(--rs-yellow-500);
+  --rs-avatar-ring-color: var(--rs-yellow-500);
+}
+.rs-avatar-green {
+  --rs-avatar-bg: var(--rs-green-500);
+  --rs-avatar-ring-color: var(--rs-green-500);
+}
+.rs-avatar-cyan {
+  --rs-avatar-bg: var(--rs-cyan-500);
+  --rs-avatar-ring-color: var(--rs-cyan-500);
+}
+.rs-avatar-blue {
+  --rs-avatar-bg: var(--rs-blue-500);
+  --rs-avatar-ring-color: var(--rs-blue-500);
+}
+.rs-avatar-violet {
+  --rs-avatar-bg: var(--rs-violet-500);
+  --rs-avatar-ring-color: var(--rs-violet-500);
+}
 .rs-avatar-group {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -4705,6 +4773,9 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   width: 100%;
   height: 100%;
 }
+.rs-drawer-wrapper.rs-drawer-no-backdrop {
+  pointer-events: none;
+}
 .rs-drawer {
   display: none;
   overflow: hidden;
@@ -4714,6 +4785,7 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   -webkit-box-shadow: var(--rs-drawer-shadow);
           box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
           box-shadow: var(--rs-drawer-shadow);
+  pointer-events: auto;
   outline: 0;
 }
 .rs-drawer-open.rs-drawer-has-backdrop {