@kdcloudjs/kdesign 1.3.9 → 1.5.0

package/es/carousel/carousel.js

@@ -91,7 +91,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
       setCurrentIndex(index);
       setNeedAnimation(needAnimation);
     }
-  }, [isFadeEffect, beforeChange, currentIndex, children.length]);
+  }, [isFadeEffect, beforeChange, currentIndex, children === null || children === void 0 ? void 0 : children.length]);
   var next = React.useCallback(function () {
     jumpTo(currentIndex + 1, true);
   }, [currentIndex, jumpTo]);
@@ -181,7 +181,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     setNeedAnimation(true);
   }, [beforeChange, currentIndex]);
   var handleTransitionEnd = React.useCallback(function () {
-    if (!autoplay) return;
+    if (!autoplay || !(children === null || children === void 0 ? void 0 : children.length)) return;
     var childrenL = children.length;
     var newCurrentIndex = currentIndex;
 
@@ -198,7 +198,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     afterChange && afterChange(currentIndex);
     setCurrentIndex(newCurrentIndex);
     isScrollxEffect && setNeedAnimation(false);
-  }, [currentIndex, children.length, afterChange, isScrollxEffect, autoplay]);
+  }, [currentIndex, children === null || children === void 0 ? void 0 : children.length, afterChange, isScrollxEffect, autoplay]);
   var handleMouseEnter = React.useCallback(function () {
     autoplayRef.current && clearTimeout(autoplayRef.current);
   }, []);
@@ -246,7 +246,7 @@ var InternalCarousel = function InternalCarousel(props, ref) {
     style: style,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, renderDisplayList(), showDot() && /*#__PURE__*/React.createElement(Slidebar, {
+  }, (children === null || children === void 0 ? void 0 : children.length) && renderDisplayList(), (children === null || children === void 0 ? void 0 : children.length) && showDot() && /*#__PURE__*/React.createElement(Slidebar, {
     number: children.length,
     currentIndex: currentIndex,
     dotsClassName: dots,

package/es/config-provider/compDefaultProps.d.ts

@@ -210,7 +210,6 @@ declare const compDefaultProps: {
         strokeWidth: number;
     };
     Radio: {
-        checked: boolean;
         defaultChecked: boolean;
         disabled: boolean;
     };

package/es/config-provider/compDefaultProps.js

@@ -217,7 +217,6 @@ var compDefaultProps = {
     strokeWidth: 4
   },
   Radio: {
-    checked: false,
     defaultChecked: false,
     disabled: false
   },

package/es/date-picker/range-picker.d.ts

@@ -17,6 +17,7 @@ export interface RangePickerSharedProps {
     ranges?: Record<string, DateType[] | (() => DateType[])>;
     separator?: React.ReactNode;
     allowEmpty?: [boolean, boolean];
+    suffixIcon?: React.ReactNode;
     mode?: [PanelMode, PanelMode];
     onChange?: (values: RangeValue, formatString: [string | null, string | null]) => void;
     onCalendarChange?: (values: RangeValue, formatString: [string | null, string | null], info: RangeInfo) => void;

package/es/date-picker/range-picker.js

@@ -104,6 +104,7 @@ function DatePicker(props) {
       minuteStep = _datePickerProps$minu === void 0 ? 1 : _datePickerProps$minu,
       _datePickerProps$seco = datePickerProps.secondStep,
       secondStep = _datePickerProps$seco === void 0 ? 1 : _datePickerProps$seco,
+      suffixIcon = datePickerProps.suffixIcon,
       renderExtraFooter = datePickerProps.renderExtraFooter,
       disabledHours = datePickerProps.disabledHours,
       disabledMinutes = datePickerProps.disabledMinutes,
@@ -675,6 +676,7 @@ function DatePicker(props) {
     startOpen: startOpen,
     endOpen: endOpen,
     needConfirmButton: needConfirmButton,
+    suffixIcon: suffixIcon,
     format: _format,
     open: mergedOpen,
     readOnly: inputReadOnly,

package/es/date-picker/style/index.css

@@ -128,7 +128,7 @@
   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);
@@ -158,7 +158,7 @@
   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;
@@ -276,7 +276,7 @@
   -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;
 }
@@ -286,6 +286,9 @@
 .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%;

package/es/date-picker/style/index.less

@@ -27,7 +27,7 @@
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-small-font-size + 9px);
+      right: calc(@date-small-font-size + 12px);
     }
   }
 
@@ -59,7 +59,7 @@
     }
 
     &.@{datePicker-prefix-cls}-range .@{datePicker-prefix-cls}-clear {
-      right: calc(@date-middle-font-size + 9px);
+      right: calc(@date-middle-font-size + 11px);
     }
   }
 
@@ -131,7 +131,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;
 
@@ -144,6 +144,10 @@
     .@{datePicker-prefix-cls}-clear {
       opacity: 1;
     }
+
+    .@{datePicker-prefix-cls}-suffix {
+      color: @date-color-background-checked;
+    }
   }
 
   &-clear {

package/es/dropdown/style/index.css

@@ -229,6 +229,9 @@
 .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);

package/es/dropdown/style/index.less

@@ -72,6 +72,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,

package/es/dropdown/style/token.less

@@ -8,6 +8,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);
 

package/es/input/style/index.css

@@ -356,6 +356,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;
@@ -404,6 +408,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,

package/es/input/style/index.less

