rsuite 5.60.2 → 5.61.0

package/CheckTreePicker/styles/index.less

@@ -1,168 +1,7 @@
-@import '../../styles/common';
-@import '../../internals/Picker/styles/index';
-@import '../../TreePicker/styles/mixin';
-@import '../../Checkbox/styles/index';
+@import '../../CheckTree/styles/index.less';
 
-// **Check Tree Picker
-// **----------------------
-
-.rs-check-tree {
-  max-height: 360px;
-  height: 100%;
-  overflow-y: auto;
-  flex: 1 1 auto;
-
-  &.rs-check-tree-virtualized {
-    overflow: hidden;
-  }
-
-  .rs-check-tree-node-label {
-    .rs-check-item .rs-checkbox-checker {
-      > label {
-        text-align: left;
-        position: relative;
-        margin: 0;
-        padding: 1px 0 1px 42px;
-      }
-
-      .rs-checkbox-control {
-        left: (@checkbox-sense-width + 10px);
-      }
-
-      .rs-check-tree-node-label-content {
-        padding: 6px 8px;
-        width: auto;
-      }
-    }
-
-    &:focus-visible {
-      .rs-check-tree-node-label-content {
-        .focus-ring();
-      }
-    }
-  }
-}
-
-// Only has the first level
-.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
-  > label {
-    padding-left: 32px; //text gap + checkbox space
-
-    &::before {
-      width: 28px;
-      margin-left: -34px;
-    }
-  }
-
-  .rs-checkbox-control {
-    left: 0;
-  }
-}
-
-.rs-check-tree-node {
-  position: relative;
-  font-size: @picker-tree-node-font-size;
-  line-height: @picker-tree-node-line-height;
-
-  .rs-check-item {
-    display: inline-block;
-
-    &:hover,
-    &:focus,
-    &-focus {
-      background-color: transparent !important;
-
-      .rs-check-tree-node-label-content {
-        background-color: var(--rs-listbox-option-hover-bg);
-        color: var(--rs-listbox-option-hover-text);
-        border-radius: 6px;
-      }
-    }
-
-    .rs-picker-popup & {
-      display: block;
-    }
-  }
-
-  &:focus .rs-check-item .rs-checkbox-checker > label {
-    .picker-item-hover();
-  }
-
-  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
-    .picker-item-active();
-  }
-
-  // Uncheckable state
-  &-all-uncheckable .rs-check-item .rs-checkbox-checker > label {
-    padding-left: 22px; // 10px + 12px
-
-    &::before {
-      width: 14px;
-      margin-left: 0;
-      left: 0;
-    }
-  }
-}
-
-// expand icon
-.rs-check-tree-node-expand-icon-wrapper {
-  display: inline-block;
-  position: absolute;
-  cursor: pointer;
-  z-index: 1;
-
-  > .rs-check-tree-node-expand-icon {
-    display: inline-block;
-    padding: @picker-tree-node-padding-vertical 0;
-    padding-right: @picker-tree-arrow-down-gap;
-    height: 36px;
-    font-size: 16px;
-    line-height: @picker-tree-node-line-height;
-    transform: rotate(-90deg) /* rtl: rotate(90deg) translateX(-13px) translateY(-15px) */;
-    transform-origin: 1.5px 14px;
-    margin-top: 6px;
-    user-select: none;
-
-    // expand children tree
-    .rs-check-tree-open > .rs-check-tree-node & {
-      transform: rotate(0deg);
-      margin-left: 0;
-      margin-top: 0;
-    }
-  }
-
-  > .rs-check-tree-node-expanded {
-    transform: rotate(0deg);
-    margin-left: 0;
-    margin-top: 0;
-  }
-
-  > .rs-check-tree-node-custom-icon,
-  > .rs-check-tree-node-loading-icon {
-    .node-item-prepend-icon();
-  }
-}
-
-// node children
-.rs-check-tree-node-children {
-  > .rs-check-tree-group {
-    position: relative;
-    display: none;
-
-    .rs-check-tree-open& {
-      display: block;
-    }
-  }
-}
-
-.rs-check-tree-indent-line {
-  height: 100%;
-  width: 1px;
-  position: absolute;
-  top: 0;
-  margin-left: -13px;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-}
+// Check Tree Picker
+// ----------------------
 
 .rs-picker-popup {
   display: flex;
@@ -171,24 +10,12 @@
   &.rs-check-tree-menu {
     padding-top: @picker-menu-padding;
   }
-}
-
-.rs-check-tree {
-  padding-right: @picker-menu-padding;
 
-  &-node > .rs-check-tree-node-label .rs-check-tree-node-label-content {
-    .ellipsis();
-
-    display: inline-block;
-    vertical-align: top;
+  .rs-check-item {
+    display: block;
   }
-}
 
-/* rtl:begin:ignore */
-
-[dir='rtl'] .rs-check-tree-node-expand-icon-wrapper {
-  right: 0;
-  padding-right: inherit;
+  .rs-check-tree-view {
+    padding: 2px 4px;
+  }
 }
-
-/* rtl:end:ignore */

package/Checkbox/styles/index.css

@@ -6,6 +6,7 @@
   --rs-gray-300: #d9d9d9;
   --rs-gray-400: #c5c6c7;
   --rs-gray-500: #a6a6a6;
+  --rs-gray-600: #8e8e93;
   --rs-gray-800: #575757;
   --rs-gray-900: #272c36;
   --rs-primary-500: #3498ff;
@@ -16,7 +17,7 @@
   --rs-cyan-500: #00bcd4;
   --rs-blue-500: #2196f3;
   --rs-violet-500: #673ab7;
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-checkbox-icon: #fff;
   --rs-checkbox-border: var(--rs-gray-300);
@@ -36,6 +37,7 @@
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-500: #34c3ff;
@@ -46,7 +48,7 @@
   --rs-cyan-500: #00bcd4;
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-state-focus-shadow: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-checkbox-icon: var(--rs-gray-800);
   --rs-checkbox-border: var(--rs-gray-400);
@@ -65,6 +67,7 @@
   --rs-gray-300: #858b94;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
+  --rs-gray-600: #3c3f43;
   --rs-gray-800: #1a1d24;
   --rs-gray-900: #0f131a;
   --rs-primary-500: #ffff00;
@@ -75,7 +78,7 @@
   --rs-cyan-500: #00bcd4;
   --rs-blue-500: #1499ef;
   --rs-violet-500: #673ab7;
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-state-focus-shadow: 0 0 0 3px var(--rs-gray-900), 0 0 0 5px var(--rs-gray-0);
   --rs-checkbox-icon: var(--rs-gray-800);
   --rs-checkbox-border: var(--rs-gray-100);
@@ -114,7 +117,7 @@
   cursor: not-allowed;
 }
 .rs-checkbox-disabled > .rs-checkbox-checker > label {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 .rs-checkbox-inline {
@@ -273,10 +276,6 @@ label:hover .rs-checkbox-control .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-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 {

package/Checkbox/styles/index.less

@@ -144,11 +144,7 @@
 
     .rs-checkbox-disabled.rs-checkbox-checked &,
     .rs-checkbox-disabled.rs-checkbox-indeterminate & {
-      opacity: 0.3;
-
-      .high-contrast-mode({
-        opacity: 0.5;
-      });
+      opacity: 0.5;
     }
   }
 }

package/DateInput/styles/index.css

@@ -12,7 +12,7 @@
   --rs-primary-500: #3498ff;
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-secondary: var(--rs-gray-600);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-0);
@@ -38,7 +38,7 @@
   --rs-primary-500: #34c3ff;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-800);
