fix: submenu align (#42648)

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 */

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(

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,
 

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",