@@ -121,6 +121,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 {

package/es/input/style/mixin.less

@@ -47,7 +47,12 @@
 
 .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;

package/es/menu/menu.d.ts

@@ -15,6 +15,7 @@ export interface MenuProps extends React.HTMLAttributes<HTMLElement> {
     additionalTools?: React.ReactNode;
     onOpenChange?: SubMenuChangeEventHandler;
     theme?: MenuTheme;
+    accordion?: boolean;
 }
 interface MenuType extends React.FC<MenuProps> {
     Item: typeof MenuItem;

package/es/menu/menu.js

@@ -60,10 +60,12 @@ var Menu = function Menu(props) {
       className = _b.className,
       theme = _b.theme,
       collapsed = _b.collapsed,
-      restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed"]);
+      accordion = _b.accordion,
+      restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed", "accordion"]);
 
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu', customPrefixcls);
-  devWarning(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'")); // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
+  devWarning(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
+  devWarning(mode !== 'inline' && accordion !== undefined, 'menu', "'accordion' is valid only in mode='inline'");
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -98,26 +100,18 @@ var Menu = function Menu(props) {
   useEffect(function () {
     if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);
-    }
-  }, [userOpenKeys]);
-  useEffect(function () {
-    if (userSelectedKey !== undefined && userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
-      setSelectedKeyPath(userOpenKeys);
-      setTimeout(function () {
-        userOpenKeys.forEach(function (d) {
-          openSubMenuSet.add(d);
-        });
+      openSubMenuSet.clear();
+      userOpenKeys.forEach(function (d) {
+        openSubMenuSet.add(d);
       });
     }
-  }, []);
+  }, [userOpenKeys]);
 
   var handleOnClick = function handleOnClick(info) {
     if (userSelectedKey === undefined) {
       setSelectedKey(info.key);
     }
 
-    setSelectedKeyPath(info.keyPath);
-
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
       openSubMenuSet.clear();
@@ -145,6 +139,10 @@ var Menu = function Menu(props) {
     if (clean) {
       openSubMenuSet.clear();
     } else {
+      if (mode === 'inline' && accordion) {
+        openSubMenuSet.clear();
+      }
+
       if (isAdd) {
         openSubMenuSet.add(openKey);
       } else {
@@ -173,6 +171,7 @@ var Menu = function Menu(props) {
         openKeys: openKeys,
         selectedKey: selectedKey,
         selectedKeyPath: selectedKeyPath,
+        setSelectedKeyPath: setSelectedKeyPath,
         theme: theme,
         triggerSubMenuAction: restProps.triggerSubMenuAction,
         forceSubMenuRender: forceSubMenuRender,

package/es/menu/menuItem.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/extends";
+import _toConsumableArray from "@babel/runtime-corejs3/helpers/toConsumableArray";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
@@ -24,7 +26,7 @@ import devWarning from '../_utils/devwarning';
 export var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
-  var _classNames;
+  var _context, _classNames;
 
   var _React$useContext = React.useContext(ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
@@ -43,6 +45,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       collapsed = _a.collapsed,
       keyValue = _a.keyValue,
       selectedKey = _a.selectedKey,
+      setSelectedKeyPath = _a.setSelectedKeyPath,
       subMenuMode = _a.subMenuMode,
       inlineIndent = _a.inlineIndent,
       className = _a.className,
@@ -50,11 +53,13 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
       _a$paddingLeft = _a.paddingLeft,
       paddingLeft = _a$paddingLeft === void 0 ? 0 : _a$paddingLeft,
       style = _a.style,
-      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style"]);
+      parentPath = _a.parentPath,
+      restProps = __rest(_a, ["prefixCls", "icon", "mode", "level", "disabled", "children", "collapsed", "keyValue", "selectedKey", "setSelectedKeyPath", "subMenuMode", "inlineIndent", "className", "handleOnClick", "paddingLeft", "style", "parentPath"]);
 
   devWarning(!keyValue && keyValue !== 0, 'menuitem', 'cannot found children in Menu.Item');
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
+  var menuItemParentPath = Array.isArray(parentPath) ? _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(parentPath), [keyValue]) : [keyValue];
 
   var renderItemChildren = function renderItemChildren(children) {
     if (typeof children === 'string') {
@@ -87,7 +92,7 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     e.stopPropagation();
     var info = {
       key: keyValue,
-      keyPath: [keyValue],
+      keyPath: menuItemParentPath,
       domEvent: e.nativeEvent
     };
     handleOnClick(info);
@@ -131,6 +136,11 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
     return renderItemChildren(children);
   };
 
+  React.useEffect(function () {
+    if (selectedKey && selectedKey === keyValue) {
+      setSelectedKeyPath(menuItemParentPath);
+    }
+  }, [selectedKey]);
   return /*#__PURE__*/React.createElement("li", _extends({
     ref: menuItemRef,
     className: classNames(className, (_classNames = {}, _defineProperty(_classNames, prefixCls, subMenuMode !== 'horizontal'), _defineProperty(_classNames, "".concat(prefixCls, "-collapsed"), collapsed && level === 1), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(prefixCls, "-active"), selectedKey === keyValue), _classNames)),

package/es/menu/style/index.css

@@ -104,65 +104,65 @@
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.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 {
@@ -236,8 +236,8 @@
 }
 .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;
@@ -310,8 +310,8 @@
 }
 .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;
@@ -436,7 +436,7 @@
 .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));
 }
@@ -456,13 +456,13 @@
 }
 .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 {
@@ -471,13 +471,13 @@
 }
 .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;
@@ -490,17 +490,17 @@
 }
 .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));
@@ -527,7 +527,7 @@
   -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));
@@ -563,13 +563,13 @@
 }
 .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;
@@ -582,7 +582,7 @@
 }
 .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;
 }