rsuite 5.55.0 → 5.56.0

package/AutoComplete/styles/index.css

@@ -3172,11 +3172,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-auto-complete-menu {

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+# [5.56.0](https://github.com/rsuite/rsuite/compare/v5.55.1...v5.56.0) (2024-03-15)
+
+
+### Bug Fixes
+
+* examples/with-gatsby/package.json to reduce vulnerabilities ([#3583](https://github.com/rsuite/rsuite/issues/3583)) ([2f10776](https://github.com/rsuite/rsuite/commit/2f10776c541b2616b9eef9f8e34e4758d3451f77))
+* **Checkbox:** listen for click events on the correct element ([#3666](https://github.com/rsuite/rsuite/issues/3666)) ([cd43df5](https://github.com/rsuite/rsuite/commit/cd43df5feee868ad411fa4da54635b54d2d25934))
+* **TagGroup:** fix css entry in nested children ([#3663](https://github.com/rsuite/rsuite/issues/3663)) ([fc59018](https://github.com/rsuite/rsuite/commit/fc590180066e26cbfba28428b4db54f6f4a070dc))
+
+
+### Features
+
+* **Checkbox:** add support for `color` on `<Checkbox>` ([#3670](https://github.com/rsuite/rsuite/issues/3670)) ([a9e14ee](https://github.com/rsuite/rsuite/commit/a9e14ee834d612153e649ff14a54f5f83f6d6b2f))
+* **Radio:** add support for `color` on `<Radio>` ([#3672](https://github.com/rsuite/rsuite/issues/3672)) ([9406886](https://github.com/rsuite/rsuite/commit/9406886a59443f54a6e08d23025a0654dcd68bf0))
+
+
+
+## [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/Cascader/styles/index.css

@@ -3183,11 +3183,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-picker-cascader-menu-items > div::before,

package/CheckPicker/styles/index.css

@@ -393,17 +393,16 @@
   position: relative;
 }
 /* rtl:begin:ignore */
-.rs-checkbox-wrapper::before,
-.rs-checkbox-wrapper::after,
-.rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control::before,
+.rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-control .rs-checkbox-inner::after {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   display: block;
 }
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control .rs-checkbox-inner::after {
   opacity: 0;
   -webkit-transform: rotate(45deg) scale(0);
           transform: rotate(45deg) scale(0);
@@ -412,12 +411,12 @@
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
   transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46), -webkit-transform 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::after {
   -webkit-transition: none;
   transition: none;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after,
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after,
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after {
   border: solid #fff;
   border: solid var(--rs-checkbox-icon);
   width: 6px;
@@ -426,12 +425,12 @@
   margin-left: 5px;
   opacity: 1;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::after {
   border-width: 0 2px 2px 0;
   -webkit-transform: rotate(45deg) scale(1);
           transform: rotate(45deg) scale(1);
 }
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::after {
   border-width: 0 0 2px;
   -webkit-transform: rotate(0deg) scale(1);
           transform: rotate(0deg) scale(1);
@@ -441,7 +440,7 @@
 }
 /* rtl:end:ignore */
 /* stylelint-disable-next-line */
-.rs-checkbox-wrapper {
+.rs-checkbox-control {
   position: absolute;
   width: 16px;
   height: 16px;
@@ -449,18 +448,22 @@
   left: 10px;
   top: 10px;
 }
-.rs-checkbox-wrapper [type='checkbox'] {
-  width: 0;
-  height: 0;
+.rs-checkbox-control [type='checkbox'] {
+  position: absolute;
   opacity: 0;
+  z-index: 1;
+  top: -10px;
+  right: -10px;
+  bottom: -10px;
+  left: -10px;
 }
-.rs-checkbox-wrapper::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-wrapper .rs-checkbox-inner::after {
+.rs-checkbox-control::before,
+.rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-control .rs-checkbox-inner::after {
   width: 16px;
   height: 16px;
 }
-.rs-checkbox-wrapper::before {
+.rs-checkbox-control::before {
   border: 1px solid #3498ff;
   border: 1px solid var(--rs-checkbox-checked-bg);
   background-color: transparent;
@@ -474,23 +477,17 @@
   transition: transform 0.2s linear, opacity 0.2s linear;
   transition: transform 0.2s linear, opacity 0.2s linear, -webkit-transform 0.2s linear;
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper::before {
+.rs-theme-high-contrast .rs-checkbox-control::before {
   -webkit-transition: none;
   transition: none;
 }
-.rs-checkbox-checked .rs-checkbox-wrapper::before {
+.rs-checkbox-checked .rs-checkbox-control::before {
   -webkit-transform: scale(1.5);
           transform: scale(1.5);
   opacity: 0;
   visibility: visible;
 }
-.rs-checkbox-wrapper::after {
-  top: -10px;
-  right: -10px;
-  bottom: -10px;
-  left: -10px;
-}
-.rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-control .rs-checkbox-inner::before {
   border: 1px solid #d9d9d9;
   border: 1px solid var(--rs-checkbox-border);
   background-color: transparent;
@@ -500,35 +497,140 @@
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear;
   transition: background 0.2s linear, border 0.2s linear, box-shadow 0.2s linear, -webkit-box-shadow 0.2s linear;
 }
-.rs-theme-high-contrast .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-theme-high-contrast .rs-checkbox-control .rs-checkbox-inner::before {
   -webkit-transition: none;
   transition: none;
 }
-label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
+label:hover .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-disabled:not(.rs-checkbox-checked):not(.rs-checkbox-indeterminate) .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #f7f7fa;
   border-color: var(--rs-checkbox-disabled-bg);
   background-color: #f7f7fa;
   background-color: var(--rs-checkbox-disabled-bg);
 }
-.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   border-color: #3498ff;
   border-color: var(--rs-checkbox-checked-bg);
   background-color: #3498ff;
   background-color: var(--rs-checkbox-checked-bg);
 }
-.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.3;
 }
-.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::before,
-.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-wrapper .rs-checkbox-inner::before {
+.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-checked .rs-checkbox-control .rs-checkbox-inner::before,
+.rs-theme-high-contrast .rs-checkbox-disabled.rs-checkbox-indeterminate .rs-checkbox-control .rs-checkbox-inner::before {
   opacity: 0.5;
 }
+.rs-checkbox-red .rs-checkbox-control::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+}
+.rs-checkbox-red label:hover .rs-checkbox-inner::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+}
+.rs-checkbox-red.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-red.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #f44336;
+  border-color: var(--rs-red-500);
+  background-color: #f44336;
+  background-color: var(--rs-red-500);
+}
+.rs-checkbox-orange .rs-checkbox-control::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+}
+.rs-checkbox-orange label:hover .rs-checkbox-inner::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+}
+.rs-checkbox-orange.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-orange.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #fa8900;
+  border-color: var(--rs-orange-500);
+  background-color: #fa8900;
+  background-color: var(--rs-orange-500);
+}
+.rs-checkbox-yellow .rs-checkbox-control::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+}
+.rs-checkbox-yellow label:hover .rs-checkbox-inner::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+}
+.rs-checkbox-yellow.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-yellow.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #ffb300;
+  border-color: var(--rs-yellow-500);
+  background-color: #ffb300;
+  background-color: var(--rs-yellow-500);
+}
+.rs-checkbox-green .rs-checkbox-control::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+}
+.rs-checkbox-green label:hover .rs-checkbox-inner::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+}
+.rs-checkbox-green.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-green.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #4caf50;
+  border-color: var(--rs-green-500);
+  background-color: #4caf50;
+  background-color: var(--rs-green-500);
+}
+.rs-checkbox-cyan .rs-checkbox-control::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+}
+.rs-checkbox-cyan label:hover .rs-checkbox-inner::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+}
+.rs-checkbox-cyan.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-cyan.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #00bcd4;
+  border-color: var(--rs-cyan-500);
+  background-color: #00bcd4;
+  background-color: var(--rs-cyan-500);
+}
+.rs-checkbox-blue .rs-checkbox-control::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+}
+.rs-checkbox-blue label:hover .rs-checkbox-inner::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+}
+.rs-checkbox-blue.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-blue.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #2196f3;
+  border-color: var(--rs-blue-500);
+  background-color: #2196f3;
+  background-color: var(--rs-blue-500);
+}
+.rs-checkbox-violet .rs-checkbox-control::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+}
+.rs-checkbox-violet label:hover .rs-checkbox-inner::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+}
+.rs-checkbox-violet.rs-checkbox-checked .rs-checkbox-inner::before,
+.rs-checkbox-violet.rs-checkbox-indeterminate .rs-checkbox-inner::before {
+  border-color: #673ab7;
+  border-color: var(--rs-violet-500);
+  background-color: #673ab7;
+  background-color: var(--rs-violet-500);
+}
 .rs-btn {
   display: -webkit-inline-box;
   display: -ms-inline-flexbox;
@@ -3373,11 +3475,11 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 12px;
 }
-.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper,
-.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control,
+.rs-picker-check-menu-group-children .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 .rs-picker-check-menu-items {
@@ -3422,7 +3524,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-check-menu-items.rs-picker-check-menu-grouped .rs-check-item .rs-checkbox-checker > label {
   padding-left: 52px;
 }
-.rs-picker-check-menu-items.rs-picker-check-menu-grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+.rs-picker-check-menu-items.rs-picker-check-menu-grouped .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
   left: 26px;
 }
 

package/CheckPicker/styles/index.less

@@ -21,7 +21,7 @@
       padding-left: 52px;
     }
 
-    .rs-check-item .rs-checkbox-checker .rs-checkbox-wrapper {
+    .rs-check-item .rs-checkbox-checker .rs-checkbox-control {
       left: 26px;
     }
   }