@fle-ui/next 2.0.0-alpha.9 → 3.0.0-alpha.1

package/es/menu/style/index.js

@@ -1,5 +1,335 @@
-import "../../style/default.less";
-import "./index.less"; // style dependencies
-// deps-lint-skip: layout
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { TinyColor } from '@ctrl/tinycolor';
+import { genCollapseMotion, initSlideMotion, initZoomMotion } from "../../style/motion";
+import { genComponentStyleHook, mergeToken } from "../../theme/internal";
+import getHorizontalStyle from "./horizontal";
+import getRTLStyle from "./rtl";
+import getThemeStyle from "./theme";
+import getVerticalStyle from "./vertical";
+import { clearFix, resetComponent, resetIcon } from "../../style";
 
-import "../../tooltip/style";
+var genMenuItemStyle = function genMenuItemStyle(token) {
+  var _ref2, _ref4;
+
+  var componentCls = token.componentCls,
+      fontSize = token.fontSize,
+      motionDurationSlow = token.motionDurationSlow,
+      motionDurationMid = token.motionDurationMid,
+      motionEaseInOut = token.motionEaseInOut,
+      motionEaseOut = token.motionEaseOut,
+      iconCls = token.iconCls,
+      controlHeightSM = token.controlHeightSM;
+  return _ref4 = {}, _defineProperty(_ref4, componentCls + "-item, " + componentCls + "-submenu-title", (_ref2 = {
+    position: 'relative',
+    display: 'block',
+    margin: 0,
+    whiteSpace: 'nowrap',
+    cursor: 'pointer',
+    transition: ["border-color " + motionDurationSlow, "background " + motionDurationSlow, "padding " + motionDurationSlow + " " + motionEaseInOut].join(',')
+  }, _defineProperty(_ref2, componentCls + "-item-icon, " + iconCls, {
+    minWidth: fontSize,
+    fontSize: fontSize,
+    transition: ["font-size " + motionDurationMid + " " + motionEaseOut, "margin " + motionDurationSlow + " " + motionEaseInOut, "color " + motionDurationSlow].join(','),
+    '+ span': {
+      marginInlineStart: controlHeightSM - fontSize,
+      opacity: 1,
+      transition: ["opacity " + motionDurationSlow + " " + motionEaseInOut, "margin " + motionDurationSlow, "color " + motionDurationSlow].join(',')
+    }
+  }), _defineProperty(_ref2, componentCls + "-item-icon", _extends({}, resetIcon())), _defineProperty(_ref2, "&" + componentCls + "-item-only-child", _defineProperty({}, "> " + iconCls + ", > " + componentCls + "-item-icon", {
+    marginInlineEnd: 0
+  })), _ref2)), _defineProperty(_ref4, componentCls + "-item-disabled, " + componentCls + "-submenu-disabled", _defineProperty({
+    background: 'none !important',
+    cursor: 'not-allowed',
+    '&::after': {
+      borderColor: 'transparent !important'
+    },
+    a: {
+      color: 'inherit !important'
+    }
+  }, "> " + componentCls + "-submenu-title", {
+    color: 'inherit !important',
+    cursor: 'not-allowed'
+  })), _ref4;
+};
+
+var genSubMenuArrowStyle = function genSubMenuArrowStyle(token) {
+  var _ref5;
+
+  var componentCls = token.componentCls,
+      motionDurationSlow = token.motionDurationSlow,
+      motionEaseInOut = token.motionEaseInOut,
+      borderRadius = token.borderRadius,
+      menuArrowSize = token.menuArrowSize,
+      menuArrowOffset = token.menuArrowOffset;
+  return _defineProperty({}, componentCls + "-submenu", (_ref5 = {}, _defineProperty(_ref5, "&-expand-icon, &-arrow", {
+    position: 'absolute',
+    top: '50%',
+    insetInlineEnd: token.margin,
+    width: menuArrowSize,
+    color: 'currentcolor',
+    transform: 'translateY(-50%)',
+    transition: "transform " + motionDurationSlow + " " + motionEaseInOut
+  }), _defineProperty(_ref5, '&-arrow', {
+    // →
+    '&::before, &::after': {
+      position: 'absolute',
+      width: menuArrowSize * 0.6,
+      height: menuArrowSize * 0.15,
+      backgroundColor: 'currentcolor',
+      borderRadius: borderRadius,
+      transition: ["background " + motionDurationSlow + " " + motionEaseInOut, "transform " + motionDurationSlow + " " + motionEaseInOut, "top " + motionDurationSlow + " " + motionEaseInOut, "color " + motionDurationSlow + " " + motionEaseInOut].join(','),
+      content: '""'
+    },
+    '&::before': {
+      transform: "rotate(45deg) translateY(-" + menuArrowOffset + ")"
+    },
+    '&::after': {
+      transform: "rotate(-45deg) translateY(" + menuArrowOffset + ")"
+    }
+  }), _ref5));
+}; // =============================== Base ===============================
+
+
+var getBaseStyle = function getBaseStyle(token) {
+  var _extends3, _extends4, _extends5, _extends6;
+
+  var antCls = token.antCls,
+      componentCls = token.componentCls,
+      fontSize = token.fontSize,
+      motionDurationSlow = token.motionDurationSlow,
+      motionDurationMid = token.motionDurationMid,
+      motionEaseInOut = token.motionEaseInOut,
+      lineHeight = token.lineHeight,
+      paddingXS = token.paddingXS,
+      padding = token.padding,
+      colorSplit = token.colorSplit,
+      lineWidth = token.lineWidth,
+      zIndexPopup = token.zIndexPopup,
+      borderRadiusLG = token.borderRadiusLG,
+      radiusSubMenuItem = token.radiusSubMenuItem,
+      menuArrowSize = token.menuArrowSize,
+      menuArrowOffset = token.menuArrowOffset,
+      lineType = token.lineType,
+      menuPanelMaskInset = token.menuPanelMaskInset;
+  return [// Misc
+  _defineProperty({
+    '': _defineProperty({}, "" + componentCls, _extends(_extends({}, clearFix()), _defineProperty({}, "&-hidden", {
+      display: 'none'
+    })))
+  }, componentCls + "-submenu-hidden", {
+    display: 'none'
+  }), _defineProperty({}, componentCls, _extends(_extends(_extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), clearFix()), (_extends3 = {
+    marginBottom: 0,
+    paddingInlineStart: 0,
+    // Override default ul/ol
+    fontSize: fontSize,
+    lineHeight: 0,
+    listStyle: 'none',
+    outline: 'none',
+    transition: ["background " + motionDurationSlow, // Magic cubic here but smooth transition
+    "width " + motionDurationSlow + " cubic-bezier(0.2, 0, 0, 1) 0s"].join(',')
+  }, _defineProperty(_extends3, "ul, ol", {
+    margin: 0,
+    padding: 0,
+    listStyle: 'none'
+  }), _defineProperty(_extends3, "&-overflow", _defineProperty({
+    display: 'flex'
+  }, componentCls + "-item", {
+    flex: 'none'
+  })), _defineProperty(_extends3, componentCls + "-item, " + componentCls + "-submenu, " + componentCls + "-submenu-title", {
+    borderRadius: token.radiusItem
+  }), _defineProperty(_extends3, componentCls + "-item-group-title", {
+    padding: paddingXS + "px " + padding + "px",
+    fontSize: fontSize,
+    lineHeight: lineHeight,
+    transition: "all " + motionDurationSlow
+  }), _defineProperty(_extends3, "&-horizontal " + componentCls + "-submenu", {
+    transition: ["border-color " + motionDurationSlow + " " + motionEaseInOut, "background " + motionDurationSlow + " " + motionEaseInOut].join(',')
+  }), _defineProperty(_extends3, componentCls + "-submenu, " + componentCls + "-submenu-inline", {
+    transition: ["border-color " + motionDurationSlow + " " + motionEaseInOut, "background " + motionDurationSlow + " " + motionEaseInOut, "padding " + motionDurationMid + " " + motionEaseInOut].join(',')
+  }), _defineProperty(_extends3, componentCls + "-submenu " + componentCls + "-sub", {
+    cursor: 'initial',
+    transition: ["background " + motionDurationSlow + " " + motionEaseInOut, "padding " + motionDurationSlow + " " + motionEaseInOut]
+  }), _defineProperty(_extends3, componentCls + "-title-content", {
+    transition: "color " + motionDurationSlow
+  }), _defineProperty(_extends3, componentCls + "-item a", {
+    '&::before': {
+      position: 'absolute',
+      inset: 0,
+      backgroundColor: 'transparent',
+      content: '""'
+    }
+  }), _defineProperty(_extends3, componentCls + "-item-divider", {
+    overflow: 'hidden',
+    lineHeight: 0,
+    borderColor: colorSplit,
+    borderStyle: lineType,
+    borderTopWidth: lineWidth,
+    marginBlock: lineWidth,
+    padding: 0,
+    '&-dashed': {
+      borderStyle: 'dashed'
+    }
+  }), _extends3)), genMenuItemStyle(token)), (_extends5 = {}, _defineProperty(_extends5, componentCls + "-item-group", _defineProperty({}, componentCls + "-item-group-list", _defineProperty({
+    margin: 0,
+    padding: 0
+  }, componentCls + "-item, " + componentCls + "-submenu-title", {
+    paddingInline: fontSize * 2 + "px " + padding + "px"
+  }))), _defineProperty(_extends5, '&-submenu', _defineProperty({
+    '&-popup': {
+      position: 'absolute',
+      zIndex: zIndexPopup,
+      background: 'transparent',
+      borderRadius: borderRadiusLG,
+      boxShadow: 'none',
+      transformOrigin: '0 0',
+      // https://github.com/ant-design/ant-design/issues/13955
+      '&::before': {
+        position: 'absolute',
+        inset: menuPanelMaskInset + "px 0 0",
+        zIndex: -1,
+        width: '100%',
+        height: '100%',
+        opacity: 0,
+        content: '""'
+      }
+    },
+    // https://github.com/ant-design/ant-design/issues/13955
+    '&-placement-rightTop::before': {
+      top: 0,
+      insetInlineStart: menuPanelMaskInset
+    }
+  }, "> " + componentCls, _extends(_extends(_extends({
+    borderRadius: borderRadiusLG
+  }, genMenuItemStyle(token)), genSubMenuArrowStyle(token)), (_extends4 = {}, _defineProperty(_extends4, componentCls + "-item, " + componentCls + "-submenu > " + componentCls + "-submenu-title", {
+    borderRadius: radiusSubMenuItem
+  }), _defineProperty(_extends4, componentCls + "-submenu-title::after", {
+    transition: "transform " + motionDurationSlow + " " + motionEaseInOut
+  }), _extends4)))), _extends5)), genSubMenuArrowStyle(token)), (_extends6 = {}, _defineProperty(_extends6, "&-inline-collapsed " + componentCls + "-submenu-arrow,\n        &-inline " + componentCls + "-submenu-arrow", {
+    // ↓
+    '&::before': {
+      transform: "rotate(-45deg) translateX(" + menuArrowOffset + ")"
+    },
+    '&::after': {
+      transform: "rotate(45deg) translateX(-" + menuArrowOffset + ")"
+    }
+  }), _defineProperty(_extends6, componentCls + "-submenu-open" + componentCls + "-submenu-inline > " + componentCls + "-submenu-title > " + componentCls + "-submenu-arrow", {
+    // ↑
+    transform: "translateY(-" + menuArrowSize * 0.2 + "px)",
+    '&::after': {
+      transform: "rotate(-45deg) translateX(-" + menuArrowOffset + ")"
+    },
+    '&::before': {
+      transform: "rotate(45deg) translateX(" + menuArrowOffset + ")"
+    }
+  }), _extends6))), // Integration with header element so menu items have the same height
+  _defineProperty({}, antCls + "-layout-header", _defineProperty({}, componentCls, {
+    lineHeight: 'inherit'
+  }))];
+}; // ============================== Export ==============================
+
+
+export default (function (prefixCls, injectStyle) {
+  var useOriginHook = genComponentStyleHook('Menu', function (token, _ref14) {
+    var overrideComponentToken = _ref14.overrideComponentToken; // Dropdown will handle menu style self. We do not need to handle this.
+
+    if (injectStyle === false) {
+      return [];
+    }
+
+    var colorBgElevated = token.colorBgElevated,
+        colorPrimary = token.colorPrimary,
+        colorError = token.colorError,
+        colorErrorHover = token.colorErrorHover,
+        colorTextLightSolid = token.colorTextLightSolid,
+        colorTextSecondary = token.colorTextSecondary;
+    var controlHeightLG = token.controlHeightLG,
+        fontSize = token.fontSize;
+    var menuArrowSize = fontSize / 7 * 5; // Menu Token
+
+    var menuToken = mergeToken(token, {
+      menuItemHeight: controlHeightLG,
+      menuItemPaddingInline: token.margin,
+      menuArrowSize: menuArrowSize,
+      menuHorizontalHeight: controlHeightLG * 1.15,
+      menuArrowOffset: menuArrowSize * 0.25 + "px",
+      menuPanelMaskInset: -7,
+      menuSubMenuBg: colorBgElevated
+    });
+    var menuDarkToken = mergeToken(menuToken, {
+      colorItemText: new TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
+      colorItemTextHover: colorTextLightSolid,
+      colorGroupTitle: colorTextSecondary,
+      colorItemTextSelected: colorTextLightSolid,
+      colorItemBg: '#001529',
+      colorSubItemBg: '#000c17',
+      colorItemBgActive: 'transparent',
+      colorItemBgSelected: colorPrimary,
+      colorActiveBarWidth: 0,
+      colorActiveBarHeight: 0,
+      colorActiveBarBorderSize: 0,
+      // Disabled
+      colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+      // Danger
+      colorDangerItemText: colorError,
+      colorDangerItemTextHover: colorErrorHover,
+      colorDangerItemTextSelected: colorTextLightSolid,
+      colorDangerItemBgActive: colorError,
+      colorDangerItemBgSelected: colorError,
+      menuSubMenuBg: '#001529'
+    }, _extends({}, overrideComponentToken));
+    return [// Basic
+    getBaseStyle(menuToken), // Horizontal
+    getHorizontalStyle(menuToken), // Vertical
+    getVerticalStyle(menuToken), // Theme
+    getThemeStyle(menuToken, 'light'), getThemeStyle(menuDarkToken, 'dark'), // RTL
+    getRTLStyle(menuToken), // Motion
+    genCollapseMotion(menuToken), initSlideMotion(menuToken, 'slide-up'), initSlideMotion(menuToken, 'slide-down'), initZoomMotion(menuToken, 'zoom-big')];
+  }, function (token) {
+    var colorPrimary = token.colorPrimary,
+        colorError = token.colorError,
+        colorTextDisabled = token.colorTextDisabled,
+        colorErrorBg = token.colorErrorBg,
+        colorText = token.colorText,
+        colorTextDescription = token.colorTextDescription,
+        colorBgContainer = token.colorBgContainer,
+        colorFillAlter = token.colorFillAlter,
+        colorFillContent = token.colorFillContent,
+        lineWidth = token.lineWidth,
+        lineWidthBold = token.lineWidthBold,
+        controlItemBgActiveHover = token.controlItemBgActiveHover,
+        colorBgTextHover = token.colorBgTextHover;
+    return {
+      dropdownWidth: 160,
+      zIndexPopup: token.zIndexPopupBase + 50,
+      radiusItem: token.borderRadiusLG,
+      radiusSubMenuItem: token.borderRadiusSM,
+      colorItemText: colorText,
+      colorItemTextHover: colorText,
+      colorItemTextHoverHorizontal: colorPrimary,
+      colorGroupTitle: colorTextDescription,
+      colorItemTextSelected: colorText,
+      colorItemTextSelectedHorizontal: colorPrimary,
+      colorItemBg: colorBgContainer,
+      colorItemBgHover: colorBgTextHover,
+      colorItemBgActive: colorFillContent,
+      colorSubItemBg: colorFillAlter,
+      colorItemBgSelected: controlItemBgActiveHover,
+      colorItemBgSelectedHorizontal: 'transparent',
+      colorActiveBarWidth: 0,
+      colorActiveBarHeight: lineWidthBold,
+      colorActiveBarBorderSize: lineWidth,
+      // Disabled
+      colorItemTextDisabled: colorTextDisabled,
+      // Danger
+      colorDangerItemText: colorError,
+      colorDangerItemTextHover: colorError,
+      colorDangerItemTextSelected: colorError,
+      colorDangerItemBgActive: colorErrorBg,
+      colorDangerItemBgSelected: colorErrorBg,
+      itemMarginInline: token.marginXXS
+    };
+  });
+  return useOriginHook(prefixCls);
+});