@@ -63,7 +63,7 @@
   --rs-primary-500: #ffff00;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-input-bg: var(--rs-gray-800);
@@ -142,7 +142,7 @@ textarea.rs-input {
 .rs-input:disabled {
   background-color: #f7f7fa;
   background-color: var(--rs-input-disabled-bg);
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 textarea.rs-input {

package/DatePicker/styles/index.css

@@ -47,8 +47,9 @@
   --rs-text-secondary: var(--rs-gray-600);
   --rs-text-inverse: var(--rs-gray-50);
   --rs-text-active: var(--rs-primary-700);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-text-error: var(--rs-color-red);
+  --rs-text-highlight-bg: #fff6c9;
   --rs-border-primary: var(--rs-gray-200);
   --rs-border-secondary: var(--rs-gray-100);
   --rs-bg-overlay: var(--rs-gray-0);
@@ -65,7 +66,7 @@
   --rs-btn-default-active-bg: var(--rs-gray-300);
   --rs-btn-default-active-text: var(--rs-gray-900);
   --rs-btn-default-disabled-bg: var(--rs-gray-50);
-  --rs-btn-default-disabled-text: var(--rs-gray-400);
+  --rs-btn-default-disabled-text: var(--rs-gray-600);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-0);
   --rs-btn-primary-hover-bg: var(--rs-primary-600);
@@ -94,6 +95,7 @@
   --rs-input-bg: var(--rs-gray-0);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-50);
+  --rs-listbox-option-group-bg: var(--rs-gray-0);
   --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
   --rs-listbox-option-hover-text: var(--rs-primary-700);
   --rs-close-button-hover-color: var(--rs-color-red);
@@ -168,7 +170,7 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-inverse: var(--rs-gray-800);
   --rs-text-active: var(--rs-primary-500);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-700);
