rsuite 5.58.1 → 5.59.1

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/Placeholder/PlaceholderGraph.d.ts

@@ -1,8 +1,20 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface PlaceholderGraphProps extends WithAsProps {
+    /**
+     * The height of the graph.
+     *
+     * @default 200
+     */
     height?: number;
+    /**
+     * The width of the graph.
+     *
+     * @default 100%
+     */
     width?: number;
-    /** Placeholder status */
+    /**
+     * Placeholder status, display the loading state.
+     */
     active?: boolean;
 }
 /**

package/cjs/Placeholder/PlaceholderGrid.d.ts

@@ -1,10 +1,36 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface PlaceholderGridProps extends WithAsProps {
+    /**
+     * The number of rows.
+     *
+     * @default 5
+     */
     rows?: number;
+    /**
+     * The height of the row.
+     *
+     * @default 10
+     */
     rowHeight?: number;
+    /**
+     * @deprecated Use `rowSpacing` instead.
+     */
     rowMargin?: number;
+    /**
+     * The spacing between rows.
+     *
+     * @default 20
+     * @version 5.59.1
+     */
+    rowSpacing?: number;
+    /**
+     * The number of columns.
+     * @default 5
+     */
     columns?: number;
-    /** Placeholder status */
+    /**
+     * Placeholder status, display the loading state.
+     */
     active?: boolean;
 }
 /**

package/cjs/Placeholder/PlaceholderGrid.js

@@ -5,11 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _utils = require("../utils");
+var _templateObject;
 /**
  * The `Placeholder.Grid` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -28,8 +30,10 @@ var PlaceholderGrid = /*#__PURE__*/_react.default.forwardRef(function (props, re
     rowHeight = _props$rowHeight === void 0 ? 10 : _props$rowHeight,
     _props$rowMargin = props.rowMargin,
     rowMargin = _props$rowMargin === void 0 ? 20 : _props$rowMargin,
+    _props$rowSpacing = props.rowSpacing,
+    rowSpacing = _props$rowSpacing === void 0 ? rowMargin : _props$rowSpacing,
     active = props.active,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "active"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "classPrefix", "rows", "columns", "rowHeight", "rowMargin", "rowSpacing", "active"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -38,23 +42,16 @@ var PlaceholderGrid = /*#__PURE__*/_react.default.forwardRef(function (props, re
     active: active
   }));
   var colItems = [];
-  var firstRowItemWidth = Math.random() * 30 + 30;
-  var itemWidth = firstRowItemWidth / 2;
   for (var i = 0; i < columns; i++) {
     var rowItems = [];
     for (var j = 0; j < rows; j++) {
-      var widthPercent = Math.random() * 50 + 10; // when first column
-      if (i > 0) {
-        // when other columns
-        widthPercent = j > 0 ? itemWidth : firstRowItemWidth;
-      }
-      rowItems.push( /*#__PURE__*/_react.default.createElement("p", {
+      rowItems.push( /*#__PURE__*/_react.default.createElement("div", {
         key: j,
         style: {
-          width: widthPercent + "%",
           height: rowHeight,
-          marginTop: j > 0 ? rowMargin : undefined
-        }
+          marginTop: j > 0 ? rowSpacing : undefined
+        },
+        className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["row"])))
       }));
     }
     colItems.push( /*#__PURE__*/_react.default.createElement("div", {
@@ -74,7 +71,7 @@ PlaceholderGrid.propTypes = {
   rows: _propTypes.default.number,
   columns: _propTypes.default.number,
   rowHeight: _propTypes.default.number,
-  rowMargin: _propTypes.default.number,
+  rowSpacing: _propTypes.default.number,
   active: _propTypes.default.bool
 };
 var _default = PlaceholderGrid;

package/cjs/Placeholder/PlaceholderParagraph.d.ts

@@ -1,10 +1,33 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface PlaceholderParagraphProps extends WithAsProps {
+    /**
+     * The number of rows.
+     * @default 2
+     */
     rows?: number;
+    /**
+     * The height of the row.
+     * @default 10
+     */
     rowHeight?: number;
+    /**
+     * @deprecated Use `rowSpacing` instead.
+     */
     rowMargin?: number;
+    /**
+     * The spacing between rows.
+     * @default 20
+     * @version 5.59.1
+     */
+    rowSpacing?: number;
+    /**
+     * The shape of the graph.
+     * @default false
+     */
     graph?: boolean | 'circle' | 'square' | 'image';
-    /** Placeholder status */
+    /**
+     * Placeholder status, display the loading state.
+     */
     active?: boolean;
 }
 /**

package/cjs/Placeholder/PlaceholderParagraph.js

@@ -1,16 +1,18 @@
 'use client';
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
 exports.__esModule = true;
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../utils");
 var _propTypes2 = require("../internals/propTypes");
+var _templateObject;
 /**
  * The `Placeholder.Paragraph` component is used to display the loading state of the block.
  * @see https://rsuitejs.com/components/placeholder
@@ -25,11 +27,13 @@ var PlaceholderParagraph = /*#__PURE__*/_react.default.forwardRef(function (prop
     rowHeight = _props$rowHeight === void 0 ? 10 : _props$rowHeight,
     _props$rowMargin = props.rowMargin,
     rowMargin = _props$rowMargin === void 0 ? 20 : _props$rowMargin,
+    _props$rowSpacing = props.rowSpacing,
+    rowSpacing = _props$rowSpacing === void 0 ? rowMargin : _props$rowSpacing,
     graph = props.graph,
     active = props.active,
     _props$classPrefix = props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'placeholder' : _props$classPrefix,
-    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "rows", "rowHeight", "rowMargin", "graph", "active", "classPrefix"]);
+    rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "className", "rows", "rowHeight", "rowMargin", "rowSpacing", "graph", "active", "classPrefix"]);
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     merge = _useClassNames.merge,
     prefix = _useClassNames.prefix,
@@ -39,17 +43,17 @@ var PlaceholderParagraph = /*#__PURE__*/_react.default.forwardRef(function (prop
     var rowArr = [];
     for (var i = 0; i < rows; i++) {
       var styles = {
-        width: Math.random() * 75 + 25 + "%",
         height: rowHeight,
-        marginTop: i > 0 ? rowMargin : Number(rowMargin) / 2
+        marginTop: i > 0 ? rowSpacing : Number(rowSpacing) / 2
       };
-      rowArr.push( /*#__PURE__*/_react.default.createElement("p", {
+      rowArr.push( /*#__PURE__*/_react.default.createElement("div", {
         key: i,
-        style: styles
+        style: styles,
+        className: prefix(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["row"])))
       }));
     }
     return rowArr;
-  }, [rowHeight, rowMargin, rows]);
+  }, [prefix, rowHeight, rowSpacing, rows]);
   var classes = merge(className, withClassPrefix('paragraph', {
     active: active
   }));
@@ -62,7 +66,7 @@ var PlaceholderParagraph = /*#__PURE__*/_react.default.forwardRef(function (prop
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('paragraph-graph-inner')
   })), /*#__PURE__*/_react.default.createElement("div", {
-    className: prefix('paragraph-rows')
+    className: prefix('paragraph-group')
   }, rowElements));
 });
 PlaceholderParagraph.displayName = 'PlaceholderParagraph';
