rsuite 5.83.1 → 5.83.3

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [5.83.3](https://github.com/rsuite/rsuite/compare/v5.83.2...v5.83.3) (2025-08-04)
+
+
+### Bug Fixes
+
+* **Table:** improve header alignment and expand/collapse animations ([#4360](https://github.com/rsuite/rsuite/issues/4360)) ([3acd117](https://github.com/rsuite/rsuite/commit/3acd11703222a381685f8ba0ffad9a1283abf421))
+
+
+
+## [5.83.2](https://github.com/rsuite/rsuite/compare/v5.83.1...v5.83.2) (2025-07-20)
+
+
+### Bug Fixes
+
+* Progress.Circle properties do not include width ([#4352](https://github.com/rsuite/rsuite/issues/4352)) ([#4353](https://github.com/rsuite/rsuite/issues/4353)) ([4bdef97](https://github.com/rsuite/rsuite/commit/4bdef977c96d76695a4b8504808bdfaaf83a79cd))
+
+
+### Features
+
+* **Stat/StatTrend:** add 'equal' trend indicator ([#4351](https://github.com/rsuite/rsuite/issues/4351)) ([38f95a1](https://github.com/rsuite/rsuite/commit/38f95a1b1cc74adb993bb76899e56ef954014ecd))
+
+
+
 ## [5.83.1](https://github.com/rsuite/rsuite/compare/v5.83.0...v5.83.1) (2025-06-27)
 
 

package/Stat/styles/index.css

@@ -1721,6 +1721,10 @@
   color: #8f1300;
   color: var(--rs-red-900);
 }
+.rs-stat-trend-equal {
+  color: #004299;
+  color: var(--rs-primary-900);
+}
 .rs-stat-trend-default {
   padding: 2px 6px;
 }
@@ -1732,6 +1736,10 @@
   background-color: #fccfcf;
   background-color: var(--rs-red-100);
 }
+.rs-stat-trend-default.rs-stat-trend-equal {
+  background-color: #cce9ff;
+  background-color: var(--rs-primary-100);
+}
 .rs-stat-trend-subtle.rs-stat-trend-up {
   color: #37ab3c;
   color: var(--rs-green-600);
@@ -1740,6 +1748,10 @@
   color: #eb3626;
   color: var(--rs-red-600);
 }
+.rs-stat-trend-subtle.rs-stat-trend-equal {
+  color: #2589f5;
+  color: var(--rs-primary-600);
+}
 .rs-stat-help-text {
   color: #717273;
   color: var(--rs-text-secondary);

package/Stat/styles/index.less

@@ -75,6 +75,10 @@
       color: var(--rs-red-900);
     }
 
+    &-equal {
+      color: var(--rs-primary-900);
+    }
+
     &-default {
       padding: 2px 6px;
     }
@@ -87,6 +91,10 @@
       background-color: var(--rs-red-100);
     }
 
+    &-default&-equal {
+      background-color: var(--rs-primary-100);
+    }
+
     &-subtle&-up {
       color: var(--rs-green-600);
     }
@@ -94,6 +102,10 @@
     &-subtle&-down {
       color: var(--rs-red-600);
     }
+
+    &-subtle&-equal {
+      color: var(--rs-primary-600);
+    }
   }
 
   &-help-text {

package/Table/styles/index.css

@@ -317,6 +317,12 @@
 .rs-table-cell-header .rs-table-cell-content {
   padding: 10px 10px;
   line-height: 1.66666667;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .rs-table-cell-header-sort-wrapper {
   cursor: pointer;
@@ -328,6 +334,13 @@
   color: var(--rs-table-sort);
   font-size: 16px;
   line-height: 1.66666667;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.rs-table-cell-header-icon-sort:where([data-sort='asc']) {
+  -webkit-transform: rotate(180deg);
+          transform: rotate(180deg);
 }
 .rs-table-cell-rowspan {
   border-bottom: 1px solid #f2f2f5 !important;
@@ -480,6 +493,14 @@
   cursor: pointer;
   outline: none;
   font-size: 16px;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+}
+.rs-table-cell-expand-icon:where([data-expanded='true']) {
+  -webkit-transform: rotate(90deg);
+          transform: rotate(90deg);
 }
 .rs-table-scrollbar {
   background-color: #e5e5ea;

package/Table/styles/index.less

@@ -187,6 +187,8 @@
     &-header &-content {
       padding: @table-header-padding-y @table-header-padding-x;
       line-height: @table-header-line-height;
+      display: flex;
+      align-items: center;
     }
 
     &-header {
@@ -200,6 +202,10 @@
         color: var(--rs-table-sort);
         font-size: 16px;
         line-height: @table-header-line-height;
+        display: flex;
+        &:where([data-sort='asc']) {
+          transform: rotate(180deg);
+        }
       }
     }
 
@@ -356,6 +362,11 @@
   cursor: pointer;
   outline: none;
   font-size: 16px;
+  transition: transform 0.3s ease;
+
+  &:where([data-expanded='true']) {
+    transform: rotate(90deg);
+  }
 }
 
 // Scrollbar

package/cjs/Progress/ProgressCircle.d.ts

@@ -12,6 +12,8 @@ export interface ProgressCircleProps extends WithAsProps {
     strokeWidth?: number;
     /** Tail width */
     trailWidth?: number;
+    /** Diameter of the circle */
+    width?: number;
     /** Circular progress bar degree */
     gapDegree?: number;
     /** Circular progress bar Notch position */

package/cjs/Progress/ProgressCircle.js

@@ -12,7 +12,7 @@ var _statusIcons = require("../internals/constants/statusIcons");
 var _hooks = require("../internals/hooks");
 var _propTypes2 = require("../internals/propTypes");
 var _CustomProvider = require("../CustomProvider");
-var _excluded = ["as", "strokeWidth", "trailWidth", "percent", "strokeLinecap", "className", "showInfo", "status", "classPrefix", "style", "gapDegree", "gapPosition", "trailColor", "strokeColor"];
+var _excluded = ["as", "strokeWidth", "trailWidth", "width", "percent", "strokeLinecap", "className", "showInfo", "status", "classPrefix", "style", "gapDegree", "gapPosition", "trailColor", "strokeColor"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
@@ -29,6 +29,7 @@ var ProgressCircle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     strokeWidth = _propsWithDefaults$st === void 0 ? 6 : _propsWithDefaults$st,
     _propsWithDefaults$tr = propsWithDefaults.trailWidth,
     trailWidth = _propsWithDefaults$tr === void 0 ? 6 : _propsWithDefaults$tr,
+    width = propsWithDefaults.width,
     _propsWithDefaults$pe = propsWithDefaults.percent,
     percent = _propsWithDefaults$pe === void 0 ? 0 : _propsWithDefaults$pe,
     _propsWithDefaults$st2 = propsWithDefaults.strokeLinecap,
@@ -117,7 +118,8 @@ var ProgressCircle = /*#__PURE__*/_react.default.forwardRef(function (props, ref
     className: prefix('circle-info')
   }, info) : null, /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
     className: prefix('svg'),
-    viewBox: "0 0 100 100"
+    viewBox: "0 0 100 100",
+    width: width
   }, rest), /*#__PURE__*/_react.default.createElement("path", {
     className: prefix('trail'),
     d: pathString,
@@ -142,6 +144,7 @@ ProgressCircle.propTypes = {
   percent: _propTypes.default.number,
   strokeWidth: _propTypes.default.number,
   trailWidth: _propTypes.default.number,
+  width: _propTypes.default.number,
   gapDegree: _propTypes.default.number,
   gapPosition: (0, _propTypes2.oneOf)(['top', 'bottom', 'left', 'right']),
   showInfo: _propTypes.default.bool,

package/cjs/Stat/StatTrend.d.ts

@@ -1,6 +1,6 @@
 import { WithAsProps, RsRefForwardingComponent } from '../internals/types';
 interface StatTrendProps extends WithAsProps {
-    indicator?: 'up' | 'down';
+    indicator?: 'up' | 'down' | 'equal';
     appearance?: 'default' | 'subtle';
 }
 declare const StatTrend: RsRefForwardingComponent<'dd', StatTrendProps>;

package/cjs/Stat/StatTrend.js

@@ -35,6 +35,13 @@ var ArrowDown = function ArrowDown(props) {
     d: "M17 8l0 9l-9 0"
   }));
 };
+var ArrowEqual = function ArrowEqual(props) {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, svgProps, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 9l10 0"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M7 15l10 0"
+  }));
+};
 var StatTrend = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
     Component = _props$as === void 0 ? 'span' : _props$as,
@@ -52,7 +59,7 @@ var StatTrend = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     prefix = _useClassNames.prefix,
     withClassPrefix = _useClassNames.withClassPrefix;
   var classes = merge(className, withClassPrefix(appearance, indicator));
-  var IndicatorIcon = indicator === 'up' ? ArrowUp : ArrowDown;
+  var IndicatorIcon = indicator === 'up' ? ArrowUp : indicator === 'down' ? ArrowDown : ArrowEqual;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref,
     className: classes
@@ -62,7 +69,7 @@ var StatTrend = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 });
 StatTrend.displayName = 'StatTrend';
 StatTrend.propTypes = {
-  indicator: (0, _propTypes.oneOf)(['up', 'down']),
+  indicator: (0, _propTypes.oneOf)(['up', 'down', 'equal']),
   appearance: (0, _propTypes.oneOf)(['default', 'subtle'])
 };
 var _default = exports.default = StatTrend;

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

