@kdcloudjs/kdesign 1.3.2 → 1.3.3

package/lib/menu/menu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { MenuMode, MenuTheme, TriggerSubMenuAction, SubMenuChangeEventHandler } from './interface';
 import MenuItem from './menuItem';
 import SubMenu from './subMenu';

package/lib/menu/menu.js

@@ -17,17 +17,19 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
 var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
 
-var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
-var React = _interopRequireWildcard(require("react"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactChildren = require("../_utils/react-children");
 
@@ -64,16 +66,21 @@ var isFunction = function isFunction(fn) {
   return fn && typeof fn === 'function';
 };
 
+var openSubMenuSet = new _set.default();
+
 var Menu = function Menu(props) {
   var _context2, _classNames;
 
   var _a;
 
-  var _React$useContext = React.useContext(_configProvider.ConfigContext),
+  var _React$useContext = _react.default.useContext(_configProvider.ConfigContext),
       getPrefixCls = _React$useContext.getPrefixCls,
       pkgPrefixCls = _React$useContext.prefixCls,
       userDefaultProps = _React$useContext.compDefaultProps;
 
+  var userSelectedKey = props.selectedKey,
+      userOpenKeys = props.openKeys;
+
   var _b = (0, _utils.getCompProps)('Menu', userDefaultProps, props),
       customPrefixcls = _b.prefixCls,
       mode = _b.mode,
@@ -89,20 +96,35 @@ 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);
-  (0, _devwarning.default)(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'"));
-  var defaultSelectedKey = ('selectedKey' in restProps ? restProps.selectedKey : restProps.defaultSelectedKey) || '';
-  var defaultOpenKeys = ('openKeys' in restProps ? restProps.openKeys : restProps.defaultOpenKeys) || []; // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
+  (0, _devwarning.default)(['inline', 'vertical', undefined].indexOf(mode) === -1, 'menu', "cannot found menu mode '".concat(mode, "'")); // const [collapsed, setCollapsed] = React.useState<boolean | undefined>(restProps.collapsed)
 
-  var _React$useState = React.useState(defaultSelectedKey),
+  var _React$useState = _react.default.useState(''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       selectedKey = _React$useState2[0],
       setSelectedKey = _React$useState2[1];
 
-  var _React$useState3 = React.useState(defaultOpenKeys),
+  var _React$useState3 = _react.default.useState([]),
       _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
       openKeys = _React$useState4[0],
-      setOpenKeys = _React$useState4[1]; // triggerSubMenuAction内嵌模式固定为click，即该值设置只对垂直模式有效
+      setOpenKeys = _React$useState4[1];
 
+  (0, _react.useEffect)(function () {
+    if (userSelectedKey !== undefined) {
+      setSelectedKey(userSelectedKey);
+    }
+  }, [userSelectedKey]);
+  (0, _react.useEffect)(function () {
+    if (userOpenKeys !== undefined) {
+      setOpenKeys(userOpenKeys);
+    }
+  }, [userOpenKeys]);
+  (0, _react.useEffect)(function () {
+    if (Array.isArray(userOpenKeys)) {
+      userOpenKeys.forEach(function (d) {
+        openSubMenuSet.add(d);
+      });
+    }
+  }, []); // triggerSubMenuAction内嵌模式固定为click，即该值设置只对垂直模式有效
 
   if (mode === 'inline') {
     restProps.triggerSubMenuAction = 'click';
@@ -112,7 +134,9 @@ var Menu = function Menu(props) {
 
 
   var handleOnClick = function handleOnClick(info) {
-    setSelectedKey(info.key);
+    if (userSelectedKey === undefined) {
+      setSelectedKey(info.key);
+    }
 
     if (mode !== 'inline' && openKeys.length > 0) {
       setOpenKeys([]);
@@ -134,37 +158,47 @@ var Menu = function Menu(props) {
   }; // 子菜单展开关闭的回调
 
 
-  var handleOnOpenChange = function handleOnOpenChange(openKey) {
-    var index = openKeys.indexOf(openKey);
+  var handleOnOpenChange = function handleOnOpenChange(openKey, isAdd) {
+    var clean = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
 
-    if (index > -1) {
-      (0, _splice.default)(openKeys).call(openKeys, index, 1);
-      setOpenKeys(openKeys);
+    if (clean) {
+      openSubMenuSet.clear();
     } else {
-      setOpenKeys((0, _concat.default)(openKeys).call(openKeys, openKey));
+      if (isAdd) {
+        openSubMenuSet.add(openKey);
+      } else {
+        openSubMenuSet.delete(openKey);
+      }
+    }
+
+    if (userOpenKeys === undefined) {
+      setOpenKeys((0, _toConsumableArray2.default)(openSubMenuSet));
     }
 
-    onOpenChange && onOpenChange(openKey);
+    onOpenChange && onOpenChange((0, _toConsumableArray2.default)(openSubMenuSet));
   };
 
   var renderMenu = function renderMenu() {
     var _context;
 
-    return /*#__PURE__*/React.createElement("ul", null, (0, _map.default)(_context = (0, _reactChildren.toArray)(children)).call(_context, function (item, i) {
+    return /*#__PURE__*/_react.default.createElement("ul", null, (0, _map.default)(_context = (0, _reactChildren.toArray)(children)).call(_context, function (item, i) {
       if (!item) return;
       var key = (item === null || item === void 0 ? void 0 : item.key) || i;
-      return /*#__PURE__*/React.cloneElement(item, {
+      return /*#__PURE__*/_react.default.cloneElement(item, {
         key: key,
         keyValue: key,
         collapsed: collapsed,
         mode: mode,
         openKeys: openKeys,
         selectedKey: selectedKey,
+        theme: theme,
         triggerSubMenuAction: restProps.triggerSubMenuAction,
         forceSubMenuRender: forceSubMenuRender,
         handleOnOpenChange: handleOnOpenChange,
         handleOnClick: handleOnClick,
-        inlineIndent: inlineIndent
+        inlineIndent: inlineIndent,
+        userOpenKeys: userOpenKeys,
+        userSelectedKey: userSelectedKey
       });
     }));
   };
@@ -177,7 +211,7 @@ var Menu = function Menu(props) {
     onMouseLeave: handleMouseLeaveMenu,
     onMouseEnter: handleMouseEnterMenu
   };
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
     className: (0, _classnames.default)(prefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-inline"), mode === 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-vertical"), mode !== 'inline'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls, "-collapsed"), collapsed), (0, _defineProperty2.default)(_classNames, (0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, theme === 'light' ? 'light' : 'dark'), true), _classNames)),
     role: "menu",
     style: style

package/lib/menu/menuItem.d.ts

@@ -6,5 +6,6 @@ export interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     style?: React.CSSProperties;
 }
+export declare const MENU_ITEM_CONTAINER_NAME = "menu-item-content-container";
 declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<unknown>>;
 export default MenuItem;

package/lib/menu/menuItem.js

@@ -11,7 +11,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.MENU_ITEM_CONTAINER_NAME = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 
@@ -48,13 +48,8 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
-var renderItemChildren = function renderItemChildren(children) {
-  if (typeof children === 'string') {
-    return /*#__PURE__*/React.createElement("span", null, children);
-  }
-
-  return (0, _util.renderReactNodeFunction)(children);
-};
+var MENU_ITEM_CONTAINER_NAME = 'menu-item-content-container';
+exports.MENU_ITEM_CONTAINER_NAME = MENU_ITEM_CONTAINER_NAME;
 
 var InternalMenuItem = function InternalMenuItem(props, ref) {
   var _classNames;
@@ -89,9 +84,20 @@ var InternalMenuItem = function InternalMenuItem(props, ref) {
   var prefixCls = getPrefixCls(pkgPrefixCls, 'menu-item', customPrefixcls);
   var menuItemRef = ref || /*#__PURE__*/React.createRef();
 
+  var renderItemChildren = function renderItemChildren(children) {
+    if (typeof children === 'string') {
+      return /*#__PURE__*/React.createElement("span", {
+        className: MENU_ITEM_CONTAINER_NAME
+      }, children);
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: MENU_ITEM_CONTAINER_NAME
+    }, typeof children === 'function' ? children() : children);
+  };
+
   var preventClick = function preventClick() {
-    if (disabled || mode === 'inline') return true;
-    return false;
+    return !!(disabled || mode === 'inline');
   };
 
   var handleOnMouseEnter = function handleOnMouseEnter(e) {

package/lib/menu/style/index.css

@@ -109,13 +109,37 @@
   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, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  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));
+}
+.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));
 }
 .light-default {
   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;
+}
+.light .kd-menu-submenu-hover,
+.light .kd-menu-submenu-sub {
+  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
+  background: #ffffff;
+}
+.light .kd-menu-submenu-title:hover {
+  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-text-primary, #212121));
+}
+.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));
+}
+.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 {
   position: relative;
   width: 100%;
@@ -138,50 +162,15 @@
 .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-vertical .kd-menu-submenu {
-  padding-right: 0;
-}
-.kd-menu-vertical .kd-menu-submenu-sub {
-  background: var(--kd-c-menu-sub-color-background, #121319);
-}
-.kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item:hover,
-.kd-menu-vertical .kd-menu-submenu-sub .kd-menu-item-active {
-  color: var(--kd-c-menu-sub-color-text-active, var(--kd-g-color-white, #fff));
-}
-.kd-menu-vertical .kd-menu-submenu-sub-second,
-.kd-menu-vertical .kd-menu-submenu-sub-third {
-  -webkit-animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-  opacity: 1;
-  visibility: visible;
-  -webkit-transition: opacity, visibility;
-  transition: opacity, visibility;
-  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-}
-.kd-menu-vertical .kd-menu-submenu-sub-hide {
-  opacity: 0;
-  visibility: hidden;
-  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
-  -webkit-transition: opacity, visibility;
-  transition: opacity, visibility;
-  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
-  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
-}
-.kd-menu-collapsed {
-  width: 50px;
-  min-width: auto;
-}
 .kd-menu-light {
   color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
   background: #ffffff;
@@ -192,32 +181,28 @@
   background: #ffffff;
 }
 .kd-menu-light .kd-menu-submenu-title:hover {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  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 {
-  color: var(--kd-c-menu-light-color-text, var(--kd-g-color-text-primary, #212121));
-  background: #ffffff;
-}
-.kd-menu-light .kd-menu-item-active {
-  background-color: var(--kd-c-menu-light-color-background, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  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, var(--kd-g-color-background-ongoing, #f2f9ff));
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
+  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 {
-  color: var(--kd-c-menu-light-color-text-hover, var(--kd-g-color-ongoing, #276ff5));
-  background: #fff;
+  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, var(--kd-g-color-background-ongoing, #f2f9ff));
+  background-color: var(--kd-c-menu-light-color-background-active, #e3ebff);
   border: none !important;
 }
 .kd-menu-item {
@@ -383,6 +368,7 @@
   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 {
@@ -488,3 +474,103 @@
 .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 {
+  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));
+}
+.kd-menu-popper .kd-menu-submenu:not(.kd-menu-submenu-disabled):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));
+}
+.kd-menu-popper.hidden {
+  opacity: 0;
+  visibility: hidden;
+  display: none;
+  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-menu-popper .kd-menu-submenu {
+  padding-right: 0;
+}
+.kd-menu-popper .kd-menu-submenu-sub {
+  background: var(--kd-c-menu-sub-inline-color-background, #1f212b);
+}
+.kd-menu-popper .kd-menu-submenu-sub .kd-menu-item: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));
+}
+.kd-menu-popper .kd-menu-submenu-sub-second,
+.kd-menu-popper .kd-menu-submenu-sub-third {
+  -webkit-animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftIn calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  opacity: 1;
+  visibility: visible;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-menu-popper .kd-menu-submenu-sub-hide {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+          animation: kdZoomTopLeftOut calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s) cubic-bezier(0, 0.4, 0.4, 1) forwards;
+  -webkit-transition: opacity, visibility;
+  transition: opacity, visibility;
+  -webkit-transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+          transition-duration: calc(var(--kd-c-menu-motion-duration, var(--kd-g-duration, 0.3s)) - 0.1s);
+  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+          transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
+}
+.kd-menu-popper.light {
+  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-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-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 {
+  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-popper.light .kd-menu-item-hover,
+.kd-menu-popper.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-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);
+  color: var(--kd-c-menu-light-color-text-active, var(--kd-g-color-theme, #5582f3));
+  border: none;
+}