@kdcloudjs/kdesign 1.3.9 → 1.5.0

package/CHANGELOG.md

@@ -1,11 +1,19 @@
-## [1.3.8](https://github.com/kdcloudone/kdesign/compare/v1.3.7...v1.3.8) (2022-07-08)
+## [1.3.9](https://github.com/kdcloudone/kdesign/compare/v1.3.7...v1.3.9) (2022-07-14)
 
 
 ### Bug Fixes
 
 * [anchor] 锚点组件类名调整 ([af0619e](https://github.com/kdcloudone/kdesign/commit/af0619e8b7fb7565ea4f96774433d63684ff331d))
 * [anchor] 锚点组件取消监听事件调整 ([07740e1](https://github.com/kdcloudone/kdesign/commit/07740e1ca7d2d7198392300d641799109e9fcb8a))
+* [docs] 更正cra跳转链接 ([70c1bf3](https://github.com/kdcloudone/kdesign/commit/70c1bf38f441a5e36ec60e30f71d3fb4af4b7b53))
+* [form]onChange及disabled值处理 ([17cf20b](https://github.com/kdcloudone/kdesign/commit/17cf20be64730e0d929aee48fcd624d9e978b743))
+* [menu]菜单切换问题处理 ([3781a69](https://github.com/kdcloudone/kdesign/commit/3781a6967543f795d7a8c3e32d9830a9b4821f9b))
+* [menu]修改高亮样式 ([624cc02](https://github.com/kdcloudone/kdesign/commit/624cc0231ed044c0bc2caafdfb24291b2681132b))
+* [menu]样式修改 ([ee386ea](https://github.com/kdcloudone/kdesign/commit/ee386eaa41cf4e16fc1099e4246b704a6d4f4652))
+* [select] 在启用listHeight属性的时候，拓展内容未固定 ([3684321](https://github.com/kdcloudone/kdesign/commit/36843215765b711ccf8269646f673aab2ebf9c3b))
+* [select] select下拉面板需要z-index设置 ([eb0e46d](https://github.com/kdcloudone/kdesign/commit/eb0e46dffbf6af8a5ff0dd603af4e52d45843e8d))
 * [switch] 解决开关文字垂直没对齐问题 ([df90939](https://github.com/kdcloudone/kdesign/commit/df90939f3d158cd8a1b9524e69741b10939b63df))
+* [tree] 解决api estimatedItemSize设置树节点高度不生效问题 ([fe62d29](https://github.com/kdcloudone/kdesign/commit/fe62d290f7a5c9e3c7f31c8b47d764ae0d485105))
 
 
 

package/dist/kdesign-complete.less

@@ -2706,7 +2706,7 @@
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 9px);
+      right: calc(@date-small-font-size + 12px);
     }
   }
 
@@ -2738,7 +2738,7 @@
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 9px);
+      right: calc(@date-middle-font-size + 11px);
     }
   }
 
@@ -2810,7 +2810,7 @@
   &-suffix {
     align-self: center;
     margin-left: @date-suffix-spacing-margin-left;
-    color: @date-icon-color;
+    color: @date-input-color;
     line-height: 1;
     pointer-events: none;
 
@@ -2823,6 +2823,10 @@
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
+
+    .@{datePicker-prefix-cls}-suffix {
+      color: @date-color-background-checked;
+    }
   }
 
   &-clear {
@@ -3839,6 +3843,10 @@
       transition: background-color @duration-promptly;
       &:not(.disabled):hover {
         background-color: @dropdown-item-hover-bg-color;
+
+        > a {
+          color: @dropdown-item-hover-color-text;
+        }
       }
 
       &:not(.disabled):active,
@@ -3903,6 +3911,7 @@
 @dropdown-item-color-disabled: var(~'@{dropdown-custom-prefix}-item-color-text-disabled', @color-disabled);
 @dropdown-item-color-text-danger: var(~'@{dropdown-custom-prefix}-item-color-text-danger', @color-error);
 @dropdown-item-color-background-danger-hover: var(~'@{dropdown-custom-prefix}-item-color-background-danger-hover', @color-error);
+@dropdown-item-hover-color-text: var(~'@{dropdown-custom-prefix}-item-color-text-hover', @color-text-primary);
 @dropdown-divided-color-bg: var(~'@{dropdown-custom-prefix}-divided-color-background', @color-border-weak);
 @dropdown-color: var(~'@{dropdown-custom-prefix}-menu-item-color-text', @color-text-primary);
 
@@ -5092,6 +5101,10 @@ textarea {
 
 		&-focused {
 			border-color: @input-border-color-focused;
+
+      .@{input-prefix-cls}-clear-icon, .@{input-prefix-cls}-textarea-clear-icon {
+        color: @input-border-color-focused;
+      }
 		}
 	}
 	&-wrapper-textarea {
@@ -5261,7 +5274,12 @@ textarea {
 
 .input-clear-icon() {
   cursor: pointer;
-  color: @input-border-color-focused;
+  color: @input-color-border;
+
+  &:hover {
+    color: @input-border-color-focused;
+  }
+
   i {
     vertical-align: middle;
     font-size: 12px !important;
@@ -5842,55 +5860,55 @@ textarea {
   }
 
   .@{menuitem-prefix-cls} {
-    &:hover {
-      .hover();
+    &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+      .menu-dark-hover();
     }
 
     &-active {
-      .active()
+      .menu-dark-active()
     }
   }
 
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .active()
+    .menu-dark-active()
   }
 
   .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .hover()
+    .menu-dark-hover()
   }
 }
 
 .@{menu-inline-prefix-cls}.@{menu-dark-prefix-cls} {
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .active-inline-title()
+      .menu-dark-active-inline-title()
     }
   }
 
-  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled) {
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active) {
     > .@{submenu-prefix-cls}-title:hover {
-      .active-inline-title()
+      .menu-dark-active-inline-title()
     }
   }
 }
 
 // light
 .@{menu-light-prefix-cls} {
-  .light();
+  .menu-light-base();
 }
 
 .@{menu-inline-prefix-cls}.@{menu-light-prefix-cls} {
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
     .@{submenu-prefix-cls}-title {
-      .light-active-inline-title()
+      .menu-light-active-inline-title()
     }
   }
 }
 
 .@{menu-popper-prefix-cls} {
-  .@{submenu-prefix-cls}:hover,
+  .@{submenu-prefix-cls}:not(.@{submenu-prefix-cls}-disabled):not(.@{submenu-prefix-cls}-active):hover,
   .@{submenu-prefix-cls}-hover {
-    .hover();
+    .menu-dark-hover();
   }
 
   &.hidden {
@@ -5913,9 +5931,9 @@ textarea {
       0 9px 28px 8px rgba(0, 0, 0, 0.05);
 
       .@{menuitem-prefix-cls} {
-        &:hover,
+        &:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover,
         &-active {
-          .hover()
+          .menu-dark-hover()
         }
       }
 
@@ -5941,7 +5959,7 @@ textarea {
   }
 
   &.light {
-    .light();
+    .menu-light-base();
   }
 }
 
@@ -5979,6 +5997,7 @@ textarea {
     align-items: center;
     height: 50px;
     .ellipsis();
+
     & > span {
       .ellipsis();
       opacity: 1;
@@ -6012,8 +6031,8 @@ textarea {
 
   &-disabled {
     cursor: not-allowed;
-    color: @menu-color-disabled !important;
-    background-color: @menu-color-background !important;
+    color: @menu-color-disabled;
+    background-color: @menu-color-background;
   }
 
   &-arrow {
@@ -6033,68 +6052,67 @@ textarea {
 }
 
 
-.hover {
+.menu-dark-hover {
   background-color: @menu-sub-color-background;
   color: @menu-sub-color-hover;
 }
 
-.active {
+.menu-dark-active {
   background-color: @menu-sub-color-background;
   color: @menu-sub-color-hover;
 }
 
-.active-inline-title {
-  color: @menu-sub-color-hover !important;
-  background: @menu-color-background !important;
+.menu-dark-active-inline-title {
+  color: @menu-sub-color-hover;
+  background: @menu-color-background;
   border: none;
 }
 
-
-.light {
-  .light-default();
+.menu-light-base {
+  .menu-light-default();
 
   .@{menuitem-prefix-cls}-disabled, .@{submenu-prefix-cls}-disabled {
-    background-color: #fff !important;
+    background-color: #fff;
   }
 
   .@{submenu-prefix-cls}-sub {
     color: @menu-light-color;
-    background: #FAFAFA;
+    background: #fafafa;
   }
 
-  .@{menuitem-prefix-cls}:hover {
-    .light-hover();
+  .@{menuitem-prefix-cls}:not(.@{menuitem-prefix-cls}-disabled):not(.@{menuitem-prefix-cls}-active):hover {
+    .menu-light-hover();
   }
 
   .@{menuitem-prefix-cls}-hover, .@{submenu-prefix-cls}-hover {
-    .light-hover();
+    .menu-light-hover();
   }
 
   .@{menuitem-prefix-cls}-active, .@{submenu-prefix-cls}-active {
-    .light-active();
+    .menu-light-active();
   }
 }
 
-.light-default {
+.menu-light-default {
   color: @menu-light-color;
   background: #ffffff;
 }
 
-.light-hover {
+.menu-light-hover {
   background-color: @menu-light-color-background-hover;
   color: @menu-light-color-hover;
   border: none;
 }
 
-.light-active {
-  background-color: @menu-light-color-background-active !important;
-  color: @menu-light-color-active !important;
+.menu-light-active {
+  background-color: @menu-light-color-background-active;
+  color: @menu-light-color-active;
   border: none;
 }
 
-.light-active-inline-title {
-  color: @menu-light-color-active !important;
-  background: #ffffff !important;
+.menu-light-active-inline-title {
+  color: @menu-light-color-active;
+  background: #ffffff;
   border: none;
 }
 
@@ -13562,6 +13580,13 @@ template {
   &-title-disabled {
     color: @tree-node-disabled-color;
   }
+  &-title-wrap {
+    flex: 1;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
   &-title {
     white-space: nowrap;
     margin-left: 6px;
@@ -13587,12 +13612,29 @@ template {
     height: 100%;
   }
 
+  &-drag-over {
+    background-color: @tree-node-drag-over-color-background;
+    border: 2px solid @tree-node-drag-over-border-color;
+  }
+
   &-drag-line {
     position: absolute;
     left: 0;
     top: 100%;
     width: 100%;
-    border-top: 1px solid #fc8555;
+    border-top: 2px solid @tree-node-drag-line-border-color;
+
+    &::before {
+      content: '';
+      width: 4px;
+      height: 4px;
+      background-color: #fff;
+      border-radius: 50%;
+      border: 2px solid @tree-node-drag-line-border-color;
+      position: absolute;
+      top: -1px;
+      transform: translateY(-50%);
+    }
   }
   &-leaf-icon {
     height: @tree-node-icon-height;
@@ -13617,6 +13659,9 @@ template {
 @tree-node-checked-text-color: var(~'@{tree-prefix}-node-color-text-checked', @color-theme);
 @tree-node-hover-bg-color: var(~'@{tree-prefix}-node-color-backgroung-hover', @color-hover);
 @tree-node-icon-color-text: var(~'@{tree-prefix}-node-icon-color-text', #666666);
+@tree-node-drag-over-border-color: var(~'@{tree-prefix}-node-drag-over-color-border', #5582f3);
+@tree-node-drag-over-color-background: var(~'@{tree-prefix}-node-drag-over-color-background', #E3EBFF);
+@tree-node-drag-line-border-color: var(~'@{tree-prefix}-node-drag-line-color-background', #276FF5);
 
 // sizing
 @tree-expand-icon-height: var(~'@{tree-prefix}-expand-icon-sizing-height', 22px);

package/dist/kdesign.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   @kdcloudjs/kdesign v1.3.8
+ *   @kdcloudjs/kdesign v1.4.1
  * 
  *   Copyright 2020-present, Kingdee, Inc.
  *   All rights reserved.
@@ -5761,7 +5761,7 @@ template {
   right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 1px);
 }
 .kd-date-picker-small.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 9px);
+  right: calc(var(--kd-c-date-picker-small-font-size, var(--kd-g-font-size-small, 12px)) + 12px);
 }
 .kd-date-picker-large {
   height: var(--kd-c-date-picker-large-sizing-height, 36px);
@@ -5791,7 +5791,7 @@ template {
   right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 1px);
 }
 .kd-date-picker-middle.kd-date-picker-range .kd-date-picker-clear {
-  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 9px);
+  right: calc(var(--kd-c-date-picker-middle-font-size, var(--kd-g-font-size-middle, 14px)) + 11px);
 }
 .kd-date-picker-borderless {
   border: 0;
@@ -5909,7 +5909,7 @@ template {
   -ms-flex-item-align: center;
       align-self: center;
   margin-left: var(--kd-c-date-picker-suffix-spacing-margin-left, 10px);
-  color: var(--kd-c-date-picker-icon-color, var(--kd-g-color-disabled, #b2b2b2));
+  color: var(--kd-c-date-picker-input-color, var(--kd-g-color-text-secondary, #666));
   line-height: 1;
   pointer-events: none;
 }
@@ -5919,6 +5919,9 @@ template {
 .kd-date-picker:hover .kd-date-picker-clear {
   opacity: 1;
 }
+.kd-date-picker:hover .kd-date-picker-suffix {
+  color: var(--kd-c-date-picker-color-background-checked, var(--kd-g-color-theme, #5582f3));
+}
 .kd-date-picker-clear {
   position: absolute;
   top: 50%;
@@ -6989,6 +6992,9 @@ template {
 .kd-dropdown-menu-item:not(.disabled):hover {
   background-color: var(--kd-c-dropdown-item-color-background-hover, var(--kd-g-color-hover, #f5f5f5));
 }
+.kd-dropdown-menu-item:not(.disabled):hover > a {
+  color: var(--kd-c-dropdown-item-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
 .kd-dropdown-menu-item:not(.disabled):active,
 .kd-dropdown-menu-item:not(.disabled).selected {
   color: var(--kd-g-color-theme, #5582f3);
@@ -9251,6 +9257,10 @@ textarea {
 .kd-input-wrapper-focused {
   border-color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
+.kd-input-wrapper-focused .kd-input-clear-icon,
+.kd-input-wrapper-focused .kd-input-textarea-clear-icon {
+  color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
+}
 .kd-input-wrapper-textarea {
   width: 100%;
   min-width: 0;
@@ -9299,6 +9309,10 @@ textarea {
 .kd-input-clear-icon,
 .kd-input-textarea-clear-icon {
   cursor: pointer;
+  color: var(--kd-c-input-color-border, #999);
+}
+.kd-input-clear-icon:hover,
+.kd-input-textarea-clear-icon:hover {
   color: var(--kd-c-input-color-border-focused, var(--kd-g-color-theme, #5582f3));
 }
 .kd-input-clear-icon i,
@@ -9913,65 +9927,65 @@ textarea {
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.hover {
+.menu-dark-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.active {
+.menu-dark-active {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
-.active-inline-title {
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
-  background: var(--kd-c-menu-color-background, #343848) !important;
+.menu-dark-active-inline-title {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
   border: none;
 }
-.light {
+.menu-light-base {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light .kd-menu-item-disabled,
-.light .kd-menu-submenu-disabled {
-  background-color: #fff !important;
+.menu-light-base .kd-menu-item-disabled,
+.menu-light-base .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
-.light .kd-menu-submenu-sub {
+.menu-light-base .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #FAFAFA;
+  background: #fafafa;
 }
-.light .kd-menu-item:hover {
+.menu-light-base .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
-.light .kd-menu-item-hover,
-.light .kd-menu-submenu-hover {
+.menu-light-base .kd-menu-item-hover,
+.menu-light-base .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
-.light .kd-menu-item-active,
-.light .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+.menu-light-base .kd-menu-item-active,
+.menu-light-base .kd-menu-submenu-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
-.light-default {
+.menu-light-default {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light-hover {
+.menu-light-hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
 }
-.light-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+.menu-light-active {
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
-.light-active-inline-title {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
-  background: #ffffff !important;
+.menu-light-active-inline-title {
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
   border: none;
 }
 .kd-menu {
@@ -10045,8 +10059,8 @@ textarea {
 }
 .kd-menu-item-disabled {
   cursor: not-allowed;
-  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  background-color: var(--kd-c-menu-color-background, #343848) !important;
+  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-item-arrow {
   margin-left: auto;
@@ -10119,8 +10133,8 @@ textarea {
 }
 .kd-menu-submenu-disabled {
   cursor: not-allowed;
-  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2)) !important;
-  background-color: var(--kd-c-menu-color-background, #343848) !important;
+  color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-submenu-arrow {
   margin-left: auto;
@@ -10245,7 +10259,7 @@ textarea {
 .kd-menu-dark .kd-menu-submenu-sub-third {
   background: var(--kd-c-menu-sub-color-background, #121319);
 }
-.kd-menu-dark .kd-menu-item:hover {
+.kd-menu-dark .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
 }
@@ -10265,13 +10279,13 @@ textarea {
 }
 .kd-menu-inline.kd-menu-dark .kd-menu-item-active .kd-menu-submenu-title,
 .kd-menu-inline.kd-menu-dark .kd-menu-submenu-active .kd-menu-submenu-title {
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
-  background: var(--kd-c-menu-color-background, #343848) !important;
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
   border: none;
 }
-.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled) > .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff)) !important;
-  background: var(--kd-c-menu-color-background, #343848) !important;
+.kd-menu-inline.kd-menu-dark .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active) > .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
+  background: var(--kd-c-menu-color-background, #343848);
   border: none;
 }
 .kd-menu-light {
@@ -10280,13 +10294,13 @@ textarea {
 }
 .kd-menu-light .kd-menu-item-disabled,
 .kd-menu-light .kd-menu-submenu-disabled {
-  background-color: #fff !important;
+  background-color: #fff;
 }
 .kd-menu-light .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #FAFAFA;
+  background: #fafafa;
 }
-.kd-menu-light .kd-menu-item:hover {
+.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
@@ -10299,17 +10313,17 @@ textarea {
 }
 .kd-menu-light .kd-menu-item-active,
 .kd-menu-light .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
 .kd-menu-inline.kd-menu-light .kd-menu-item-active .kd-menu-submenu-title,
 .kd-menu-inline.kd-menu-light .kd-menu-submenu-active .kd-menu-submenu-title {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
-  background: #ffffff !important;
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  background: #ffffff;
   border: none;
 }
-.kd-menu-popper .kd-menu-submenu:hover,
+.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):not(.kd-menu-submenu-active):hover,
 .kd-menu-popper .kd-menu-submenu-hover {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -10336,7 +10350,7 @@ textarea {
   -webkit-box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
           box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
-.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:hover,
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
 .kd-menu-popper .kd-menu-submenu-sub .kd-menu-item-active {
   background-color: var(--kd-c-menu-sub-color-background, #121319);
   color: var(--kd-c-menu-sub-color-text-hover, var(--kd-g-color-white, #fff));
@@ -10372,13 +10386,13 @@ textarea {
 }
 .kd-menu-popper.light .kd-menu-item-disabled,
 .kd-menu-popper.light .kd-menu-submenu-disabled {
-  background-color: #fff !important;
+  background-color: #fff;
 }
 .kd-menu-popper.light .kd-menu-submenu-sub {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #FAFAFA;
+  background: #fafafa;
 }
-.kd-menu-popper.light .kd-menu-item:hover {
+.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover {
   background-color: var(--kd-c-menu-light-color-background-hover, #f5f5f5);
   color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
   border: none;
@@ -10391,8 +10405,8 @@ textarea {
 }
 .kd-menu-popper.light .kd-menu-item-active,
 .kd-menu-popper.light .kd-menu-submenu-active {
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff) !important;
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3)) !important;
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
   border: none;
 }
 
@@ -18431,6 +18445,19 @@ textarea {
 .kd-tree-node-title-disabled {
   color: var(--kd-c-tree-node-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
 }
+.kd-tree-node-title-wrap {
+  -webkit-box-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  height: 100%;
+}
 .kd-tree-node-title {
   white-space: nowrap;
   margin-left: 6px;
@@ -18458,12 +18485,28 @@ textarea {
   width: 100%;
   height: 100%;
 }
+.kd-tree-node-drag-over {
+  background-color: var(--kd-c-tree-node-drag-over-color-background, #E3EBFF);
+  border: 2px solid var(--kd-c-tree-node-drag-over-color-border, #5582f3);
+}
 .kd-tree-node-drag-line {
   position: absolute;
   left: 0;
   top: 100%;
   width: 100%;
-  border-top: 1px solid #fc8555;
+  border-top: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
+}
+.kd-tree-node-drag-line::before {
+  content: '';
+  width: 4px;
+  height: 4px;
+  background-color: #fff;
+  border-radius: 50%;
+  border: 2px solid var(--kd-c-tree-node-drag-line-color-background, #276FF5);
+  position: absolute;
+  top: -1px;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
 }
 .kd-tree-node-leaf-icon {
   height: var(--kd-c-tree-node-icon-sizing-height, 20px);