@@ -71,7 +75,7 @@ PlaceholderParagraph.propTypes = {
   classPrefix: _propTypes.default.string,
   rows: _propTypes.default.number,
   rowHeight: _propTypes.default.number,
-  rowMargin: _propTypes.default.number,
+  rowSpacing: _propTypes.default.number,
   graph: _propTypes.default.oneOfType([_propTypes.default.bool, (0, _propTypes2.oneOf)(['circle', 'square', 'image'])]),
   active: _propTypes.default.bool
 };

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;
@@ -1610,6 +1678,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   -webkit-box-align: end;
       -ms-flex-align: end;
           align-items: flex-end;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
 }
 .rs-avatar-group-stack .rs-avatar {
   -webkit-box-sizing: content-box;
@@ -3961,6 +4031,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   left: -10px;
   bottom: -10px;
   right: -10px;
+  min-width: 36px;
+  min-height: 36px;
 }
 .rs-checkbox-control::before,
 .rs-checkbox-control .rs-checkbox-inner::before,
@@ -4705,6 +4777,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 +4789,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 {
@@ -11202,12 +11278,40 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   background: var(--rs-bg-card);
   position: absolute;
 }
-.rs-placeholder-paragraph-rows {
+.rs-placeholder-paragraph-group {
+  width: 100%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(9) {
+  width: 75%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(8) {
+  width: 60%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(7) {
+  width: 85%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(6) {
+  width: 70%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(5) {
+  width: 90%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(4) {
+  width: 65%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(3) {
+  width: 80%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(2) {
+  width: 50%;
+}
+.rs-placeholder-paragraph .rs-placeholder-row:nth-child(1) {
   width: 100%;
 }
-.rs-placeholder-paragraph-rows > p {
+.rs-placeholder-row {
   background-color: #f2f2f5;
   background-color: var(--rs-placeholder);
+  width: 100%;
 }
 .rs-placeholder-grid-col {
   -webkit-box-flex: 1;
@@ -11224,15 +11328,23 @@ textarea.rs-inline-edit-sm .rs-plaintext {
       -ms-flex-align: end;
           align-items: flex-end;
 }
-.rs-placeholder-grid-col > p {
-  background-color: #f2f2f5;
-  background-color: var(--rs-placeholder);
-}
 .rs-placeholder-grid-col:first-child {
   -webkit-box-align: start;
       -ms-flex-align: start;
           align-items: flex-start;
 }
+.rs-placeholder-grid-col .rs-placeholder-row {
+  width: 30%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(3) {
+  width: 35%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(2) {
+  width: 25%;
+}
+.rs-placeholder-grid-col .rs-placeholder-row:nth-child(1) {
+  width: 50%;
+}
 .rs-placeholder-graph {
   display: inline-block;
   width: 100%;
@@ -12367,6 +12479,9 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   -webkit-transition: none;
   transition: none;
 }
+.rs-sidenav-nav .rs-dropdown-item {
+  display: block;
+}
 .rs-sidenav-nav > .rs-sidenav-item,
 .rs-sidenav-nav > .rs-dropdown {
   margin: 0 !important;