From 61924699abee0d77bab1787149f025728b85f77b Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 26 May 2023 17:15:03 +0800
Subject: [PATCH] fix: submenu align (#42648)

---
 components/menu/MenuContext.tsx |  2 --
 components/menu/SubMenu.tsx     |  5 +--
 components/menu/style/index.tsx | 58 +++++++++++++++++++++++++++++++--
 package.json                    |  2 +-
 4 files changed, 57 insertions(+), 10 deletions(-)

diff --git a/components/menu/MenuContext.tsx b/components/menu/MenuContext.tsx
index 4426ae47a6..5719efe131 100644
--- a/components/menu/MenuContext.tsx
+++ b/components/menu/MenuContext.tsx
@@ -1,5 +1,4 @@
 import { createContext } from 'react';
-import type { MenuProps } from 'rc-menu';
 import type { DirectionType } from '../config-provider';
 
 export type MenuTheme = 'light' | 'dark';
@@ -8,7 +7,6 @@ export interface MenuContextProps {
   prefixCls: string;
   inlineCollapsed: boolean;
   direction?: DirectionType;
-  mode?: MenuProps['mode'];
   theme?: MenuTheme;
   firstLevel: boolean;
   /** @internal Safe to remove */
diff --git a/components/menu/SubMenu.tsx b/components/menu/SubMenu.tsx
index 1ae6b50840..1b800fa49d 100644
--- a/components/menu/SubMenu.tsx
+++ b/components/menu/SubMenu.tsx
@@ -30,7 +30,7 @@ export interface SubMenuProps {
 const SubMenu: React.FC<SubMenuProps> = (props) => {
   const { popupClassName, icon, title, theme: customTheme } = props;
   const context = React.useContext(MenuContext);
-  const { prefixCls, inlineCollapsed, theme: contextTheme, mode } = context;
+  const { prefixCls, inlineCollapsed, theme: contextTheme } = context;
 
   const parentPath = useFullPath();
 
@@ -65,12 +65,9 @@ const SubMenu: React.FC<SubMenuProps> = (props) => {
     [context],
   );
 
-  const popupOffset = mode === 'horizontal' ? [0, 8] : [10, 0];
-
   return (
     <MenuContext.Provider value={contextValue}>
       <RcSubMenu
-        popupOffset={popupOffset}
         {...omit(props, ['icon'])}
         title={titleNode}
         popupClassName={classNames(
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index c8c4c8169d..1d8737de27 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -1,5 +1,6 @@
-import { TinyColor } from '@ctrl/tinycolor';
 import type { CSSObject } from '@ant-design/cssinjs';
+import { TinyColor } from '@ctrl/tinycolor';
+import { clearFix, resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion, initSlideMotion, initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@@ -7,7 +8,6 @@ import getHorizontalStyle from './horizontal';
 import getRTLStyle from './rtl';
 import getThemeStyle from './theme';
 import getVerticalStyle from './vertical';
-import { clearFix, resetComponent, resetIcon } from '../../style';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
@@ -349,11 +349,14 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
           '&-popup': {
             position: 'absolute',
             zIndex: zIndexPopup,
-            background: 'transparent',
             borderRadius: borderRadiusLG,
             boxShadow: 'none',
             transformOrigin: '0 0',
 
+            [`&${componentCls}-submenu`]: {
+              background: 'transparent',
+            },
+
             // https://github.com/ant-design/ant-design/issues/13955
             '&::before': {
               position: 'absolute',
@@ -372,6 +375,55 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
             insetInlineStart: menuPanelMaskInset,
           },
 
+          [`
+          &-placement-leftTop,
+          &-placement-bottomRight,
+          `]: {
+            transformOrigin: '100% 0',
+          },
+
+          [`
+          &-placement-leftBottom,
+          &-placement-topRight,
+          `]: {
+            transformOrigin: '100% 100%',
+          },
+
+          [`
+          &-placement-rightBottom,
+          &-placement-topLeft,
+          `]: {
+            transformOrigin: '0 100%',
+          },
+
+          [`
+          &-placement-leftTop,
+          &-placement-leftBottom
+          `]: {
+            paddingInlineEnd: token.paddingXS,
+          },
+
+          [`
+          &-placement-rightTop,
+          &-placement-rightBottom
+          `]: {
+            paddingInlineStart: token.paddingXS,
+          },
+
+          [`
+          &-placement-topRight,
+          &-placement-topLeft
+          `]: {
+            paddingBottom: token.paddingXS,
+          },
+
+          [`
+          &-placement-bottomRight,
+          &-placement-bottomLeft
+          `]: {
+            paddingTop: token.paddingXS,
+          },
+
           [`> ${componentCls}`]: {
             borderRadius: borderRadiusLG,
 
diff --git a/package.json b/package.json
index 0590108f0e..f74f450831 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
     "rc-input": "~1.0.4",
     "rc-input-number": "~7.4.0",
     "rc-mentions": "~2.3.0",
-    "rc-menu": "~9.9.1",
+    "rc-menu": "~9.9.2",
     "rc-motion": "^2.7.3",
     "rc-notification": "~5.0.4",
     "rc-pagination": "~3.4.2",