@@ -214,6 +216,7 @@
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
+  --rs-listbox-option-group-bg: var(--rs-gray-700);
   --rs-listbox-option-hover-bg: var(--rs-gray-600);
   --rs-listbox-option-hover-text: currentColor;
   --rs-close-button-hover-color: var(--rs-color-red);
@@ -286,7 +289,8 @@
   --rs-text-secondary: var(--rs-gray-200);
   --rs-text-inverse: var(--rs-gray-800);
   --rs-text-active: var(--rs-primary-500);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-highlight-bg: var(--rs-primary-500);
   --rs-border-primary: var(--rs-gray-100);
   --rs-border-secondary: var(--rs-gray-700);
   --rs-bg-overlay: var(--rs-gray-800);
@@ -305,7 +309,8 @@
   --rs-btn-default-active-bg: transparent;
   --rs-btn-default-active-text: var(--rs-primary-200);
   --rs-btn-default-disabled-bg: transparent;
-  --rs-btn-default-disabled-text: var(--rs-primary-500);
+  --rs-btn-default-disabled-text: var(--rs-primary-900);
+  --rs-btn-default-disabled-boreder-color: var(--rs-gray-100);
   --rs-btn-primary-bg: var(--rs-primary-500);
   --rs-btn-primary-text: var(--rs-gray-900);
   --rs-btn-primary-hover-bg: var(--rs-primary-400);
@@ -334,6 +339,7 @@
   --rs-input-bg: var(--rs-gray-800);
   --rs-input-focus-border: var(--rs-primary-500);
   --rs-input-disabled-bg: var(--rs-gray-700);
+  --rs-listbox-option-group-bg: var(--rs-gray-800);
   --rs-listbox-option-hover-bg: transparent;
   --rs-listbox-option-hover-text: var(--rs-primary-500);
   --rs-close-button-hover-color: var(--rs-color-red);