package/es/menu/style/rtl.d.ts

@@ -0,0 +1,4 @@
+import type { MenuToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const getRTLStyle: GenerateStyle<MenuToken>;
+export default getRTLStyle;

package/es/menu/style/rtl.js

@@ -0,0 +1,22 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var getRTLStyle = function getRTLStyle(_ref) {
+  var _ref3;
+
+  var componentCls = _ref.componentCls,
+      menuArrowOffset = _ref.menuArrowOffset;
+  return _ref3 = {}, _defineProperty(_ref3, componentCls + "-rtl", {
+    direction: 'rtl'
+  }), _defineProperty(_ref3, componentCls + "-submenu-rtl", {
+    transformOrigin: '100% 0'
+  }), _defineProperty(_ref3, componentCls + "-rtl" + componentCls + "-vertical,\n    " + componentCls + "-submenu-rtl " + componentCls + "-vertical", _defineProperty({}, componentCls + "-submenu-arrow", {
+    '&::before': {
+      transform: "rotate(-45deg) translateY(-" + menuArrowOffset + ")"
+    },
+    '&::after': {
+      transform: "rotate(45deg) translateY(" + menuArrowOffset + ")"
+    }
+  })), _ref3;
+};
+
+export default getRTLStyle;

package/es/menu/style/theme.d.ts

@@ -0,0 +1,4 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import type { MenuToken } from '.';
+declare const getThemeStyle: (token: MenuToken, themeSuffix: string) => CSSInterpolation;
+export default getThemeStyle;

package/es/menu/style/theme.js

@@ -0,0 +1,147 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { genFocusOutline } from "../../style";
+
+var accessibilityFocus = function accessibilityFocus(token) {
+  return _extends({}, genFocusOutline(token));
+};
+
+var getThemeStyle = function getThemeStyle(token, themeSuffix) {
+  var _ref3, _ref5, _ref6, _ref9, _ref12, _ref13;
+
+  var componentCls = token.componentCls,
+      colorItemText = token.colorItemText,
+      colorItemTextSelected = token.colorItemTextSelected,
+      colorItemTextSelectedHorizontal = token.colorItemTextSelectedHorizontal,
+      colorGroupTitle = token.colorGroupTitle,
+      colorItemBg = token.colorItemBg,
+      colorSubItemBg = token.colorSubItemBg,
+      colorItemBgSelectedHorizontal = token.colorItemBgSelectedHorizontal,
+      colorItemBgSelected = token.colorItemBgSelected,
+      colorActiveBarHeight = token.colorActiveBarHeight,
+      colorActiveBarWidth = token.colorActiveBarWidth,
+      colorActiveBarBorderSize = token.colorActiveBarBorderSize,
+      motionDurationSlow = token.motionDurationSlow,
+      motionEaseInOut = token.motionEaseInOut,
+      motionEaseOut = token.motionEaseOut,
+      menuItemPaddingInline = token.menuItemPaddingInline,
+      motionDurationMid = token.motionDurationMid,
+      colorItemTextHover = token.colorItemTextHover,
+      lineType = token.lineType,
+      colorSplit = token.colorSplit,
+      colorItemTextDisabled = token.colorItemTextDisabled,
+      colorDangerItemText = token.colorDangerItemText,
+      colorDangerItemTextHover = token.colorDangerItemTextHover,
+      colorDangerItemTextSelected = token.colorDangerItemTextSelected,
+      colorDangerItemBgActive = token.colorDangerItemBgActive,
+      colorDangerItemBgSelected = token.colorDangerItemBgSelected,
+      colorItemBgHover = token.colorItemBgHover,
+      menuSubMenuBg = token.menuSubMenuBg;
+  return _defineProperty({}, componentCls + "-" + themeSuffix, (_ref13 = {
+    color: colorItemText,
+    background: colorItemBg
+  }, _defineProperty(_ref13, "&" + componentCls + "-root:focus-visible", _extends({}, accessibilityFocus(token))), _defineProperty(_ref13, componentCls + "-item-group-title", {
+    color: colorGroupTitle
+  }), _defineProperty(_ref13, componentCls + "-submenu-selected", _defineProperty({}, "> " + componentCls + "-submenu-title", {
+    color: colorItemTextSelected
+  })), _defineProperty(_ref13, componentCls + "-item-disabled, " + componentCls + "-submenu-disabled", {
+    color: colorItemTextDisabled + " !important"
+  }), _defineProperty(_ref13, componentCls + "-item:hover, " + componentCls + "-submenu-title:hover", _defineProperty({}, "&:not(" + componentCls + "-item-selected):not(" + componentCls + "-submenu-selected)", {
+    color: colorItemTextHover
+  })), _defineProperty(_ref13, "&:not(" + componentCls + "-horizontal)", (_ref3 = {}, _defineProperty(_ref3, componentCls + "-item:not(" + componentCls + "-item-selected)", {
+    '&:hover': {
+      backgroundColor: colorItemBgHover
+    },
+    '&:active': {
+      backgroundColor: colorItemBgSelected
+    }
+  }), _defineProperty(_ref3, componentCls + "-submenu-title", {
+    '&:hover': {
+      backgroundColor: colorItemBgHover
+    },
+    '&:active': {
+      backgroundColor: colorItemBgSelected
+    }
+  }), _ref3)), _defineProperty(_ref13, componentCls + "-item-danger", (_ref5 = {
+    color: colorDangerItemText
+  }, _defineProperty(_ref5, "&" + componentCls + "-item:hover", _defineProperty({}, "&:not(" + componentCls + "-item-selected):not(" + componentCls + "-submenu-selected)", {
+    color: colorDangerItemTextHover
+  })), _defineProperty(_ref5, "&" + componentCls + "-item:active", {
+    background: colorDangerItemBgActive
+  }), _ref5)), _defineProperty(_ref13, componentCls + "-item a", {
+    '&, &:hover': {
+      color: 'inherit'
+    }
+  }), _defineProperty(_ref13, componentCls + "-item-selected", (_ref6 = {
+    color: colorItemTextSelected
+  }, _defineProperty(_ref6, "&" + componentCls + "-item-danger", {
+    color: colorDangerItemTextSelected
+  }), _defineProperty(_ref6, "a, a:hover", {
+    color: 'inherit'
+  }), _ref6)), _defineProperty(_ref13, "&:not(" + componentCls + "-horizontal) " + componentCls + "-item-selected", _defineProperty({
+    backgroundColor: colorItemBgSelected
+  }, "&" + componentCls + "-item-danger", {
+    backgroundColor: colorDangerItemBgSelected
+  })), _defineProperty(_ref13, componentCls + "-item, " + componentCls + "-submenu-title", _defineProperty({}, "&:not(" + componentCls + "-item-disabled):focus-visible", _extends({}, accessibilityFocus(token)))), _defineProperty(_ref13, "&" + componentCls + "-submenu > " + componentCls, {
+    backgroundColor: menuSubMenuBg
+  }), _defineProperty(_ref13, "&" + componentCls + "-popup > " + componentCls, {
+    backgroundColor: colorItemBg
+  }), _defineProperty(_ref13, "&" + componentCls + "-horizontal", _extends(_extends({}, themeSuffix === 'dark' ? {
+    borderBottom: 0
+  } : {}), _defineProperty({}, "> " + componentCls + "-item, > " + componentCls + "-submenu", (_ref9 = {
+    top: colorActiveBarBorderSize,
+    marginTop: -colorActiveBarBorderSize,
+    marginBottom: 0,
+    borderRadius: token.radiusItem,
+    '&::after': {
+      position: 'absolute',
+      insetInline: menuItemPaddingInline,
+      bottom: 0,
+      borderBottom: colorActiveBarHeight + "px solid transparent",
+      transition: "border-color " + motionDurationSlow + " " + motionEaseInOut,
+      content: '""'
+    }
+  }, _defineProperty(_ref9, "&:hover, &-active, &-open", {
+    '&::after': {
+      borderWidth: colorActiveBarHeight + "px",
+      borderBottomColor: colorItemTextSelectedHorizontal
+    }
+  }), _defineProperty(_ref9, "&-selected", {
+    color: colorItemTextSelectedHorizontal,
+    backgroundColor: colorItemBgSelectedHorizontal,
+    '&::after': {
+      borderWidth: colorActiveBarHeight + "px",
+      borderBottomColor: colorItemTextSelectedHorizontal
+    }
+  }), _ref9)))), _defineProperty(_ref13, "&" + componentCls + "-root", _defineProperty({}, "&" + componentCls + "-inline, &" + componentCls + "-vertical", {
+    borderInlineEnd: colorActiveBarBorderSize + "px " + lineType + " " + colorSplit
+  })), _defineProperty(_ref13, "&" + componentCls + "-inline", (_ref12 = {}, _defineProperty(_ref12, componentCls + "-sub" + componentCls + "-inline", {
+    background: colorSubItemBg
+  }), _defineProperty(_ref12, componentCls + "-item, " + componentCls + "-submenu-title", colorActiveBarBorderSize && colorActiveBarWidth ? {
+    width: "calc(100% + " + colorActiveBarBorderSize + "px)"
+  } : {}), _defineProperty(_ref12, componentCls + "-item", _defineProperty({
+    position: 'relative',
+    '&::after': {
+      position: 'absolute',
+      insetBlock: 0,
+      insetInlineEnd: 0,
+      borderInlineEnd: colorActiveBarWidth + "px solid " + colorItemTextSelected,
+      transform: 'scaleY(0.0001)',
+      opacity: 0,
+      transition: ["transform " + motionDurationMid + " " + motionEaseOut, "opacity " + motionDurationMid + " " + motionEaseOut].join(','),
+      content: '""'
+    }
+  }, "&" + componentCls + "-item-danger", {
+    '&::after': {
+      borderInlineEndColor: colorDangerItemTextSelected
+    }
+  })), _defineProperty(_ref12, componentCls + "-selected, " + componentCls + "-item-selected", {
+    '&::after': {
+      transform: 'scaleY(1)',
+      opacity: 1,
+      transition: ["transform " + motionDurationMid + " " + motionEaseInOut, "opacity " + motionDurationMid + " " + motionEaseInOut].join(',')
+    }
+  }), _ref12)), _ref13));
+};
+
+export default getThemeStyle;

package/es/menu/style/vertical.d.ts

@@ -0,0 +1,4 @@
+import type { MenuToken } from '.';
+import type { GenerateStyle } from '../../theme/internal';
+declare const getVerticalStyle: GenerateStyle<MenuToken>;
+export default getVerticalStyle;

package/es/menu/style/vertical.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { textEllipsis } from "../../style";
+
+var getVerticalInlineStyle = function getVerticalInlineStyle(token) {
+  var _ref;
+
+  var componentCls = token.componentCls,
+      menuItemHeight = token.menuItemHeight,
+      itemMarginInline = token.itemMarginInline,
+      padding = token.padding,
+      menuArrowSize = token.menuArrowSize,
+      marginXS = token.marginXS,
+      marginXXS = token.marginXXS;
+  var paddingWithArrow = padding + menuArrowSize + marginXS;
+  return _ref = {}, _defineProperty(_ref, componentCls + "-item", {
+    position: 'relative'
+  }), _defineProperty(_ref, componentCls + "-item, " + componentCls + "-submenu-title", {
+    height: menuItemHeight,
+    lineHeight: menuItemHeight + "px",
+    paddingInline: padding,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginInline: itemMarginInline,
+    marginBlock: marginXXS,
+    width: "calc(100% - " + itemMarginInline * 2 + "px)"
+  }), _defineProperty(_ref, componentCls + "-submenu", {
+    paddingBottom: 0.02
+  }), _defineProperty(_ref, "> " + componentCls + "-item,\n            > " + componentCls + "-submenu > " + componentCls + "-submenu-title", {
+    height: menuItemHeight,
+    lineHeight: menuItemHeight + "px"
+  }), _defineProperty(_ref, componentCls + "-item-group-list " + componentCls + "-submenu-title,\n            " + componentCls + "-submenu-title", {
+    paddingInlineEnd: paddingWithArrow
+  }), _ref;
+};
+
+var getVerticalStyle = function getVerticalStyle(token) {
+  var _ref3, _ref5, _ref7, _ref8, _ref12, _tooltip, _ref13;
+
+  var componentCls = token.componentCls,
+      iconCls = token.iconCls,
+      menuItemHeight = token.menuItemHeight,
+      colorTextLightSolid = token.colorTextLightSolid,
+      dropdownWidth = token.dropdownWidth,
+      controlHeightLG = token.controlHeightLG,
+      motionDurationMid = token.motionDurationMid,
+      motionEaseOut = token.motionEaseOut,
+      paddingXL = token.paddingXL,
+      fontSizeSM = token.fontSizeSM,
+      fontSizeLG = token.fontSizeLG,
+      motionDurationSlow = token.motionDurationSlow,
+      paddingXS = token.paddingXS,
+      boxShadowSecondary = token.boxShadowSecondary;
+  var inlineItemStyle = {
+    height: menuItemHeight,
+    lineHeight: menuItemHeight + "px",
+    listStylePosition: 'inside',
+    listStyleType: 'disc'
+  };
+  return [(_ref3 = {}, _defineProperty(_ref3, componentCls, _defineProperty({}, "&-inline, &-vertical", _extends(_defineProperty({}, "&" + componentCls + "-root", {
+    boxShadow: 'none'
+  }), getVerticalInlineStyle(token)))), _defineProperty(_ref3, componentCls + "-submenu-popup", _defineProperty({}, componentCls + "-vertical", _extends(_extends({}, getVerticalInlineStyle(token)), {
+    boxShadow: boxShadowSecondary
+  }))), _ref3), // Vertical only
+  _defineProperty({}, componentCls + "-submenu-popup " + componentCls + "-vertical" + componentCls + "-sub", {
+    minWidth: dropdownWidth,
+    maxHeight: "calc(100vh - " + controlHeightLG * 2.5 + "px)",
+    padding: '0',
+    overflow: 'hidden',
+    borderInlineEnd: 0,
+    // https://github.com/ant-design/ant-design/issues/22244
+    // https://github.com/ant-design/ant-design/issues/26812
+    "&:not([class*='-active'])": {
+      overflowX: 'hidden',
+      overflowY: 'auto'
+    }
+  }), // Inline Only
+  _defineProperty({}, componentCls + "-inline", (_ref8 = {
+    width: '100%'
+  }, _defineProperty(_ref8, "&" + componentCls + "-root", _defineProperty({}, componentCls + "-item, " + componentCls + "-submenu-title", (_ref5 = {
+    display: 'flex',
+    alignItems: 'center',
+    transition: ["border-color " + motionDurationSlow, "background " + motionDurationSlow, "padding " + motionDurationMid + " " + motionEaseOut]
+  }, _defineProperty(_ref5, "> " + componentCls + "-title-content", {
+    flex: 'auto',
+    minWidth: 0,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }), _defineProperty(_ref5, '> *', {
+    flex: 'none'
+  }), _ref5))), _defineProperty(_ref8, componentCls + "-sub" + componentCls + "-inline", (_ref7 = {
+    padding: 0,
+    border: 0,
+    borderRadius: 0,
+    boxShadow: 'none'
+  }, _defineProperty(_ref7, "& > " + componentCls + "-submenu > " + componentCls + "-submenu-title", inlineItemStyle), _defineProperty(_ref7, "& " + componentCls + "-item-group-title", {
+    paddingInlineStart: paddingXL
+  }), _ref7)), _defineProperty(_ref8, componentCls + "-item", inlineItemStyle), _ref8)), // Inline Collapse Only
+  _defineProperty({}, componentCls + "-inline-collapsed", (_ref13 = {
+    width: menuItemHeight * 2
+  }, _defineProperty(_ref13, "&" + componentCls + "-root", _defineProperty({}, componentCls + "-item, " + componentCls + "-submenu " + componentCls + "-submenu-title", _defineProperty({}, "> " + componentCls + "-inline-collapsed-noicon", {
+    fontSize: fontSizeLG,
+    textAlign: 'center'
+  }))), _defineProperty(_ref13, "> " + componentCls + "-item,\n          > " + componentCls + "-item-group > " + componentCls + "-item-group-list > " + componentCls + "-item,\n          > " + componentCls + "-item-group > " + componentCls + "-item-group-list > " + componentCls + "-submenu > " + componentCls + "-submenu-title,\n          > " + componentCls + "-submenu > " + componentCls + "-submenu-title", (_ref12 = {
+    insetInlineStart: 0,
+    paddingInline: "calc(50% - " + fontSizeSM + "px)",
+    textOverflow: 'clip'
+  }, _defineProperty(_ref12, componentCls + "-submenu-arrow", {
+    opacity: 0
+  }), _defineProperty(_ref12, componentCls + "-item-icon, " + iconCls, {
+    margin: 0,
+    fontSize: fontSizeLG,
+    lineHeight: menuItemHeight + "px",
+    '+ span': {
+      display: 'inline-block',
+      opacity: 0
+    }
+  }), _ref12)), _defineProperty(_ref13, componentCls + "-item-icon, " + iconCls, {
+    display: 'inline-block'
+  }), _defineProperty(_ref13, '&-tooltip', (_tooltip = {
+    pointerEvents: 'none'
+  }, _defineProperty(_tooltip, componentCls + "-item-icon, " + iconCls, {
+    display: 'none'
+  }), _defineProperty(_tooltip, 'a, a:hover', {
+    color: colorTextLightSolid
+  }), _tooltip)), _defineProperty(_ref13, componentCls + "-item-group-title", _extends(_extends({}, textEllipsis), {
+    paddingInline: paddingXS
+  })), _ref13))];
+};
+
+export default getVerticalStyle;