rsuite 5.70.3 → 5.72.0

package/Accordion/styles/index.css

@@ -4,6 +4,7 @@
   --rs-gray-50: #f7f7fa;
   --rs-gray-100: #f2f2f5;
   --rs-gray-200: #e5e5ea;
+  --rs-gray-300: #d9d9d9;
   --rs-gray-400: #b6b7b8;
   --rs-gray-500: #939393;
   --rs-gray-600: #717273;
@@ -14,6 +15,9 @@
   --rs-text-heading: var(--rs-gray-900);
   --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: var(--rs-gray-500);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-400);
   --rs-btn-subtle-hover-bg: var(--rs-gray-200);
   --rs-btn-subtle-hover-text: var(--rs-gray-800);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
@@ -24,6 +28,7 @@
   --rs-gray-50: #e9ebf0;
   --rs-gray-100: #cbced4;
   --rs-gray-200: #a4a9b3;
+  --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
@@ -34,6 +39,9 @@
   --rs-text-heading: var(--rs-gray-0);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: var(--rs-gray-300);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-400);
   --rs-btn-subtle-hover-bg: var(--rs-gray-500);
   --rs-btn-subtle-hover-text: var(--rs-gray-50);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
@@ -44,6 +52,7 @@
   --rs-gray-50: #e9ebf0;
   --rs-gray-100: #cbced4;
   --rs-gray-200: #a4a9b3;
+  --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
@@ -54,6 +63,9 @@
   --rs-text-heading: var(--rs-gray-0);
   --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
+  --rs-scrollbar-bg: transparent;
+  --rs-scrollbar-thumb-bg: var(--rs-gray-300);
+  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-400);
   --rs-btn-subtle-hover-bg: transparent;
   --rs-btn-subtle-hover-text: var(--rs-primary-400);
   --rs-panel-shadow: 0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06);
