fix: Align width

docs/examples/debug.tsx

@@ -47,7 +47,7 @@ const motionMap: Record<MenuProps['mode'], CSSMotionProps> = {
 };
 
 export default () => {
-  const [mode, setMode] = React.useState<MenuProps['mode']>('inline');
+  const [mode, setMode] = React.useState<MenuProps['mode']>('horizontal');
   const [narrow, setNarrow] = React.useState(false);
   const [inlineCollapsed, setInlineCollapsed] = React.useState(false);
   const [forceRender, setForceRender] = React.useState(false);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-menu",
-  "version": "9.0.0-alpha.4",
+  "version": "9.0.0-alpha.5",
   "description": "menu ui component for react",
   "keywords": [
     "react",

src/SubMenu/PopupTrigger.tsx

@@ -91,6 +91,7 @@ export default function PopupTrigger({
         },
         popupClassName,
       )}
+      stretch={mode === 'horizontal' ? 'minWidth' : null}
       getPopupContainer={getPopupContainer}
       builtinPlacements={placement}
       popupPlacement={popupPlacement}

src/SubMenu/index.tsx

@@ -272,7 +272,7 @@ const InternalSubMenu = (props: SubMenuProps) => {
   // Cache mode if it change to `inline` which do not have popup motion
   const triggerModeRef = React.useRef(mode);
   if (mode !== 'inline') {
-    triggerModeRef.current = mode;
+    triggerModeRef.current = connectedPath.length > 1 ? 'vertical' : mode;
   }
 
   if (!overflowDisabled) {