rsuite 5.71.0 → 5.73.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,37 @@
+# [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)
+
+
+### 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)
 
 

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;
@@ -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;
@@ -1434,9 +1439,17 @@
   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;
+  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;
@@ -1503,8 +1516,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 +1540,7 @@
 .rs-calendar-header-title {
   margin: 0 4px;
 }
-.rs-calendar-header-meridian {
+.rs-calendar-header-meridiem {
   font-size: 12px;
   margin-left: 4px;
 }
@@ -1582,8 +1595,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 +1637,7 @@
 }
 /* rtl:end:ignore */
 .rs-calendar-body {
-  padding: 4px 12px 12px;
+  padding: 4px 10px 10px;
 }
 .rs-calendar-table {
   display: table;
@@ -1801,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;
@@ -1810,12 +1824,12 @@
           animation: 0.3s linear slideDown;
 }
 .rs-calendar-month-dropdown-scroll {
-  height: 230px;
+  height: 100%;
 }
 .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,28 +1840,17 @@
 .rs-calendar-month-dropdown-year {
   position: absolute;
   top: calc(50% - 0.5em);
-  left: 12px;
+  left: 10px;
 }
 .rs-calendar-month-dropdown-year-active {
   color: #1675e0;
   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;
@@ -1869,8 +1872,6 @@
   padding: 5px;
   cursor: pointer;
   border-radius: 6px;
-  width: 30px;
-  height: 30px;
 }
 .rs-calendar-month-dropdown-cell-content:hover {
   background-color: #f2faff;
@@ -1902,8 +1903,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 +1928,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 +1942,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 +1955,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 +1968,7 @@
   display: block;
   text-align: center;
   cursor: pointer;
+  margin: 1px;
 }
 .rs-calendar-time-dropdown-cell,
 .rs-calendar-time-dropdown-cell:hover,
@@ -2017,6 +2028,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

@@ -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 {
@@ -154,11 +148,20 @@
     justify-content: center;
     background: var(--rs-bg-overlay);
     z-index: 1;
+
+    &:hover {
+      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;
   }
 }
 
@@ -265,7 +268,7 @@
     margin: 0 @calendar-header-title-margin;
   }
 
-  &-meridian {
+  &-meridiem {
     // Designer think it's nice!
     font-size: @font-size-small;
     margin-left: 4px;
@@ -459,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;
@@ -469,7 +473,7 @@
   }
 
   &-scroll {
-    height: 230px;
+    height: 100%;
   }
 
   &-row {
@@ -495,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;
@@ -516,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 {
@@ -567,6 +565,12 @@
     display: table-cell;
     width: 1%;
 
+    ::after {
+      content: '';
+      display: block;
+      height: calc(100% - 30px);
+    }
+
     > ul,
     > ul > li {
       list-style: none;
@@ -577,7 +581,7 @@
     > ul {
       height: 230px;
       overflow-y: auto;
-      padding-bottom: 200px;
+      scroll-behavior: smooth;
     }
   }
 
@@ -590,6 +594,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 +609,7 @@
     display: block;
     text-align: center;
     cursor: pointer;
+    margin: 1px;
 
     &,
     &:hover,
@@ -636,6 +646,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;
 }
@@ -3502,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);
 }