@@ -161,25 +173,27 @@
   visibility: visible;
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar {
-  --rs-scrollbar-bg: transparent;
-  --rs-scrollbar-thumb-bg: rgba(87, 87, 87, 0.6);
-  --rs-scrollbar-thumb-hover-bg: var(--rs-gray-800);
-  scrollbar-width: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #939393 transparent;
   scrollbar-color: var(--rs-scrollbar-thumb-bg) var(--rs-scrollbar-bg);
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar {
   width: 12px;
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
   background: var(--rs-scrollbar-bg);
   border-radius: 10px;
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb {
+  background-color: #939393;
   background-color: var(--rs-scrollbar-thumb-bg);
   border-radius: 6px;
+  border: 3px solid transparent;
   border: 3px solid var(--rs-scrollbar-bg);
 }
 .rs-scroll-view.rs-scroll-view-custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #b6b7b8;
   background-color: var(--rs-scrollbar-thumb-hover-bg);
 }
 .rs-panel {
@@ -202,8 +216,8 @@ tbody.rs-panel .rs-anim-collapse.rs-anim-in {
   position: relative;
   height: 0;
   overflow: hidden;
-  -webkit-transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
-  transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+  -webkit-transition: height var(--rs-anim-collapse-duration) ease, width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
+  transition: height var(--rs-anim-collapse-duration) ease, width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
 }
 .rs-panel .rs-anim-collapse {
   display: none;

package/Animation/styles/collapse.less

@@ -18,5 +18,6 @@
   position: relative;
   height: 0;
   overflow: hidden;
-  transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+  transition: height var(--rs-anim-collapse-duration) ease,
+    width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
 }

package/Animation/styles/fade.less

@@ -1,6 +1,6 @@
 .rs-anim-fade {
   opacity: 0;
-  transition: opacity 0.15s linear;
+  transition: opacity var(--rs-anim-fade-duration) linear;
   pointer-events: none;
 
   &.rs-anim-in {

package/Animation/styles/index.css

@@ -8,6 +8,10 @@
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
 }
+:root {
+  --rs-anim-fade-duration: 0.15s;
+  --rs-anim-collapse-duration: 0.35s;
+}
 @-webkit-keyframes slideInLeft {
   from {
     opacity: 0;
@@ -333,12 +337,16 @@ tbody.rs-anim-collapse.rs-anim-in {
   height: 0;
   overflow: hidden;
   -webkit-transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+  -webkit-transition: height var(--rs-anim-collapse-duration) ease, width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
   transition: height 0.35s ease, width 0.35s ease, visibility 0.35s ease;
+  transition: height var(--rs-anim-collapse-duration) ease, width var(--rs-anim-collapse-duration) ease, visibility var(--rs-anim-collapse-duration) ease;
 }
 .rs-anim-fade {
   opacity: 0;
   -webkit-transition: opacity 0.15s linear;
+  -webkit-transition: opacity var(--rs-anim-fade-duration) linear;
   transition: opacity 0.15s linear;
+  transition: opacity var(--rs-anim-fade-duration) linear;
   pointer-events: none;
 }
 .rs-anim-fade.rs-anim-in {

package/Animation/styles/index.less

@@ -1,4 +1,5 @@
 @import '../../styles/common.less';
+@import './variables.less';
 @import './mixin.less';
 @import './animation.less';
 @import './slide.less';

package/Animation/styles/variables.less

@@ -0,0 +1,4 @@
+:root {
+  --rs-anim-fade-duration: 0.15s;
+  --rs-anim-collapse-duration: 0.35s;
+}

package/AutoComplete/styles/index.css

@@ -3173,6 +3173,17 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   top: -1px;
   z-index: 1;
 }
+.rs-virt-list .rs-picker-select-menu-item,
+.rs-virt-list .rs-check-item label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tree-virt-list .rs-tree-node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .rs-auto-complete-menu {
   overflow-y: auto;
 }

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [5.72.0](https://github.com/rsuite/rsuite/compare/v5.71.0...v5.72.0) (2024-10-11)
+
+
+### Bug Fixes
+
+* **DateInput,DateRangeInput:** fix the issue that the value cannot be cleared by the Backspace key ([#3987](https://github.com/rsuite/rsuite/issues/3987)) ([7a25979](https://github.com/rsuite/rsuite/commit/7a2597928d429321d981bbbf958bf1ff01936d2c))
+* **InlineEdit:** ix the issue that InputPicker needs to be clicked twice to focus ([#3990](https://github.com/rsuite/rsuite/issues/3990)) ([7d123b0](https://github.com/rsuite/rsuite/commit/7d123b0f546ac4a61736e147b288bbdca5a1bd5a))
+* **SelectPicker,CheckPicker:** fix the virtual list option text being wrapped ([#3988](https://github.com/rsuite/rsuite/issues/3988)) ([c8f39ef](https://github.com/rsuite/rsuite/commit/c8f39ef2cac3ce6a5df36bec4884d3781ca4e2d1))
+
+
+### Features
+
+* add support for TimePicker and TimeRangePicker ([#3984](https://github.com/rsuite/rsuite/issues/3984)) ([6cadccf](https://github.com/rsuite/rsuite/commit/6cadccf2af96a4af0495c3bdce5190f4556b6004))
+* **Animation.Fade:** add support for CSS variable control animation duration ([#3989](https://github.com/rsuite/rsuite/issues/3989)) ([3952929](https://github.com/rsuite/rsuite/commit/39529298d50d58961644e20b86f7d24bdbc32f81))
+
+
+
+# [5.71.0](https://github.com/rsuite/rsuite/compare/v5.70.3...v5.71.0) (2024-09-27)
+
+
+### Bug Fixes
+
+* **Form:** fix can't get form data in addRule callback ([#3980](https://github.com/rsuite/rsuite/issues/3980)) ([26417ef](https://github.com/rsuite/rsuite/commit/26417ef93c30249a95c0b548123f1adf31b9d6a1))
+
+
+### Features
+
+* **DateRangePicker:** add support for `hideHours`, `hideMinutes`, `hideSeconds` ([#3979](https://github.com/rsuite/rsuite/issues/3979)) ([1d48589](https://github.com/rsuite/rsuite/commit/1d48589df8b54e0ae0e6cbc62b5d53b58c61cf3c))
+
+
+
 ## [5.70.3](https://github.com/rsuite/rsuite/compare/v5.70.2...v5.70.3) (2024-09-20)
 
 

package/Calendar/styles/index.css

@@ -1290,7 +1290,7 @@
   display: none;
 }
 .rs-calendar {
-  padding-top: 12px;
+  padding-top: 10px;
   position: relative;
   min-height: 266px;
   overflow: hidden;
@@ -1434,6 +1434,10 @@
   background: var(--rs-bg-overlay);
   z-index: 1;
 }
+.rs-calendar-btn-close:hover {
+  background-color: #e5e5ea;
+  background-color: var(--rs-btn-subtle-hover-bg);
+}
 .rs-calendar-panel .rs-calendar-btn-close {
   bottom: 11px;
   margin: 0 20px;
@@ -1503,8 +1507,8 @@
 }
 .rs-calendar-header {
   width: 280px;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .rs-calendar-header::before,
 .rs-calendar-header::after {
@@ -1527,7 +1531,7 @@
 .rs-calendar-header-title {
   margin: 0 4px;
 }
-.rs-calendar-header-meridian {
+.rs-calendar-header-meridiem {
   font-size: 12px;
   margin-left: 4px;
 }
@@ -1582,8 +1586,8 @@
 }
 .rs-calendar-header-has-month:not(.rs-calendar-header-has-time) {
   margin: 0 auto;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 .rs-calendar-header-has-month:not(.rs-calendar-header-has-time) .rs-calendar-header-month-toolbar {
   display: block;
@@ -1624,7 +1628,7 @@
 }
 /* rtl:end:ignore */
 .rs-calendar-body {
-  padding: 4px 12px 12px;
+  padding: 4px 10px 10px;
 }
 .rs-calendar-table {
   display: table;
@@ -1814,8 +1818,8 @@
 }
 .rs-calendar-month-dropdown-row {
   position: relative;
-  padding-left: 50px;
-  padding-right: 12px;
+  padding-left: 48px;
+  padding-right: 10px;
   padding-top: 5px;
   padding-bottom: 5px;
 }
@@ -1826,7 +1830,7 @@
 .rs-calendar-month-dropdown-year {
   position: absolute;
   top: calc(50% - 0.5em);
-  left: 12px;
+  left: 10px;
 }
 .rs-calendar-month-dropdown-year-active {
   color: #1675e0;
@@ -1902,8 +1906,8 @@
   display: none;
   position: absolute;
   top: 44px;
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 10px;
+  padding-right: 10px;
   width: 100%;
   background-color: #fff;
   background-color: var(--rs-bg-overlay);
@@ -1927,6 +1931,11 @@
   display: table-cell;
   width: 1%;
 }
+.rs-calendar-time-dropdown-column ::after {
+  content: '';
+  display: block;
+  height: calc(100% - 30px);
+}
 .rs-calendar-time-dropdown-column > ul,
 .rs-calendar-time-dropdown-column > ul > li {
   list-style: none;
@@ -1936,7 +1945,7 @@
 .rs-calendar-time-dropdown-column > ul {
   height: 230px;
   overflow-y: auto;
-  padding-bottom: 200px;
+  scroll-behavior: smooth;
 }
 .rs-calendar-time-dropdown-column-title {
   width: 100%;
@@ -1949,6 +1958,10 @@
   line-height: 1.66666667;
   padding-top: 2px;
   padding-bottom: 2px;
+  margin-bottom: 2px;
+}
+.rs-calendar-only-time .rs-calendar-time-dropdown-column-title {
+  border-top: none;
 }
 .rs-calendar-time-dropdown-cell {
   font-size: 14px;
@@ -1958,6 +1971,7 @@
   display: block;
   text-align: center;
   cursor: pointer;
+  margin: 1px;
 }
 .rs-calendar-time-dropdown-cell,
 .rs-calendar-time-dropdown-cell:hover,
@@ -2017,6 +2031,22 @@
   opacity: 0.3;
   cursor: not-allowed;
 }
+.rs-calendar-only-time {
+  padding-top: 10px;
+  display: block;
+}
+.rs-calendar-only-time .rs-calendar-time-dropdown {
+  position: relative;
+  top: 2px;
+}
+.rs-calendar-only-time .rs-calendar-time-dropdown-row {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.rs-calendar-only-time .rs-calendar-time-dropdown-column {
+  min-width: 60px;
+}
 @-webkit-keyframes slideDown {
   from {
     -webkit-transform: translateY(-100%);

package/Calendar/styles/index.less

@@ -154,6 +154,10 @@
     justify-content: center;
     background: var(--rs-bg-overlay);
     z-index: 1;
+
+    &:hover {
+      background-color: var(--rs-btn-subtle-hover-bg)
+    }
   }
 
   &-panel &-btn-close {
@@ -265,7 +269,7 @@
     margin: 0 @calendar-header-title-margin;
   }
 
-  &-meridian {
+  &-meridiem {
     // Designer think it's nice!
     font-size: @font-size-small;
     margin-left: 4px;
@@ -567,6 +571,12 @@
     display: table-cell;
     width: 1%;
 
+    ::after {
+      content: '';
+      display: block;
+      height: calc(100% - 30px);
+    }
+
     > ul,
     > ul > li {
       list-style: none;
@@ -577,7 +587,7 @@
     > ul {
       height: 230px;
       overflow-y: auto;
-      padding-bottom: 200px;
+      scroll-behavior: smooth;
     }
   }
 
@@ -590,6 +600,11 @@
     line-height: @line-height-small;
     padding-top: 2px;
     padding-bottom: 2px;
+    margin-bottom: 2px;
+
+    .rs-calendar-only-time & {
+      border-top: none;
+    }
   }
 
   &-cell {
@@ -600,6 +615,7 @@
     display: block;
     text-align: center;
     cursor: pointer;
+    margin: 1px;
 
     &,
     &:hover,
@@ -636,6 +652,22 @@
   }
 }
 
+.rs-calendar-only-time {
+  padding-top: @calendar-picker-padding;
+  display: block;
+
+  .rs-calendar-time-dropdown {
+    position: relative;
+    top: 2px;
+  }
+  .rs-calendar-time-dropdown-row {
+    display: flex;
+  }
+  .rs-calendar-time-dropdown-column {
+    min-width: 60px;
+  }
+}
+
 @keyframes slideDown {
   from {
     transform: translateY(-100%);

package/Cascader/styles/index.css

@@ -3364,5 +3364,16 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   top: -1px;
   z-index: 1;
 }
+.rs-virt-list .rs-picker-select-menu-item,
+.rs-virt-list .rs-check-item label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tree-virt-list .rs-tree-node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 /*# sourceMappingURL=index.css.map */

package/CheckPicker/styles/index.css

@@ -3474,6 +3474,17 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   top: -1px;
   z-index: 1;
 }
+.rs-virt-list .rs-picker-select-menu-item,
+.rs-virt-list .rs-check-item label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tree-virt-list .rs-tree-node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .rs-picker-check-menu-items {
   overflow-y: auto;
 }

package/CheckTree/styles/index.css

@@ -3192,6 +3192,17 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   top: -1px;
   z-index: 1;
 }
+.rs-virt-list .rs-picker-select-menu-item,
+.rs-virt-list .rs-check-item label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tree-virt-list .rs-tree-node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .rs-checkbox {
   position: relative;
   display: inline-block;

package/CheckTreePicker/styles/index.css

@@ -3192,6 +3192,17 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   top: -1px;
   z-index: 1;
 }
+.rs-virt-list .rs-picker-select-menu-item,
+.rs-virt-list .rs-check-item label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.rs-tree-virt-list .rs-tree-node-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .rs-checkbox {
   position: relative;
   display: inline-block;