@@ -13811,6 +13811,10 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   color: #8f1300;
   color: var(--rs-red-900);
 }
+.rs-stat-trend-equal {
+  color: #004299;
+  color: var(--rs-primary-900);
+}
 .rs-stat-trend-default {
   padding: 2px 6px;
 }
@@ -13822,6 +13826,10 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   background-color: #fccfcf;
   background-color: var(--rs-red-100);
 }
+.rs-stat-trend-default.rs-stat-trend-equal {
+  background-color: #cce9ff;
+  background-color: var(--rs-primary-100);
+}
 .rs-stat-trend-subtle.rs-stat-trend-up {
   color: #37ab3c;
   color: var(--rs-green-600);
@@ -13830,6 +13838,10 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   color: #eb3626;
   color: var(--rs-red-600);
 }
+.rs-stat-trend-subtle.rs-stat-trend-equal {
+  color: #2589f5;
+  color: var(--rs-primary-600);
+}
 .rs-stat-help-text {
   color: #717273;
   color: var(--rs-text-secondary);
@@ -14262,6 +14274,12 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-table-cell-header .rs-table-cell-content {
   padding: 10px 10px;
   line-height: 1.66666667;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
 .rs-table-cell-header-sort-wrapper {
   cursor: pointer;
@@ -14273,6 +14291,13 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   color: var(--rs-table-sort);
   font-size: 16px;
   line-height: 1.66666667;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.rs-table-cell-header-icon-sort:where([data-sort='asc']) {
+  -webkit-transform: rotate(-180deg);
+          transform: rotate(-180deg);
 }
 .rs-table-cell-rowspan {
   border-bottom: 1px solid #f2f2f5 !important;
@@ -14425,6 +14450,14 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   cursor: pointer;
   outline: none;
   font-size: 16px;
+  -webkit-transition: -webkit-transform 0.3s ease;
+  transition: -webkit-transform 0.3s ease;
+  transition: transform 0.3s ease;
+  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
+}
+.rs-table-cell-expand-icon:where([data-expanded='true']) {
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
 }
 .rs-table-scrollbar {
   background-color: #e5e5ea;