rsuite 5.72.0 → 5.73.1

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [5.73.1](https://github.com/rsuite/rsuite/compare/v5.73.0...v5.73.1) (2024-10-25)
+
+
+### Bug Fixes
+
+* **Calendar:** fix not triggering the `onToggleTimeDropdown` event when collapsing the time panel ([#4009](https://github.com/rsuite/rsuite/issues/4009)) ([9e2d69e](https://github.com/rsuite/rsuite/commit/9e2d69e232b1317e00b856a470e97c2d7b4ddd37))
+* **CheckTree:** fix focus lost when search keyword matches selected item ([#4017](https://github.com/rsuite/rsuite/issues/4017)) ([119fed2](https://github.com/rsuite/rsuite/commit/119fed2778c2defb5cb772050cc52e9f72f63d87))
+* **Modal:** the style of Modal is messy when it's rendered inside of a Drawer ([#4016](https://github.com/rsuite/rsuite/issues/4016)) ([922ab04](https://github.com/rsuite/rsuite/commit/922ab04eb09f0437fa21db91b69cf7c8d9e407fc))
+
+
+### Features
+
+* **FormErrorMessage:** support display react element ([#4013](https://github.com/rsuite/rsuite/issues/4013)) ([50f22fc](https://github.com/rsuite/rsuite/commit/50f22fc104aa0e32c255aed4da89b6cb2c6a2447))
+
+
+
+# [5.73.0](https://github.com/rsuite/rsuite/compare/v5.72.0...v5.73.0) (2024-10-18)
+
+
+### Bug Fixes
+
+* bump @rsuite/icons 1.2.0 and replace deprecated icons ([#4002](https://github.com/rsuite/rsuite/issues/4002)) ([2a287c1](https://github.com/rsuite/rsuite/commit/2a287c1145abac326d56412f9fc5fabbf55c19d6))
+* **Calendar:** fix the week not aligning in the cell ([#3994](https://github.com/rsuite/rsuite/issues/3994)) ([14ae7a4](https://github.com/rsuite/rsuite/commit/14ae7a4ed5a3e267358de083e84c4fa086d1f1f0))
+* examples/custom-multiple-themes/package.json to reduce vulnerabilities ([#3962](https://github.com/rsuite/rsuite/issues/3962)) ([16bc650](https://github.com/rsuite/rsuite/commit/16bc650b87e3c8ab0b70a07e1c44b44d6838c022))
+
+
+### Features
+
+* **Calendar:** support localized month calendar ([#3995](https://github.com/rsuite/rsuite/issues/3995)) ([b4f80d8](https://github.com/rsuite/rsuite/commit/b4f80d85abbc5760ab29e19bf5bb55715dbd0988))
+* **CustomProvider:** add support for csp and disableInlineStyles ([#4004](https://github.com/rsuite/rsuite/issues/4004)) ([84b6e98](https://github.com/rsuite/rsuite/commit/84b6e9832127db8ef66e74e072387729dedd5388))
+
+
+
 # [5.72.0](https://github.com/rsuite/rsuite/compare/v5.71.0...v5.72.0) (2024-10-11)
 
 

package/Calendar/styles/index.css

@@ -1374,22 +1374,14 @@
           box-shadow: inset 0 0 0 1px var(--rs-input-focus-border);
 }
 .rs-calendar-panel .rs-calendar-table-cell-day {
-  margin-top: 3px;
   display: block;
   text-align: center;
 }
 .rs-calendar-panel .rs-calendar-month-dropdown {
-  margin-top: -2px;
-  margin-left: 12px;
-  margin-right: 12px;
-  top: 54px;
-  width: calc(100% - 24px);
-}
-.rs-calendar-panel:not(.rs-calendar-compact) .rs-calendar-month-dropdown-scroll {
-  height: 644px;
-}
-.rs-calendar-panel.rs-calendar-compact .rs-calendar-month-dropdown-scroll {
-  height: 344px;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 6px;
+  width: calc(100% - 20px);
 }
 .rs-calendar-panel:not(.rs-calendar-compact) .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
   width: 100%;
@@ -1414,7 +1406,20 @@
   border-bottom-right-radius: 6px;
 }
 .rs-calendar-panel.rs-calendar-compact .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
-  height: 50px;
+  min-height: 38px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .rs-calendar-btn-close {
   position: absolute;
@@ -1439,8 +1444,12 @@
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-calendar-panel .rs-calendar-btn-close {
-  bottom: 11px;
-  margin: 0 20px;
+  bottom: 4px;
+  margin: 0 11px;
+  border-radius: 0 0 6px 6px;
+}
+.rs-calendar-panel.rs-calendar-bordered .rs-calendar-btn-close {
+  bottom: 5px;
 }
 .rs-calendar-month-view .rs-calendar-header-month-toolbar {
   padding-left: 24px;
@@ -1805,6 +1814,7 @@
   background-color: var(--rs-bg-overlay);
   overflow: hidden;
   z-index: 1;
+  height: calc(100% - 48px);
 }
 .rs-calendar-month-view .rs-calendar-month-dropdown {
   display: block;
@@ -1814,7 +1824,7 @@
           animation: 0.3s linear slideDown;
 }
 .rs-calendar-month-dropdown-scroll {
-  height: 230px;
+  height: 100%;
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
@@ -1837,21 +1847,10 @@
   color: var(--rs-text-active);
 }
 .rs-calendar-month-dropdown-list {
-  display: block;
-  min-width: 200px;
-}
-.rs-calendar-month-dropdown-list::before,
-.rs-calendar-month-dropdown-list::after {
-  content: ' ';
-  display: table;
-}
-.rs-calendar-month-dropdown-list::after {
-  clear: both;
+  display: grid;
+  grid-template-columns: repeat(4, 25%);
 }
 .rs-calendar-month-dropdown-cell {
-  display: inline-block;
-  float: left;
-  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -1873,8 +1872,6 @@
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
-  width: 30px;
-  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;

package/Calendar/styles/index.less

@@ -89,25 +89,15 @@
   }
 
   &-panel &-table-cell-day {
-    margin-top: 3px;
     display: block;
     text-align: center;
   }
 
   &-panel &-month-dropdown {
-    margin-top: -2px;
-    margin-left: 12px;
-    margin-right: 12px;
-    top: 54px;
-    width: ~'calc(100% - 24px)';
-  }
-
-  &-panel:not(&-compact) &-month-dropdown-scroll {
-    height: 644px; // Flow design
-  }
-
-  &-panel&-compact &-month-dropdown-scroll {
-    height: 344px; // Flow design
+    margin-left: 10px;
+    margin-right: 10px;
+    border-radius: 6px;
+    width: ~'calc(100% - 20px)';
   }
 
   &-panel:not(&-compact) &-table-row:not(&-table-header-row) &-table-cell-content {
@@ -139,7 +129,11 @@
   }
 
   &-panel&-compact &-table-row:not(&-table-header-row) &-table-cell-content {
-    height: @calendar-panel-compact-cell-height;
+    min-height: @calendar-panel-compact-cell-height;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
   }
 
   &-btn-close {
@@ -156,13 +150,18 @@
     z-index: 1;
 
     &:hover {
-      background-color: var(--rs-btn-subtle-hover-bg)
+      background-color: var(--rs-btn-subtle-hover-bg);
     }
   }
 
   &-panel &-btn-close {
-    bottom: 11px;
-    margin: 0 20px;
+    bottom: 4px;
+    margin: 0 11px;
+    border-radius: 0 0 6px 6px;
+  }
+
+  &-panel&-bordered &-btn-close {
+    bottom: 5px;
   }
 }
 
@@ -463,6 +462,7 @@
   background-color: var(--rs-bg-overlay);
   overflow: hidden;
   z-index: @zindex-date-range-picker-table-cell-content;
+  height: calc(100% - 48px);
 
   .rs-calendar-month-view & {
     display: block;
@@ -473,7 +473,7 @@
   }
 
   &-scroll {
-    height: 230px;
+    height: 100%;
   }
 
   &-row {
@@ -499,15 +499,11 @@
   }
 
   &-list {
-    display: block;
-    min-width: 30px * 6 + 4px * 5;
-    .clearfix();
+    display: grid;
+    grid-template-columns: repeat(4, 25%);
   }
 
   &-cell {
-    display: inline-block;
-    float: left;
-    width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
     margin: 1px;
     text-align: center;
     vertical-align: middle;
@@ -520,8 +516,6 @@
 
   &-cell-content {
     .picker-calendar-cell-content();
-    width: @calendar-in-menu-content-side-length;
-    height: @calendar-in-menu-content-side-length;
   }
 
   &-cell:not(&-cell-active).disabled &-cell-content {

package/CheckPicker/styles/index.css

@@ -3513,7 +3513,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   position: absolute;
   top: 8px;
   right: 12px;
-  padding: 3px;
   color: #717273;
   color: var(--rs-text-secondary);
 }

package/CheckTree/styles/index.css

@@ -3627,7 +3627,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-radius: 6px;
 }
 .rs-check-tree-node .rs-check-item.rs-checkbox-disabled .rs-checkbox-label {
-  cursor: not-allowed;
   color: #717273;
   color: var(--rs-text-disabled);
   background: none;

package/CheckTree/styles/index.less

@@ -103,7 +103,6 @@
 
     &.rs-checkbox-disabled {
       .rs-checkbox-label {
-        cursor: not-allowed;
         color: var(--rs-text-disabled);
         background: none;
       }

package/CheckTreePicker/styles/index.css

@@ -3627,7 +3627,6 @@ label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-radius: 6px;
 }
 .rs-check-tree-node .rs-check-item.rs-checkbox-disabled .rs-checkbox-label {
-  cursor: not-allowed;
   color: #717273;
   color: var(--rs-text-disabled);
   background: none;

package/Checkbox/styles/mixin.less

@@ -29,7 +29,7 @@
   }
 
   &&-disabled label {
-    cursor: not-allowed;
+    cursor: @cursor-disabled;
   }
 
   // Disabled text styles.

package/DatePicker/styles/index.css

@@ -2102,22 +2102,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
           box-shadow: inset 0 0 0 1px var(--rs-input-focus-border);
 }
 .rs-calendar-panel .rs-calendar-table-cell-day {
-  margin-top: 3px;
   display: block;
   text-align: center;
 }
 .rs-calendar-panel .rs-calendar-month-dropdown {
-  margin-top: -2px;
-  margin-left: 12px;
-  margin-right: 12px;
-  top: 54px;
-  width: calc(100% - 24px);
-}
-.rs-calendar-panel:not(.rs-calendar-compact) .rs-calendar-month-dropdown-scroll {
-  height: 644px;
-}
-.rs-calendar-panel.rs-calendar-compact .rs-calendar-month-dropdown-scroll {
-  height: 344px;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 6px;
+  width: calc(100% - 20px);
 }
 .rs-calendar-panel:not(.rs-calendar-compact) .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
   width: 100%;
@@ -2142,7 +2134,20 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   border-bottom-right-radius: 6px;
 }
 .rs-calendar-panel.rs-calendar-compact .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
-  height: 50px;
+  min-height: 38px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .rs-calendar-btn-close {
   position: absolute;
@@ -2167,8 +2172,12 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-calendar-panel .rs-calendar-btn-close {
-  bottom: 11px;
-  margin: 0 20px;
+  bottom: 4px;
+  margin: 0 11px;
+  border-radius: 0 0 6px 6px;
+}
+.rs-calendar-panel.rs-calendar-bordered .rs-calendar-btn-close {
+  bottom: 5px;
 }
 .rs-calendar-month-view .rs-calendar-header-month-toolbar {
   padding-left: 24px;
@@ -2533,6 +2542,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: var(--rs-bg-overlay);
   overflow: hidden;
   z-index: 1;
+  height: calc(100% - 48px);
 }
 .rs-calendar-month-view .rs-calendar-month-dropdown {
   display: block;
@@ -2542,7 +2552,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
           animation: 0.3s linear slideDown;
 }
 .rs-calendar-month-dropdown-scroll {
-  height: 230px;
+  height: 100%;
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
@@ -2565,21 +2575,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   color: var(--rs-text-active);
 }
 .rs-calendar-month-dropdown-list {
-  display: block;
-  min-width: 200px;
-}
-.rs-calendar-month-dropdown-list::before,
-.rs-calendar-month-dropdown-list::after {
-  content: ' ';
-  display: table;
-}
-.rs-calendar-month-dropdown-list::after {
-  clear: both;
+  display: grid;
+  grid-template-columns: repeat(4, 25%);
 }
 .rs-calendar-month-dropdown-cell {
-  display: inline-block;
-  float: left;
-  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2601,8 +2600,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
-  width: 30px;
-  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -4145,9 +4142,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   color: #fff;
   color: var(--rs-calendar-date-selected-text);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-scroll {
-  height: 227px;
-}
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
   height: 198px;
 }

package/DatePicker/styles/index.less

@@ -158,10 +158,6 @@
       .calendar-cell-selected-hover();
     }
 
-    .rs-calendar-month-dropdown-scroll {
-      height: 227px;
-    }
-
     .rs-calendar-time-dropdown-column > ul {
       height: 198px;
     }

package/DateRangePicker/styles/index.css

@@ -2102,22 +2102,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
           box-shadow: inset 0 0 0 1px var(--rs-input-focus-border);
 }
 .rs-calendar-panel .rs-calendar-table-cell-day {
-  margin-top: 3px;
   display: block;
   text-align: center;
 }
 .rs-calendar-panel .rs-calendar-month-dropdown {
-  margin-top: -2px;
-  margin-left: 12px;
-  margin-right: 12px;
-  top: 54px;
-  width: calc(100% - 24px);
-}
-.rs-calendar-panel:not(.rs-calendar-compact) .rs-calendar-month-dropdown-scroll {
-  height: 644px;
-}
-.rs-calendar-panel.rs-calendar-compact .rs-calendar-month-dropdown-scroll {
-  height: 344px;
+  margin-left: 10px;
+  margin-right: 10px;
+  border-radius: 6px;
+  width: calc(100% - 20px);
 }
 .rs-calendar-panel:not(.rs-calendar-compact) .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
   width: 100%;
@@ -2142,7 +2134,20 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   border-bottom-right-radius: 6px;
 }
 .rs-calendar-panel.rs-calendar-compact .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
-  height: 50px;
+  min-height: 38px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
 }
 .rs-calendar-btn-close {
   position: absolute;
@@ -2167,8 +2172,12 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: var(--rs-btn-subtle-hover-bg);
 }
 .rs-calendar-panel .rs-calendar-btn-close {
-  bottom: 11px;
-  margin: 0 20px;
+  bottom: 4px;
+  margin: 0 11px;
+  border-radius: 0 0 6px 6px;
+}
+.rs-calendar-panel.rs-calendar-bordered .rs-calendar-btn-close {
+  bottom: 5px;
 }
 .rs-calendar-month-view .rs-calendar-header-month-toolbar {
   padding-left: 24px;
@@ -2533,6 +2542,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: var(--rs-bg-overlay);
   overflow: hidden;
   z-index: 1;
+  height: calc(100% - 48px);
 }
 .rs-calendar-month-view .rs-calendar-month-dropdown {
   display: block;
@@ -2542,7 +2552,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
           animation: 0.3s linear slideDown;
 }
 .rs-calendar-month-dropdown-scroll {
-  height: 230px;
+  height: 100%;
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
@@ -2565,21 +2575,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   color: var(--rs-text-active);
 }
 .rs-calendar-month-dropdown-list {
-  display: block;
-  min-width: 200px;
-}
-.rs-calendar-month-dropdown-list::before,
-.rs-calendar-month-dropdown-list::after {
-  content: ' ';
-  display: table;
-}
-.rs-calendar-month-dropdown-list::after {
-  clear: both;
+  display: grid;
+  grid-template-columns: repeat(4, 25%);
 }
 .rs-calendar-month-dropdown-cell {
-  display: inline-block;
-  float: left;
-  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2601,8 +2600,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
-  width: 30px;
-  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -4140,9 +4137,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   color: #fff;
   color: var(--rs-calendar-date-selected-text);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-scroll {
-  height: 227px;
-}
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
   height: 198px;
 }
@@ -4192,9 +4186,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-popup .rs-calendar-month-dropdown {
   z-index: 1;
 }
-.rs-picker-popup .rs-calendar-month-dropdown-list {
-  width: 185px;
-}
 .rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }

package/DateRangePicker/styles/index.less

@@ -56,10 +56,6 @@
 
   .rs-calendar-month-dropdown {
     z-index: @zindex-date-range-picker-calendar-dropdown;
-
-    &-list {
-      width: 185px;
-    }
   }
 
   .rs-picker-daterange-panel-show-one-calendar {

package/InputPicker/styles/index.css

@@ -576,7 +576,6 @@ textarea.rs-input-sm {
   position: absolute;
   top: 8px;
   right: 12px;
-  padding: 3px;
   color: #717273;
   color: var(--rs-text-secondary);
 }

package/Pagination/styles/index.css

@@ -3277,7 +3277,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   position: absolute;
   top: 8px;
   right: 12px;
-  padding: 3px;
   color: #717273;
   color: var(--rs-text-secondary);
 }