rsuite 5.52.0 → 5.53.0

package/AutoComplete/styles/index.css

@@ -1413,6 +1413,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3120,6 +3122,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [5.53.0](https://github.com/rsuite/rsuite/compare/v5.52.0...v5.53.0) (2024-02-02)
+
+### Bug Fixes
+
+- **DateRangePicker:** fix incorrect static method type definition ([#3598](https://github.com/rsuite/rsuite/issues/3598)) ([68b3afb](https://github.com/rsuite/rsuite/commit/68b3afb712535632435ea8d2a2a6c7581ab7f8e7))
+- **InputGroup:** fix that the bg color of `InputGroup.Addon` is inconsistent with `Input` ([#3595](https://github.com/rsuite/rsuite/issues/3595)) ([a6bb6b0](https://github.com/rsuite/rsuite/commit/a6bb6b082fea563515d53979e8ba6b9183f2af89))
+- **Menu:** fix the menuitem cannot be closed correctly when it contains child elements ([#3599](https://github.com/rsuite/rsuite/issues/3599)) ([5f08313](https://github.com/rsuite/rsuite/commit/5f08313e8fded19ea0d918c95f1cb6a84101760d))
+- **Message:** make the visual style of Message more prominent ([#3603](https://github.com/rsuite/rsuite/issues/3603)) ([114013f](https://github.com/rsuite/rsuite/commit/114013ff6b7922f72e383f3b7d51a5938a1e4313))
+- **tree:** improve the hover and focus status of Tree nodes ([#3594](https://github.com/rsuite/rsuite/issues/3594)) ([559b837](https://github.com/rsuite/rsuite/commit/559b83731e3e46b09efe6cfcf6bb4d78e8cc0038))
+
+### Features
+
+- **Message:** add support for `bordered` and `centered` props on Message ([#3605](https://github.com/rsuite/rsuite/issues/3605)) ([2e0f2ec](https://github.com/rsuite/rsuite/commit/2e0f2ec620bce242709acbeea0bff060abc848b4))
+- **Tabs:** add support for Tabs ([#3597](https://github.com/rsuite/rsuite/issues/3597)) ([303350f](https://github.com/rsuite/rsuite/commit/303350fb3dd4abc20961a72b356132a1d5188685))
+
 # [5.52.0](https://github.com/rsuite/rsuite/compare/v5.51.0...v5.52.0) (2024-01-26)
 
 ### Bug Fixes

package/Cascader/styles/index.css

@@ -1729,6 +1729,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3131,6 +3133,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/CheckPicker/styles/index.css

@@ -1919,6 +1919,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3321,6 +3323,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/CheckTree/styles/index.css

@@ -1734,6 +1734,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3136,6 +3138,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,
@@ -3392,24 +3396,26 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-check-tree.rs-check-tree-virtualized {
   overflow: hidden;
 }
-.rs-check-tree .rs-check-item .rs-checkbox-checker > label {
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker > label {
   text-align: left;
   position: relative;
   margin: 0;
-  padding: 8px 12px;
-  padding-left: 50px;
+  padding: 1px 0 1px 42px;
 }
-.rs-check-tree .rs-check-item .rs-checkbox-checker > label::before {
-  content: '';
-  position: absolute;
-  width: 46px;
-  height: 100%;
-  top: 0;
-  margin-left: -52px;
-}
-.rs-check-tree .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   left: 20px;
 }
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-check-tree-node-label-content {
+  padding: 6px 8px;
+  width: auto;
+}
+.rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
+  outline-offset: 2px;
+}
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 32px;
 }
@@ -3428,6 +3434,20 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-check-tree-node .rs-check-item {
   display: inline-block;
 }
+.rs-check-tree-node .rs-check-item:hover,
+.rs-check-tree-node .rs-check-item:focus,
+.rs-check-tree-node .rs-check-item-focus {
+  background-color: transparent !important;
+}
+.rs-check-tree-node .rs-check-item:hover .rs-check-tree-node-label-content,
+.rs-check-tree-node .rs-check-item:focus .rs-check-tree-node-label-content,
+.rs-check-tree-node .rs-check-item-focus .rs-check-tree-node-label-content {
+  background-color: rgb(from #cce9ff r g b / 50%);
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+  border-radius: 6px;
+}
 .rs-picker-popup .rs-check-tree-node .rs-check-item {
   display: block;
 }
@@ -3522,10 +3542,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-popup.rs-check-tree-menu {
   padding-top: 12px;
 }
-.rs-picker-popup .rs-check-tree {
+.rs-check-tree {
   padding-right: 12px;
 }
-.rs-picker-popup .rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-text-wrapper {
+.rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-label-content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/CheckTreePicker/styles/index.css

@@ -1734,6 +1734,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3136,6 +3138,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,
@@ -3392,24 +3396,26 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-check-tree.rs-check-tree-virtualized {
   overflow: hidden;
 }
-.rs-check-tree .rs-check-item .rs-checkbox-checker > label {
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker > label {
   text-align: left;
   position: relative;
   margin: 0;
-  padding: 8px 12px;
-  padding-left: 50px;
+  padding: 1px 0 1px 42px;
 }
-.rs-check-tree .rs-check-item .rs-checkbox-checker > label::before {
-  content: '';
-  position: absolute;
-  width: 46px;
-  height: 100%;
-  top: 0;
-  margin-left: -52px;
-}
-.rs-check-tree .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
   left: 20px;
 }
+.rs-check-tree .rs-check-tree-node-label .rs-check-item .rs-checkbox-checker .rs-check-tree-node-label-content {
+  padding: 6px 8px;
+  width: auto;
+}
+.rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
+  outline: 3px solid rgb(from #3498ff r g b / 25%);
+  outline: 3px solid var(--rs-color-focus-ring);
+}
+.rs-theme-high-contrast .rs-check-tree .rs-check-tree-node-label:focus-visible .rs-check-tree-node-label-content {
+  outline-offset: 2px;
+}
 .rs-check-tree-without-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 32px;
 }
@@ -3428,6 +3434,20 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-check-tree-node .rs-check-item {
   display: inline-block;
 }
+.rs-check-tree-node .rs-check-item:hover,
+.rs-check-tree-node .rs-check-item:focus,
+.rs-check-tree-node .rs-check-item-focus {
+  background-color: transparent !important;
+}
+.rs-check-tree-node .rs-check-item:hover .rs-check-tree-node-label-content,
+.rs-check-tree-node .rs-check-item:focus .rs-check-tree-node-label-content,
+.rs-check-tree-node .rs-check-item-focus .rs-check-tree-node-label-content {
+  background-color: rgb(from #cce9ff r g b / 50%);
+  background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
+  border-radius: 6px;
+}
 .rs-picker-popup .rs-check-tree-node .rs-check-item {
   display: block;
 }
@@ -3522,10 +3542,10 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-popup.rs-check-tree-menu {
   padding-top: 12px;
 }
-.rs-picker-popup .rs-check-tree {
+.rs-check-tree {
   padding-right: 12px;
 }
-.rs-picker-popup .rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-text-wrapper {
+.rs-check-tree-node > .rs-check-tree-node-label .rs-check-tree-node-label-content {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/CheckTreePicker/styles/index.less

@@ -16,31 +16,29 @@
     overflow: hidden;
   }
 
-  .rs-check-item .rs-checkbox-checker {
-    > label {
-      text-align: left;
-      position: relative;
-      margin: 0;
-      //padding-left: 16px;
-      padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-      //text gap + checkbox space + label gap
-      padding-left: 50px; // 10px + 36px + 4px
-
-      &::before {
-        content: '';
-        position: absolute;
-        width: (
-          @picker-tree-arrow-down-width + @picker-tree-arrow-down-gap + 30px
-        ); // checkbox-spacing = 30
-
-        height: 100%;
-        top: 0;
-        margin-left: -52px; // 10px + 36px + 6px
+  .rs-check-tree-node-label {
+    .rs-check-item .rs-checkbox-checker {
+      > label {
+        text-align: left;
+        position: relative;
+        margin: 0;
+        padding: 1px 0 1px 42px;
+      }
+
+      .rs-checkbox-wrapper {
+        left: (@checkbox-sense-width + 10px);
+      }
+
+      .rs-check-tree-node-label-content {
+        padding: 6px 8px;
+        width: auto;
       }
     }
 
-    .rs-checkbox-wrapper {
-      left: (@checkbox-sense-width + 10px);
+    &:focus-visible {
+      .rs-check-tree-node-label-content {
+        .focus-ring();
+      }
     }
   }
 }
@@ -69,6 +67,18 @@
   .rs-check-item {
     display: inline-block;
 
+    &:hover,
+    &:focus,
+    &-focus {
+      background-color: transparent !important;
+
+      .rs-check-tree-node-label-content {
+        background-color: var(--rs-listbox-option-hover-bg);
+        color: var(--rs-listbox-option-hover-text);
+        border-radius: 6px;
+      }
+    }
+
     .rs-picker-popup & {
       display: block;
     }
@@ -161,16 +171,16 @@
   &.rs-check-tree-menu {
     padding-top: @picker-menu-padding;
   }
+}
 
-  .rs-check-tree {
-    padding-right: @picker-menu-padding;
+.rs-check-tree {
+  padding-right: @picker-menu-padding;
 
-    &-node > .rs-check-tree-node-label .rs-check-tree-node-text-wrapper {
-      .ellipsis();
+  &-node > .rs-check-tree-node-label .rs-check-tree-node-label-content {
+    .ellipsis();
 
-      display: inline-block;
-      vertical-align: top;
-    }
+    display: inline-block;
+    vertical-align: top;
   }
 }
 

package/DatePicker/styles/index.css

@@ -1451,6 +1451,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3898,6 +3900,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/DateRangePicker/styles/index.css

@@ -1451,6 +1451,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3898,6 +3900,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,

package/InputGroup/styles/index.css

@@ -73,6 +73,7 @@
   --rs-loader-rotor: var(--rs-gray-500);
   --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 30%);
   --rs-loader-rotor-inverse: var(--rs-gray-0);
+  --rs-input-bg: var(--rs-gray-0);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-50);
 }
@@ -158,6 +159,7 @@
   --rs-loader-rotor: var(--rs-gray-0);
   --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 80%);
   --rs-loader-rotor-inverse: var(--rs-gray-500);
+  --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 }
@@ -244,6 +246,7 @@
   --rs-loader-rotor: var(--rs-gray-0);
   --rs-loader-ring-inverse: rgb(from var(--rs-gray-50) r g b / 80%);
   --rs-loader-rotor-inverse: var(--rs-gray-500);
+  --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
 }
@@ -1234,6 +1237,8 @@
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;

package/InputGroup/styles/index.less

@@ -119,7 +119,7 @@
 
   &.rs-input-group-inside {
     width: 100%;
-    //border-radius: 0;
+    background-color: var(--rs-input-bg);
 
     .rs-input {
       display: block;

package/InputNumber/styles/index.css

@@ -1354,6 +1354,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;

package/InputPicker/styles/index.css

@@ -1824,6 +1824,8 @@ textarea.rs-input-sm {
 }
 .rs-input-group.rs-input-group-inside {
   width: 100%;
+  background-color: #fff;
+  background-color: var(--rs-input-bg);
 }
 .rs-input-group.rs-input-group-inside .rs-input {
   display: block;
@@ -3226,6 +3228,8 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-check-item.rs-check-item-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
+  color: #1675e0;
+  color: var(--rs-listbox-option-hover-text);
 }
 .rs-theme-high-contrast .rs-check-item:not(.rs-checkbox-disabled):hover,
 .rs-theme-high-contrast .rs-check-item:focus,