rsuite 5.60.2 → 5.61.0

package/TreePicker/styles/index.css

@@ -2,6 +2,7 @@
 .rs-theme-light {
   --rs-gray-0: #fff;
   --rs-gray-50: #f7f7fa;
+  --rs-gray-200: #e5e5ea;
   --rs-gray-400: #c5c6c7;
   --rs-gray-500: #a6a6a6;
   --rs-gray-600: #8e8e93;
@@ -15,6 +16,7 @@
   --rs-primary-900: #004299;
   --rs-text-link: var(--rs-primary-700);
   --rs-text-primary: var(--rs-gray-800);
+  --rs-text-secondary: var(--rs-gray-600);
   --rs-bg-overlay: var(--rs-gray-0);
   --rs-color-focus-ring: rgb(from var(--rs-primary-500) r g b / 25%);
   --rs-listbox-option-hover-bg: rgb(from var(--rs-primary-100) r g b / 50%);
@@ -22,6 +24,7 @@
   --rs-listbox-option-selected-bg: var(--rs-primary-50);
   --rs-listbox-option-disabled-text: var(--rs-gray-400);
   --rs-listbox-option-disabled-selected-text: var(--rs-primary-200);
+  --rs-tree-indent-line-color: rgba(0, 0, 0, 0.1);
 }
 @supports not (color: rgb(from white r g b)) {
   :root,
@@ -33,6 +36,7 @@
 .rs-theme-dark {
   --rs-gray-0: #fff;
   --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
@@ -46,6 +50,7 @@
   --rs-primary-900: #006199;
   --rs-text-link: var(--rs-primary-500);
   --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
   --rs-bg-overlay: var(--rs-gray-700);
   --rs-color-focus-ring: 0 0 0 3px rgb(from var(--rs-gray-500) r g b / 25%);
   --rs-listbox-option-hover-bg: var(--rs-gray-600);
@@ -53,6 +58,7 @@
   --rs-listbox-option-selected-bg: rgb(from var(--rs-primary-900) r g b / 20%);
   --rs-listbox-option-disabled-text: var(--rs-gray-500);
   --rs-listbox-option-disabled-selected-text: var(--rs-primary-200);
+  --rs-tree-indent-line-color: rgba(255, 255, 255, 0.1);
 }
 @supports not (color: rgb(from white r g b)) {
   .rs-theme-dark {
@@ -63,6 +69,7 @@
 .rs-theme-high-contrast {
   --rs-gray-0: #fff;
   --rs-gray-50: #e9ebf0;
+  --rs-gray-200: #a4a9b3;
   --rs-gray-400: #6a6f76;
   --rs-gray-500: #5c6066;
   --rs-gray-600: #3c3f43;
@@ -76,6 +83,7 @@
   --rs-primary-900: #8f9900;
   --rs-text-link: var(--rs-primary-500);
   --rs-text-primary: var(--rs-gray-50);
+  --rs-text-secondary: var(--rs-gray-200);
   --rs-bg-overlay: var(--rs-gray-800);
   --rs-color-focus-ring: var(--rs-gray-0);
   --rs-listbox-option-hover-bg: transparent;
@@ -83,6 +91,7 @@
   --rs-listbox-option-selected-bg: transparent;
   --rs-listbox-option-disabled-text: var(--rs-gray-500);
   --rs-listbox-option-disabled-selected-text: var(--rs-primary-200);
+  --rs-tree-indent-line-color: rgba(255, 255, 255, 0.1);
 }
 /* stylelint-disable */
 *[class*='rs-'] {
@@ -113,17 +122,64 @@
 .rs-picker-subtle.rs-picker-disabled .picker-subtle-toggle:active::after {
   display: none;
 }
+.rs-tree-node-toggle {
+  cursor: pointer;
+  width: 24px;
+  padding: 4px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+}
+.rs-tree-node-toggle > .rs-tree-node-toggle-icon {
+  display: inline-block;
+  height: 16px;
+  width: 16px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.rs-tree-node-toggle > .rs-tree-node-custom-icon,
+.rs-tree-node-toggle > .rs-tree-node-loading-icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  font-size: 14px;
+}
+.rs-tree-node-toggle-placeholder {
+  width: 24px;
+  height: 24px;
+}
+/* rtl:begin:ignore */
+[dir='rtl'] .rs-tree-node-toggle {
+  right: 0;
+  padding-right: inherit;
+}
+/* rtl:end:ignore */
+.rs-tree-indent-line {
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-left: 1px solid var(--rs-tree-indent-line-color);
+  position: absolute;
+  width: 1px;
+  top: -10px;
+  left: 12px;
+  bottom: -4px;
+}
 .rs-tree {
-  max-height: 360px;
   height: 100%;
-  overflow-y: auto;
   -webkit-box-flex: 1;
       -ms-flex: 1 1 auto;
           flex: 1 1 auto;
 }
-.rs-tree.rs-tree-virtualized {
-  overflow: hidden;
-}
 .rs-tree-drag-preview {
   position: absolute;
   top: 0;
@@ -139,44 +195,66 @@
           box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
   z-index: -1;
 }
+.rs-tree .rs-search-box {
+  padding: 6px;
+}
+.rs-tree .rs-tree-empty {
+  padding: 6px 12px;
+  color: #8e8e93;
+  color: var(--rs-text-secondary);
+}
+.rs-tree-view {
+  max-height: 360px;
+  overflow-y: auto;
+}
+.rs-tree.rs-tree-virtualized .rs-tree-view {
+  overflow: hidden;
+}
+.rs-tree .rs-highlight-mark {
+  padding: 0;
+}
+.rs-tree-group {
+  padding-left: 18px;
+}
 .rs-tree-node {
   position: relative;
   font-size: 0;
   text-align: left;
   margin: 0 0 4px 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 }
-.rs-tree-node-label {
-  position: relative;
-  margin: 0;
-  padding: 1px 1px 1px 16px;
-  display: inline-block;
-  cursor: pointer;
-  font-size: 14px;
-  line-height: 22px;
-}
-.rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+.rs-tree-node:focus-visible .rs-tree-node-label {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
 }
-.rs-theme-high-contrast .rs-tree-node-label:focus-visible .rs-tree-node-label-content {
+.rs-theme-high-contrast .rs-tree-node:focus-visible .rs-tree-node-label {
   outline-offset: 2px;
 }
-.rs-tree-node-label-content {
-  padding: 6px 8px;
-  display: inline-block;
+.rs-tree-node-label {
+  position: relative;
+  margin: 1px;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 22px;
+  padding: 6px;
   border-radius: 6px;
 }
-.rs-tree-node-label-content:hover,
-.rs-tree-node-label-content:focus,
-.rs-tree-node-label-content.rs-tree-node-label-content-focus {
+.rs-tree-node-label:hover,
+.rs-tree-node-label:focus,
+.rs-tree-node-label.rs-tree-node-label-focus {
   background-color: rgb(from #cce9ff r g b / 50%);
   background-color: var(--rs-listbox-option-hover-bg);
   color: #1675e0;
   color: var(--rs-listbox-option-hover-text);
 }
-.rs-theme-high-contrast .rs-tree-node-label-content:hover,
-.rs-theme-high-contrast .rs-tree-node-label-content:focus,
-.rs-theme-high-contrast .rs-tree-node-label-content.rs-tree-node-label-content-focus {
+.rs-theme-high-contrast .rs-tree-node-label:hover,
+.rs-theme-high-contrast .rs-tree-node-label:focus,
+.rs-theme-high-contrast .rs-tree-node-label.rs-tree-node-label-focus {
   outline: 3px solid rgb(from #3498ff r g b / 25%);
   outline: 3px solid var(--rs-color-focus-ring);
   outline-offset: -3px;
@@ -185,12 +263,24 @@
   color: var(--rs-listbox-option-hover-text);
   text-decoration: underline;
 }
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-tree-node-label-content:hover,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-tree-node-label-content:focus,
-.rs-theme-high-contrast .rs-theme-high-contrast .rs-tree-node-label-content.rs-tree-node-label-content-focus {
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-tree-node-label:hover,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-tree-node-label:focus,
+.rs-theme-high-contrast .rs-theme-high-contrast .rs-tree-node-label.rs-tree-node-label-focus {
   outline-offset: 2px;
 }
-.rs-tree-node-active .rs-tree-node-label-content {
+.rs-tree-node-label::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  left: -8px;
+  border-left: 6px solid #1675e0;
+  border-left: 6px solid var(--rs-text-link);
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  display: none;
+}
+.rs-tree-node-active .rs-tree-node-label {
   font-weight: bold;
   color: #1675e0;
   color: var(--rs-text-link);
@@ -205,152 +295,70 @@
   outline: 1px dashed #3498ff;
   outline: 1px dashed var(--rs-primary-500);
 }
-.rs-tree-node-drag-over-top.rs-tree-node-label-content {
+.rs-tree-node-drag-over-top.rs-tree-node-label {
   border-top: 2px solid #1675e0 !important;
   border-top: 2px solid var(--rs-text-link) !important;
+  border-radius: 0;
 }
-.rs-tree-node-drag-over-top.rs-tree-node-label-content::after {
-  content: '';
-  position: absolute;
-  top: -2px;
-  left: 12px;
-  width: 0;
-  height: 0;
-  border-left: 6px solid #1675e0;
-  border-left: 6px solid var(--rs-text-link);
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
+.rs-tree-node-drag-over-top.rs-tree-node-label::after {
+  display: block;
+  top: -4px;
 }
-.rs-tree-node-drag-over-bottom.rs-tree-node-label-content {
+.rs-tree-node-drag-over-bottom.rs-tree-node-label {
   border-bottom: 2px solid #1675e0 !important;
   border-bottom: 2px solid var(--rs-text-link) !important;
+  border-radius: 0;
 }
-.rs-tree-node-drag-over-bottom.rs-tree-node-label-content::after {
-  content: '';
-  position: absolute;
-  bottom: -2px;
-  left: 12px;
-  width: 0;
-  height: 0;
-  border-left: 6px solid #1675e0;
-  border-left: 6px solid var(--rs-text-link);
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
+.rs-tree-node-drag-over-bottom.rs-tree-node-label::after {
+  display: block;
+  bottom: -4px;
 }
-.rs-tree-node-drag-disabled.rs-tree-node-label-content {
+.rs-tree-node-drag-disabled.rs-tree-node-label {
   cursor: not-allowed;
 }
-.rs-tree-node-disabled {
+.rs-tree-node-disabled .rs-tree-node-label {
+  background: none;
   color: #c5c6c7;
   color: var(--rs-listbox-option-disabled-text);
   cursor: not-allowed;
 }
-.rs-tree-node-disabled > .rs-tree-node-label > .rs-tree-node-label-content {
+.rs-tree-node-disabled > .rs-tree-node-label {
   cursor: not-allowed;
   color: #c5c6c7;
   color: var(--rs-listbox-option-disabled-text);
 }
-.rs-tree-node-disabled > .rs-tree-node-label > .rs-tree-node-label-content,
-.rs-tree-node-disabled > .rs-tree-node-label > .rs-tree-node-label-content:hover {
+.rs-tree-node-disabled > .rs-tree-node-label,
+.rs-tree-node-disabled > .rs-tree-node-label:hover {
   background-color: transparent;
 }
-.rs-tree-node-disabled.rs-tree-node-active > .rs-tree-node-label > .rs-tree-node-label-content,
-.rs-tree-node-disabled.rs-tree-node-active > .rs-tree-node-label > .rs-tree-node-label-content:hover {
+.rs-tree-node-disabled.rs-tree-node-active > .rs-tree-node-label,
+.rs-tree-node-disabled.rs-tree-node-active > .rs-tree-node-label:hover {
   color: #a6d7ff;
   color: var(--rs-listbox-option-disabled-selected-text);
 }
-.rs-tree-node:not(.rs-tree-node-disabled):focus > .rs-tree-node-label > .rs-tree-node-label-content {
+.rs-tree-node:not(.rs-tree-node-disabled):focus > .rs-tree-node-label {
   background-color: #f2faff;
   background-color: var(--rs-listbox-option-selected-bg);
 }
-.rs-tree-node:not(.rs-tree-node-disabled) > .rs-tree-node-label:focus > .rs-tree-node-label-content {
+.rs-tree-node:not(.rs-tree-node-disabled) > .rs-tree-node-label:focus {
   background-color: #f2faff;
   background-color: var(--rs-listbox-option-selected-bg);
 }
-.rs-tree-node-expand-icon-wrapper {
-  display: inline-block;
-  position: absolute;
-  cursor: pointer;
-  z-index: 1;
-}
-.rs-tree-node-expand-icon-wrapper > .rs-tree-node-expand-icon {
-  display: inline-block;
-  padding: 8px 0;
-  padding-right: 8px;
-  height: 36px;
-  font-size: 16px;
-  line-height: 22px;
-  -webkit-transform: rotate(-90deg) /* rtl: rotate(90deg) translateX(-13px) translateY(-15px) */;
-          transform: rotate(-90deg) /* rtl: rotate(90deg) translateX(-13px) translateY(-15px) */;
-  -webkit-transform-origin: 1.5px 14px;
-          transform-origin: 1.5px 14px;
-  margin-top: 6px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-.rs-tree-open > .rs-tree-node .rs-tree-node-expand-icon-wrapper > .rs-tree-node-expand-icon {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  margin-left: 0;
-  margin-top: 0;
-}
-.rs-tree-node-expand-icon-wrapper > .rs-tree-node-expanded {
-  -webkit-transform: rotate(0deg);
-          transform: rotate(0deg);
-  margin-left: 0;
-  margin-top: 0;
-}
-.rs-tree-node-expand-icon-wrapper > .rs-tree-node-custom-icon,
-.rs-tree-node-expand-icon-wrapper > .rs-tree-node-loading-icon {
-  width: 14px;
-  height: 36px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  font-size: 14px;
-}
 .rs-tree-node-children > .rs-tree-group {
   position: relative;
   display: none;
 }
-.rs-tree-open.rs-tree-node-children > .rs-tree-group {
+.rs-tree-node-expanded.rs-tree-node-children > .rs-tree-group {
   display: block;
 }
-.rs-tree-indent-line {
-  height: 100%;
-  width: 1px;
-  position: absolute;
-  top: 0;
-  margin-left: -13px;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-}
-.rs-picker-popup .rs-tree {
-  padding-right: 12px;
-}
 .rs-picker-popup .rs-tree.rs-tree-virtualized {
   padding: 0;
 }
 .rs-picker-popup .rs-tree-node {
   margin: 0;
 }
-.rs-picker-popup .rs-tree-node > .rs-tree-node-label > .rs-tree-node-label-content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  display: block;
-  line-height: 20px;
-}
-/* rtl:begin:ignore */
-[dir='rtl'] .rs-tree-node-expand-icon-wrapper {
-  right: 0;
-  padding-right: inherit;
+.rs-picker-popup .rs-tree-view {
+  padding: 2px 4px;
 }
-/* rtl:end:ignore */
 
 /*# sourceMappingURL=index.css.map */

package/TreePicker/styles/index.less

@@ -1,246 +1,16 @@
-@import '../../styles/common';
-@import '../../styles/mixins/listbox';
-@import '../../internals/Picker/styles/mixin';
-@import 'mixin';
-
-@custom-picker-tree-node-padding-vertical: @picker-tree-node-padding-vertical - 2px;
-// Tree Picker
-// ----------------------
-
-.rs-tree {
-  max-height: 360px;
-  height: 100%;
-  overflow-y: auto;
-  flex: 1 1 auto;
-
-  &.rs-tree-virtualized {
-    overflow: hidden;
-  }
-
-  &-drag-preview {
-    position: absolute;
-    top: 0;
-    color: var(--rs-text-primary);
-    background-color: var(--rs-bg-overlay);
-    display: inline-block;
-    margin: 0;
-    padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-    border-radius: 6px;
-    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
-    z-index: -1;
-  }
-}
-
-.rs-tree-node {
-  position: relative;
-  // Clear host whitespace
-  font-size: 0;
-  text-align: left;
-  margin: 0 0 4px 0;
-
-  &-label {
-    position: relative;
-    margin: 0;
-    //text gap
-    padding: 1px 1px 1px (@picker-tree-arrow-down-width + 8px);
-    display: inline-block;
-    cursor: pointer;
-    font-size: @picker-tree-node-font-size;
-    line-height: @picker-tree-node-line-height;
-
-    &:focus-visible {
-      .rs-tree-node-label-content {
-        .focus-ring();
-      }
-    }
-
-    &-content {
-      padding: 6px 8px;
-      display: inline-block;
-      border-radius: 6px;
-
-      &:hover,
-      &:focus,
-      &&-focus {
-        .listbox-option-active();
-      }
-    }
-  }
-
-  &-active &-label-content {
-    .picker-item-active();
-
-    color: var(--rs-text-link);
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-
-  &-drag-over {
-    background-color: var(--rs-listbox-option-hover-bg);
-  }
-
-  &-dragging {
-    outline: 1px dashed var(--rs-primary-500);
-  }
-
-  &-drag-over-top {
-    &.rs-tree-node-label-content {
-      border-top: 2px solid var(--rs-text-link) !important;
-
-      &::after {
-        content: '';
-        position: absolute;
-        top: -2px;
-        left: 12px;
-        width: 0;
-        height: 0;
-        border-left: 6px solid var(--rs-text-link);
-        border-top: 3px solid transparent;
-        border-bottom: 3px solid transparent;
-      }
-    }
-  }
-
-  &-drag-over-bottom {
-    &.rs-tree-node-label-content {
-      border-bottom: 2px solid var(--rs-text-link) !important;
-
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -2px;
-        left: 12px;
-        width: 0;
-        height: 0;
-        border-left: 6px solid var(--rs-text-link);
-        border-top: 3px solid transparent;
-        border-bottom: 3px solid transparent;
-      }
-    }
-  }
-
-  &-drag-disabled {
-    &.rs-tree-node-label-content {
-      cursor: not-allowed;
-    }
-  }
-
-  &-disabled {
-    color: var(--rs-listbox-option-disabled-text);
-    cursor: @cursor-disabled;
-
-    > .rs-tree-node-label > .rs-tree-node-label-content {
-      cursor: @cursor-disabled;
-      color: var(--rs-listbox-option-disabled-text);
-
-      &,
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-
-  &-disabled&-active > .rs-tree-node-label > .rs-tree-node-label-content {
-    &,
-    &:hover {
-      color: var(--rs-listbox-option-disabled-selected-text);
-    }
-  }
-
-  &:not(&-disabled):focus > .rs-tree-node-label > .rs-tree-node-label-content {
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-
-  &:not(&-disabled) > .rs-tree-node-label:focus > .rs-tree-node-label-content {
-    background-color: var(--rs-listbox-option-selected-bg);
-  }
-}
-
-// expand icon
-.rs-tree-node-expand-icon-wrapper {
-  display: inline-block;
-  position: absolute;
-  cursor: pointer;
-  z-index: 1;
-
-  > .rs-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-tree-open > .rs-tree-node & {
-      transform: rotate(0deg);
-      margin-left: 0;
-      margin-top: 0;
-    }
-  }
-
-  > .rs-tree-node-expanded {
-    transform: rotate(0deg);
-    margin-left: 0;
-    margin-top: 0;
-  }
-
-  > .rs-tree-node-custom-icon,
-  > .rs-tree-node-loading-icon {
-    .node-item-prepend-icon();
-  }
-}
-
-// node children
-.rs-tree-node-children {
-  > .rs-tree-group {
-    position: relative;
-    display: none;
-
-    .rs-tree-open& {
-      display: block;
-    }
-  }
-}
-
-.rs-tree-indent-line {
-  height: 100%;
-  width: 1px;
-  position: absolute;
-  top: 0;
-  margin-left: -13px;
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-}
+@import '../../Tree/styles/index.less';
 
 .rs-picker-popup {
   .rs-tree {
-    padding-right: @picker-menu-padding;
-
     &.rs-tree-virtualized {
       padding: 0;
     }
 
     &-node {
       margin: 0;
-
-      > .rs-tree-node-label > .rs-tree-node-label-content {
-        .ellipsis();
-
-        display: block;
-        line-height: @line-height-computed;
-      }
     }
   }
+  .rs-tree-view {
+    padding: 2px 4px;
+  }
 }
-
-/* rtl:begin:ignore */
-
-[dir='rtl'] .rs-tree-node-expand-icon-wrapper {
-  right: 0;
-  padding-right: inherit;
-}
-
-/* rtl:end:ignore */