@@ -428,7 +434,7 @@ textarea.rs-input {
 .rs-input:disabled {
   background-color: #f7f7fa;
   background-color: var(--rs-input-disabled-bg);
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 textarea.rs-input {
@@ -578,14 +584,14 @@ textarea.rs-input-sm {
 .rs-btn:disabled,
 .rs-btn.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-btn:disabled,
 .rs-theme-high-contrast .rs-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-btn {
@@ -633,7 +639,7 @@ textarea.rs-input-sm {
 }
 .rs-theme-high-contrast .rs-btn-primary:disabled,
 .rs-theme-high-contrast .rs-btn-primary.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-subtle {
   color: #575757;
@@ -663,7 +669,7 @@ textarea.rs-input-sm {
 }
 .rs-theme-high-contrast .rs-btn-subtle:disabled,
 .rs-theme-high-contrast .rs-btn-subtle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-link {
   color: #1675e0;
@@ -694,7 +700,7 @@ textarea.rs-input-sm {
 }
 .rs-theme-high-contrast .rs-btn-link:disabled,
 .rs-theme-high-contrast .rs-btn-link.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-ghost {
   color: #1675e0;
@@ -736,7 +742,7 @@ textarea.rs-input-sm {
 }
 .rs-theme-high-contrast .rs-btn-ghost:disabled,
 .rs-theme-high-contrast .rs-btn-ghost.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-btn-red {
   --rs-btn-primary-bg: var(--rs-red-500);
@@ -1499,7 +1505,7 @@ textarea.rs-input-sm {
 }
 .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn:disabled,
 .rs-theme-high-contrast .rs-input-group.rs-input-group-inside .rs-input-group-btn.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-input-group.rs-input-group-inside .rs-input-group-btn > .rs-icon {
   font-size: 14px;
@@ -1546,16 +1552,16 @@ textarea.rs-input-sm {
   left: inherit;
   right: 1px;
 }
-.rs-input-group-disabled {
+.rs-input-group.rs-input-group-disabled {
   background-color: #f7f7fa;
   background-color: var(--rs-input-disabled-bg);
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   cursor: not-allowed;
 }
-.rs-input-group-disabled .rs-input,
-.rs-input-group-disabled .rs-input-group-btn,
-.rs-input-group-disabled .rs-input-group-addon {
+.rs-input-group.rs-input-group-disabled .rs-input,
+.rs-input-group.rs-input-group-disabled .rs-input-group-btn,
+.rs-input-group.rs-input-group-disabled .rs-input-group-addon {
   color: inherit;
 }
 .rs-input-group-lg > .rs-input {
@@ -2201,7 +2207,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 }
 .rs-theme-high-contrast .rs-calendar-header-error:disabled,
 .rs-theme-high-contrast .rs-calendar-header-error.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-theme-dark .rs-calendar-header-error {
   --rs-btn-subtle-hover-bg: var(--rs-red-600);
@@ -2303,7 +2309,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-calendar-table-cell-disabled .rs-calendar-table-header-cell-content:hover,
 .rs-calendar-table-header-cell-disabled .rs-calendar-table-cell-content:hover,
 .rs-calendar-table-header-cell-disabled .rs-calendar-table-header-cell-content:hover {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 .rs-calendar-table-cell-disabled .rs-calendar-table-cell-content,
@@ -2514,7 +2520,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: var(--rs-state-hover-bg);
 }
 .rs-calendar-month-dropdown-cell:not(.rs-calendar-month-dropdown-cell-active).disabled .rs-calendar-month-dropdown-cell-content {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   background: none;
   text-decoration: line-through;
@@ -2644,7 +2650,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   outline-offset: 2px;
 }
 .rs-calendar-time-dropdown-cell.rs-calendar-time-dropdown-cell-disabled {
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
   background: none;
   cursor: not-allowed;
@@ -2974,6 +2980,13 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
             transform: rotate(360deg);
   }
 }
+.rs-highlight-mark {
+  background-color: #fff6c9;
+  background-color: var(--rs-text-highlight-bg);
+  padding: 0 0.2em;
+  font-weight: bolder;
+  border-radius: 4px;
+}
 .rs-picker-toggle-wrapper {
   display: inline-block;
   vertical-align: middle;
@@ -2986,7 +2999,16 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   display: block;
 }
 .rs-picker-disabled {
-  opacity: 0.3;
+  cursor: not-allowed;
+}
+.rs-picker-disabled .rs-picker-toggle-value,
+.rs-picker-disabled .rs-picker-toggle-indicator,
+.rs-picker-disabled .rs-picker-tag-list .rs-tag {
+  color: #8e8e93 !important;
+  color: var(--rs-text-disabled) !important;
+}
+.rs-picker-disabled .rs-picker-value-count {
+  opacity: 0.5;
 }
 .rs-picker-toggle .rs-picker-toggle-placeholder {
   color: #8e8e93;
@@ -3167,14 +3189,14 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-toggle:disabled,
 .rs-picker-toggle.rs-btn-disabled {
   cursor: not-allowed;
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-btn-default-disabled-text);
   background-color: #f7f7fa;
   background-color: var(--rs-btn-default-disabled-bg);
 }
 .rs-theme-high-contrast .rs-picker-toggle:disabled,
 .rs-theme-high-contrast .rs-picker-toggle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 @media not all and (min-resolution: 0.001dpcm) {
   .rs-picker-toggle {
@@ -3257,7 +3279,7 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 }
 .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle:disabled,
 .rs-theme-high-contrast .rs-picker-subtle .rs-picker-toggle.rs-btn-disabled {
-  opacity: 0.5;
+  border-color: var(--rs-btn-default-disabled-boreder-color);
 }
 .rs-picker-subtle .rs-picker-toggle-active {
   background-color: #e5e5ea;
@@ -3742,6 +3764,9 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
 .rs-picker-popup .rs-search-box {
   padding: 6px 12px 6px;
 }
+.rs-picker-popup .rs-highlight .rs-highlight-mark {
+  padding: 0;
+}
 .rs-picker-default .rs-btn,
 .rs-picker-input .rs-btn,
 .rs-picker-default .rs-picker-toggle,
@@ -3756,6 +3781,10 @@ textarea.rs-input-group-inside.rs-input-group-xs > .rs-input-group-btn {
   background-color: #f7f7fa !important;
   background-color: var(--rs-input-disabled-bg) !important;
 }
+.rs-picker-default.rs-picker-disabled .rs-input-group,
+.rs-picker-input.rs-picker-disabled .rs-input-group {
+  pointer-events: none;
+}
 .rs-check-item {
   display: block;
 }
@@ -3823,6 +3852,13 @@ 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 .rs-checkbox-control {
   left: 26px;
 }
+.rs-picker-menu-group {
+  background-color: #fff;
+  background-color: var(--rs-listbox-option-group-bg);
+  position: sticky;
+  top: -1px;
+  z-index: 1;
+}
 .rs-stack {
   display: -webkit-box;
   display: -ms-flexbox;

package/DateRangeInput/styles/index.css

@@ -12,7 +12,7 @@
   --rs-primary-500: #3498ff;
   --rs-text-primary: var(--rs-gray-800);
   --rs-text-secondary: var(--rs-gray-600);
-  --rs-text-disabled: var(--rs-gray-400);
+  --rs-text-disabled: var(--rs-gray-600);
   --rs-border-primary: var(--rs-gray-200);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-0);
@@ -38,7 +38,7 @@
   --rs-primary-500: #34c3ff;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-600);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-input-bg: var(--rs-gray-800);
@@ -63,7 +63,7 @@
   --rs-primary-500: #ffff00;
   --rs-text-primary: var(--rs-gray-50);
   --rs-text-secondary: var(--rs-gray-200);
-  --rs-text-disabled: var(--rs-gray-500);
+  --rs-text-disabled: var(--rs-gray-400);
   --rs-border-primary: var(--rs-gray-100);
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-input-bg: var(--rs-gray-800);
@@ -142,7 +142,7 @@ textarea.rs-input {
 .rs-input:disabled {
   background-color: #f7f7fa;
   background-color: var(--rs-input-disabled-bg);
-  color: #c5c6c7;
+  color: #8e8e93;
   color: var(--rs-text-disabled);
 }
 textarea.rs-input {