@kdcloudjs/kdesign 1.3.7 → 1.4.0

package/es/anchor/anchor.js

@@ -139,7 +139,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
 
   var anchorMenuClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-menu"), true));
   var anchorAdvancedClass = classNames(_defineProperty({}, "".concat(anchorPrefixCls, "-advanced"), true));
-  var inkClass = classNames("".concat(anchorPrefixCls, "-ink-line"), {
+  var inkClass = classNames("".concat(anchorPrefixCls, "-line-slider"), {
     visible: activeLink
   });
   React.useEffect(function () {
@@ -296,7 +296,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
     getScrollContainer().addEventListener('scroll', handleScroll);
     handleScroll();
     return function () {
-      return window.removeEventListener('scroll', handleScroll);
+      return getScrollContainer().removeEventListener('scroll', handleScroll);
     };
   }, [handleScroll, getScrollContainer]);
   useEffect(function () {
@@ -371,7 +371,7 @@ var InternalAnchor = function InternalAnchor(props, ref) {
         width: anchorPosition.width
       } : undefined
     }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(anchorPrefixCls, "-ink")
+      className: "".concat(anchorPrefixCls, "-line")
     }, /*#__PURE__*/React.createElement("span", {
       className: inkClass,
       ref: inkRef

package/es/anchor/style/index.css

@@ -189,7 +189,7 @@
   content: '';
   height: 0;
   width: 40px;
-  border-bottom: var(--kd-c-anchor-ink-line-spacing-width, 1px) dashed var(--kd-c-anchor-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
+  border-bottom: var(--kd-c-anchor-line-slider-spacing-width, 1px) dashed var(--kd-c-anchor-color-border-disabled, var(--kd-g-color-border-disabled, #ccc));
   margin: 4px;
 }
 .kd-anchor-advanced-arrows {
@@ -227,31 +227,31 @@
 .kd-anchor-advanced .kd-anchor {
   max-width: var(--kd-c-anchor-advanced-sizing-width, 160px);
 }
-.kd-anchor-ink {
+.kd-anchor-line {
   position: absolute;
   left: var(--kd-c-anchor-spacing-horizontal, 7px);
   top: 0;
   height: 100%;
 }
-.kd-anchor-ink::before {
+.kd-anchor-line::before {
   position: relative;
   display: block;
-  width: var(--kd-c-anchor-ink-line-spacing-width, 1px);
+  width: var(--kd-c-anchor-line-slider-spacing-width, 1px);
   height: 100%;
   margin: 0 auto;
   background-color: var(--kd-c-anchor-color-border, var(--kd-g-color-border-strong, #d9d9d9));
   content: '';
 }
-.kd-anchor-ink-line {
+.kd-anchor-line-slider {
   position: absolute;
   display: none;
   width: 0;
   height: 16px;
-  border-right: var(--kd-c-anchor-ink-line-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
+  border-right: var(--kd-c-anchor-line-slider-spacing-width, 1px) solid var(--kd-c-anchor-color-theme, var(--kd-g-color-theme, #5582f3));
   -webkit-transition: top 0.3s ease-in-out;
   transition: top 0.3s ease-in-out;
 }
-.kd-anchor-ink-line.visible {
+.kd-anchor-line-slider.visible {
   display: inline-block;
 }
 .kd-anchor-link {

package/es/anchor/style/index.less

@@ -83,7 +83,7 @@
       content: '';
       height: 0;
       width: 40px;
-      border-bottom: @anchor-ink-line-width dashed @anchor-disabled-border-color;
+      border-bottom: @anchor-line-slider-width dashed @anchor-disabled-border-color;
       margin: 4px;
     }
   }
@@ -123,7 +123,7 @@
     }
   }
 
-  &-ink {
+  &-line {
     position: absolute;
     left: @anchor-link-left;
     top: 0;
@@ -131,19 +131,19 @@
     &::before {
       position: relative;
       display: block;
-      width: @anchor-ink-line-width;
+      width: @anchor-line-slider-width;
       height: 100%;
       margin: 0 auto;
       background-color: @anchor-border-color;
       content: '';
     }
 
-    &-line {
+    &-slider {
       position: absolute;
       display: none;
       width: 0;
       height: 16px;
-      border-right: @anchor-ink-line-width solid @anchor-color-theme;
+      border-right: @anchor-line-slider-width solid @anchor-color-theme;
       transition: top 0.3s ease-in-out;
       &.visible {
         display: inline-block;

package/es/anchor/style/token.less

@@ -22,7 +22,7 @@
 @anchor-link-secondary-padding: var(~'@{anchor-prefix}-secondary-spacing-padding', 12px 8px);
 @anchor-advanced-padding-top: var(~'@{anchor-prefix}-advanced-spacing-padding-top', 8px);
 @anchor-advanced-padding-bottom: var(~'@{anchor-prefix}-advanced-spacing-padding-bottom', 7px);
-@anchor-ink-line-width: var(~'@{anchor-prefix}-ink-line-spacing-width', 1px);
+@anchor-line-slider-width: var(~'@{anchor-prefix}-line-slider-spacing-width', 1px);
 
 
 // font

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

@@ -305,6 +305,7 @@ declare const compDefaultProps: {
         draggable: boolean;
         virtual: boolean;
         switcherIcon: () => JSX.Element;
+        estimatedItemSize: number;
     };
     TreeNode: {};
     ToolTip: {

package/es/config-provider/compDefaultProps.js

@@ -319,7 +319,8 @@ var compDefaultProps = {
       return /*#__PURE__*/React.createElement(Icon, {
         type: "arrow-right-solid"
       });
-    }
+    },
+    estimatedItemSize: 32
   },
   TreeNode: {},
   ToolTip: {

package/es/menu/menu.js

@@ -63,7 +63,7 @@ var Menu = function Menu(props) {
       restProps = __rest(_b, ["prefixCls", "mode", "inlineIndent", "forceSubMenuRender", "additionalTools", "onClick", "onOpenChange", "children", "className", "theme", "collapsed"]);
 
   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, "'"));
 
   var _React$useState = React.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -72,8 +72,13 @@ var Menu = function Menu(props) {
 
   var _React$useState3 = React.useState([]),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      openKeys = _React$useState4[0],
-      setOpenKeys = _React$useState4[1];
+      selectedKeyPath = _React$useState4[0],
+      setSelectedKeyPath = _React$useState4[1];
+
+  var _React$useState5 = React.useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      openKeys = _React$useState6[0],
+      setOpenKeys = _React$useState6[1];
 
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
@@ -82,6 +87,7 @@ var Menu = function Menu(props) {
   useEffect(function () {
     setOpenKeys([]);
     setSelectedKey('');
+    setSelectedKeyPath([]);
     openSubMenuSet.clear();
   }, [mode]);
   useEffect(function () {
@@ -92,14 +98,17 @@ var Menu = function Menu(props) {
   useEffect(function () {
     if (userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
       setOpenKeys(userOpenKeys);
-      openSubMenuSet.clear();
-      userOpenKeys.forEach(function (d) {
-        openSubMenuSet.add(d);
+    }
+  }, [userOpenKeys]);
+  useEffect(function () {
+    if (userSelectedKey !== undefined && userOpenKeys !== undefined && Array.isArray(userOpenKeys)) {
+      setTimeout(function () {
+        userOpenKeys.forEach(function (d) {
+          openSubMenuSet.add(d);
+        });
       });
     }
-  }, [userOpenKeys]); // React.useEffect(() => {
-  //   setCollapsed(restProps.collapsed)
-  // }, [restProps.collapsed])
+  }, []);
 
   var handleOnClick = function handleOnClick(info) {
     if (userSelectedKey === undefined) {
@@ -108,6 +117,7 @@ var Menu = function Menu(props) {
 
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
+      openSubMenuSet.clear();
     }
 
     onClick && onClick(info);
@@ -159,6 +169,8 @@ var Menu = function Menu(props) {
         mode: mode,
         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,41 +104,66 @@
 /* 多行显示省略号 */
 /* 单行显示省略号 */
 /** 浮层箭头样式 **/
-.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));
 }
-.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));
+.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));
 }
-.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));
+.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-default {
+.menu-light-base {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.light {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
+.menu-light-base .kd-menu-item-disabled,
+.menu-light-base .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
-.light .kd-menu-submenu-hover,
-.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: #ffffff;
+  background: #fafafa;
 }
-.light .kd-menu-submenu-title: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-submenu:not(.kd-menu-submenu-disabled):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;
+}
+.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 .kd-menu-item:not(.kd-menu-item-disabled):hover {
+.menu-light-default {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.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;
+}
+.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;
+}
+.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 {
   position: relative;
@@ -153,58 +178,13 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.kd-menu-inline .kd-menu-item-active {
-  color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
-}
 .kd-menu-inline .kd-menu-submenu {
   padding-right: 0;
 }
-.kd-menu-inline .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover {
-  color: var(--kd-c-menu-inline-color-active, var(--kd-g-color-white, #fff));
-}
 .kd-menu-collapsed {
   width: 50px;
   min-width: auto;
 }
-.kd-menu-vertical .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
-.kd-menu-vertical .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));
-}
-.kd-menu-light {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-submenu-hover,
-.kd-menu-light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-light .kd-menu-submenu:not(.kd-menu-submenu-disabled):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));
-}
-.kd-menu-light .kd-menu-item:not(.kd-menu-item-disabled):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));
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-submenu-sub {
-  -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-light.kd-menu-vertical .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;
-}
-.kd-menu-light.kd-menu-vertical .kd-menu-item-active {
-  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
-  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
-  border: none !important;
-}
 .kd-menu-item {
   position: relative;
   cursor: pointer;
@@ -231,8 +211,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-.kd-menu-item-title > span {
   opacity: 1;
   -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -259,10 +237,7 @@
 .kd-menu-item-disabled {
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-}
-.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));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-item-arrow {
   margin-left: auto;
@@ -284,10 +259,6 @@
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.kd-menu-item:not(.kd-menu-item-disabled):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));
-}
 .kd-menu-submenu {
   position: static;
   cursor: pointer;
@@ -314,8 +285,6 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-}
-.kd-menu-submenu-title > span {
   opacity: 1;
   -webkit-transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
   transition: opacity calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1);
@@ -342,10 +311,7 @@
 .kd-menu-submenu-disabled {
   cursor: not-allowed;
   color: var(--kd-c-menu-color-disabled, var(--kd-g-color-disabled, #b2b2b2));
-}
-.kd-menu-submenu-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));
+  background-color: var(--kd-c-menu-color-background, #343848);
 }
 .kd-menu-submenu-arrow {
   margin-left: auto;
@@ -367,13 +333,8 @@
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
   transition: transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1), -webkit-transform calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0.4, 0, 0.6, 1);
 }
-.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));
-}
 .kd-menu-submenu-sub {
   line-height: var(--kd-c-menu-item-sizing-height, 50px);
-  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
 }
 .kd-menu-submenu-thrid {
   display: -webkit-box;
@@ -468,18 +429,78 @@
   color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
 }
 .kd-menu-dark .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
   background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
 }
 .kd-menu-dark .kd-menu-submenu-sub-second,
 .kd-menu-dark .kd-menu-submenu-sub-third {
   background: var(--kd-c-menu-sub-color-background, #121319);
 }
-.kd-menu-light .kd-menu-submenu-active,
-.kd-menu-light .kd-menu-item-active {
+.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));
+}
+.kd-menu-dark .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));
+}
+.kd-menu-dark .kd-menu-item-active,
+.kd-menu-dark .kd-menu-submenu-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));
+}
+.kd-menu-dark .kd-menu-item-hover,
+.kd-menu-dark .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));
+}
+.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));
+  background: var(--kd-c-menu-color-background, #343848);
+  border: none;
+}
+.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 {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.kd-menu-light .kd-menu-item-disabled,
+.kd-menu-light .kd-menu-submenu-disabled {
+  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;
+}
+.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;
+}
+.kd-menu-light .kd-menu-item-hover,
+.kd-menu-light .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;
+}
+.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);
   color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
 }
-.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):hover,
+.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));
+  background: #ffffff;
+  border: none;
+}
+.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));
@@ -501,11 +522,15 @@
   padding-right: 0;
 }
 .kd-menu-popper .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-sub-color-text, rgba(255, 255, 255, 0.65));
   background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+  -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 {
-  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
+  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));
 }
 .kd-menu-popper .kd-menu-submenu-sub-second,
 .kd-menu-popper .kd-menu-submenu-sub-third {
@@ -536,28 +561,15 @@
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
 }
-.kd-menu-popper.light .kd-menu-submenu-hover,
-.kd-menu-popper.light .kd-menu-submenu-sub {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-popper.light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
-}
-.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):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));
-}
-.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):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));
+.kd-menu-popper.light .kd-menu-item-disabled,
+.kd-menu-popper.light .kd-menu-submenu-disabled {
+  background-color: #fff;
 }
 .kd-menu-popper.light .kd-menu-submenu-sub {
-  -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);
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #fafafa;
 }
-.kd-menu-popper.light .kd-menu-item:not(.kd-menu-item-disabled):not(.kd-menu-item-active):hover,
-.kd-menu-popper.light .kd-menu-submenu:not(.kd-menu-submenu-disabled):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;