rsuite 5.55.0 → 5.55.1

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## [5.55.1](https://github.com/rsuite/rsuite/compare/v5.55.0...v5.55.1) (2024-03-08)
+
+
+### Bug Fixes
+
+* **Calendar:** fix misalignment of month selection menu layout ([#3655](https://github.com/rsuite/rsuite/issues/3655)) ([eff9702](https://github.com/rsuite/rsuite/commit/eff9702977d893caa0c701dba03b19a44d56799a))
+* **DatePicker,DateRangePicker:** fix the problem of padding ([#3659](https://github.com/rsuite/rsuite/issues/3659)) ([47f84f4](https://github.com/rsuite/rsuite/commit/47f84f4a3d2e3d4bd716a40ae78cb792ac779380))
+* **Message:** fix the z-index issue of Message in full screen state ([#3658](https://github.com/rsuite/rsuite/issues/3658)) ([f899b92](https://github.com/rsuite/rsuite/commit/f899b9254b694e61306ab096d324d19870bc9709))
+* **nav:** default appearance doesn't show an active background when focused ([#3654](https://github.com/rsuite/rsuite/issues/3654)) ([3dcf943](https://github.com/rsuite/rsuite/commit/3dcf943a8e6811f4369ed858fba671e7783ef6f7))
+
+
+
 # [5.55.0](https://github.com/rsuite/rsuite/compare/v5.54.0...v5.55.0) (2024-03-01)
 
 

package/Calendar/styles/index.css

@@ -1763,6 +1763,7 @@
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -1784,6 +1785,8 @@
   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

@@ -503,7 +503,7 @@
   &-cell {
     display: inline-block;
     float: left;
-    // width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
+    width: ~'calc((100% - @{calendar-table-cell-content-today-border-width} * 12 ) / 6)';
     margin: 1px;
     text-align: center;
     vertical-align: middle;
@@ -516,6 +516,8 @@
 
   &-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/DatePicker/styles/index.css

@@ -2484,6 +2484,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2505,6 +2506,8 @@ 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;
@@ -3995,6 +3998,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4034,7 +4040,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4108,7 +4113,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 

package/DatePicker/styles/index.less

@@ -65,6 +65,10 @@
   // The padding used when show week numbers.
   @calendar-padding-x-condensed: 12px;
 
+  &&-date {
+    padding: 0;
+  }
+
   .rs-picker-toolbar {
     max-width: 100%;
 
@@ -118,7 +122,6 @@
       }
     }
 
-    .rs-calendar-month-dropdown-cell-content,
     .rs-calendar-table-cell-content {
       width: @calendar-in-menu-content-side-length;
       height: @calendar-in-menu-content-side-length;
@@ -159,7 +162,7 @@
     }
 
     .rs-calendar-time-dropdown-column > ul {
-      height: 214px;
+      height: 198px;
       padding-bottom: 184px;
     }
   }

package/DateRangePicker/styles/index.css

@@ -2484,6 +2484,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: left;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -2505,6 +2506,8 @@ 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;
@@ -3990,6 +3993,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4029,7 +4035,6 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4103,7 +4108,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 .rs-stack {
@@ -4124,35 +4129,38 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-daterange > .rs-input-group.rs-input-group-inside .rs-input {
   padding-right: 0;
 }
-.rs-picker-daterange-menu .rs-calendar {
+.rs-picker-popup.rs-picker-popup-daterange {
+  padding: 0;
+}
+.rs-picker-popup .rs-calendar {
   display: inline-block;
   height: 274px;
   padding-bottom: 12px;
 }
-.rs-picker-daterange-menu .rs-calendar:first-child {
+.rs-picker-popup .rs-calendar:first-child {
   border-right: 1px solid #e5e5ea;
   border-right: 1px solid var(--rs-border-primary);
 }
-.rs-picker-daterange-menu .rs-calendar-header {
+.rs-picker-popup .rs-calendar-header {
   width: 100%;
   text-align: center;
 }
-.rs-picker-daterange-menu .rs-calendar-header-month-toolbar {
+.rs-picker-popup .rs-calendar-header-month-toolbar {
   float: none;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown {
+.rs-picker-popup .rs-calendar-month-dropdown {
   z-index: 1;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown-list {
+.rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
   max-width: 255px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-calendar-single .rs-calendar {
+.rs-picker-popup .rs-picker-daterange-calendar-single .rs-calendar {
   border: 0;
   display: block;
   margin: auto;

package/DateRangePicker/styles/index.less

@@ -30,7 +30,11 @@
 // Date range Picker
 // ----------------------
 
-.rs-picker-daterange-menu {
+.rs-picker-popup {
+  &&-daterange {
+    padding: 0;
+  }
+
   .rs-calendar {
     display: inline-block;
     height: 274px;

package/Message/styles/index.css

@@ -436,7 +436,7 @@
   left: 0;
   width: 100%;
   border-radius: 0;
-  z-index: 1090;
+  z-index: 3;
 }
 .rs-message-success {
   background-color: #fff;

package/Nav/styles/index.css

@@ -1657,8 +1657,7 @@
 .rs-nav-default .rs-nav-item {
   border-radius: 6px;
 }
-.rs-nav-default .rs-nav-item:hover,
-.rs-nav-default .rs-nav-item:focus {
+.rs-nav-default .rs-nav-item:hover {
   background: #e5e5ea;
   background: var(--rs-navs-bg-hover);
 }

package/Nav/styles/index.less

@@ -156,8 +156,7 @@
   .rs-nav-item {
     border-radius: 6px;
 
-    &:hover,
-    &:focus {
+    &:hover {
       background: var(--rs-navs-bg-hover);
     }
   }

package/Tabs/styles/index.css

@@ -1657,8 +1657,7 @@
 .rs-nav-default .rs-nav-item {
   border-radius: 6px;
 }
-.rs-nav-default .rs-nav-item:hover,
-.rs-nav-default .rs-nav-item:focus {
+.rs-nav-default .rs-nav-item:hover {
   background: #e5e5ea;
   background: var(--rs-navs-bg-hover);
 }

package/cjs/DatePicker/DatePicker.js

@@ -419,7 +419,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(menuClassName, className);
+    var classes = merge(menuClassName, className, prefix('popup-date'));
     var styles = (0, _extends2.default)({}, menuStyle, {
       left: left,
       top: top

package/cjs/DateRangePicker/DateRangePicker.js

@@ -559,7 +559,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
-    var classes = merge(className, menuClassName, prefix('daterange-menu'));
+    var classes = merge(className, menuClassName, prefix('popup-daterange'));
     var panelClasses = prefix('daterange-panel', {
       'daterange-panel-show-one-calendar': showOneCalendar
     });

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

@@ -3250,6 +3250,7 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-month-dropdown-cell {
   display: inline-block;
   float: right;
+  width: calc((100% - 1px * 12 ) / 6);
   margin: 1px;
   text-align: center;
   vertical-align: middle;
@@ -3271,6 +3272,8 @@ tbody.rs-anim-collapse.rs-anim-in {
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
+  width: 30px;
+  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -4327,6 +4330,9 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-date-predefined .rs-btn {
   display: block;
 }
+.rs-picker-popup.rs-picker-popup-date {
+  padding: 0;
+}
 .rs-picker-popup .rs-picker-toolbar {
   max-width: 100%;
 }
@@ -4366,7 +4372,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-picker-popup .rs-calendar .rs-calendar-month-dropdown-cell-content,
 .rs-picker-popup .rs-calendar .rs-calendar-table-cell-content {
   width: 30px;
   height: 30px;
@@ -4440,7 +4445,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
   height: 227px;
 }
 .rs-picker-popup .rs-calendar .rs-calendar-time-dropdown-column > ul {
-  height: 214px;
+  height: 198px;
   padding-bottom: 184px;
 }
 .rs-picker-daterange .rs-input-group-addon {
@@ -4456,35 +4461,38 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 .rs-picker-daterange > .rs-input-group.rs-input-group-inside .rs-input {
   padding-left: 0;
 }
-.rs-picker-daterange-menu .rs-calendar {
+.rs-picker-popup.rs-picker-popup-daterange {
+  padding: 0;
+}
+.rs-picker-popup .rs-calendar {
   display: inline-block;
   height: 274px;
   padding-bottom: 12px;
 }
-.rs-picker-daterange-menu .rs-calendar:first-child {
+.rs-picker-popup .rs-calendar:first-child {
   border-left: 1px solid #e5e5ea;
   border-left: 1px solid var(--rs-border-primary);
 }
-.rs-picker-daterange-menu .rs-calendar-header {
+.rs-picker-popup .rs-calendar-header {
   width: 100%;
   text-align: center;
 }
-.rs-picker-daterange-menu .rs-calendar-header-month-toolbar {
+.rs-picker-popup .rs-calendar-header-month-toolbar {
   float: none;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown {
+.rs-picker-popup .rs-calendar-month-dropdown {
   z-index: 1;
 }
-.rs-picker-daterange-menu .rs-calendar-month-dropdown-list {
+.rs-picker-popup .rs-calendar-month-dropdown-list {
   width: 185px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar {
   max-width: 255px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
+.rs-picker-popup .rs-picker-daterange-panel-show-one-calendar .rs-picker-toolbar-ranges {
   width: 190px;
 }
-.rs-picker-daterange-menu .rs-picker-daterange-calendar-single .rs-calendar {
+.rs-picker-popup .rs-picker-daterange-calendar-single .rs-calendar {
   border: 0;
   display: block;
   margin: auto;
@@ -9385,7 +9393,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
   right: 0;
   width: 100%;
   border-radius: 0;
-  z-index: 1090;
+  z-index: 3;
 }
 .rs-message-success {
   background-color: #fff;
@@ -9907,8 +9915,7 @@ textarea.rs-inline-edit-sm .rs-plaintext {
 .rs-nav-default .rs-nav-item {
   border-radius: 6px;
 }
-.rs-nav-default .rs-nav-item:hover,
-.rs-nav-default .rs-nav-item:focus {
+.rs-nav-default .rs-nav-item:hover {
   background: #e5e5ea;
   background: var(--rs-navs-bg-hover);
 }