fix(menu): fix custom expand icon cannot be hidden (#40071)

* test: add case

* fix: fix the error of missing custom icon className

* test: add case

* fix(menu): fix the bug that the custom expand icon is not hidden in collapse mode

* test: update snapshot

* Revert "fix: fix the error of missing custom icon className"

This reverts commit 71c79a3f75.

* test: update case

* fix: fix the error of missing custom icon className

components/config-provider/__tests__/__snapshots__/components.test.tsx.snap

@@ -26765,7 +26765,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                                     Submenu
                                   </span>
                                   <span
-                                    class="config-dropdown-menu-submenu-expand-icon"
+                                    class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"
@@ -27072,7 +27072,7 @@ exports[`ConfigProvider components Table configProvider componentDisabled 1`] =
                                     Submenu
                                   </span>
                                   <span
-                                    class="config-dropdown-menu-submenu-expand-icon"
+                                    class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"
@@ -27379,7 +27379,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
                                     Submenu
                                   </span>
                                   <span
-                                    class="config-dropdown-menu-submenu-expand-icon"
+                                    class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"
@@ -27685,7 +27685,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
                                     Submenu
                                   </span>
                                   <span
-                                    class="config-dropdown-menu-submenu-expand-icon"
+                                    class="config-dropdown-menu-submenu-expand-icon config-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"
@@ -27991,7 +27991,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
                                     Submenu
                                   </span>
                                   <span
-                                    class="ant-dropdown-menu-submenu-expand-icon"
+                                    class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"
@@ -28297,7 +28297,7 @@ exports[`ConfigProvider components Table normal 1`] = `
                                     Submenu
                                   </span>
                                   <span
-                                    class="ant-dropdown-menu-submenu-expand-icon"
+                                    class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"
@@ -28603,7 +28603,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                                     Submenu
                                   </span>
                                   <span
-                                    class="ant-dropdown-menu-submenu-expand-icon"
+                                    class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"

components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -6675,7 +6675,7 @@ Array [
               Navigation One
             </span>
             <span
-              class="ant-dropdown-menu-submenu-expand-icon"
+              class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
             >
               <span
                 aria-label="right"
@@ -6907,7 +6907,7 @@ Array [
               Navigation Two
             </span>
             <span
-              class="ant-dropdown-menu-submenu-expand-icon"
+              class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
             >
               <span
                 aria-label="right"
@@ -7022,7 +7022,7 @@ Array [
                       Submenu
                     </span>
                     <span
-                      class="ant-dropdown-menu-submenu-expand-icon"
+                      class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
                     >
                       <span
                         aria-label="right"
@@ -7164,7 +7164,7 @@ Array [
               Navigation Three
             </span>
             <span
-              class="ant-dropdown-menu-submenu-expand-icon"
+              class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
             >
               <span
                 aria-label="right"
@@ -9852,7 +9852,7 @@ Array [
               sub menu
             </span>
             <span
-              class="ant-dropdown-menu-submenu-expand-icon"
+              class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
             >
               <span
                 aria-label="right"
@@ -9971,7 +9971,7 @@ Array [
               disabled sub menu
             </span>
             <span
-              class="ant-dropdown-menu-submenu-expand-icon"
+              class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
             >
               <span
                 aria-label="right"

components/menu/__tests__/index.test.tsx

@@ -1047,4 +1047,56 @@ describe('Menu', () => {
     );
     errorSpy.mockRestore();
   });
+
+  it('expandIconClassName', () => {
+    const { container } = render(
+      <Menu
+        expandIcon={<span className="custom-expand-icon" />}
+        inlineCollapsed
+        items={[
+          {
+            label: 'Option 1',
+            key: '1',
+            icon: '112',
+            children: [
+              {
+                label: 'Option 1-1',
+                key: '1-1',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+    expect(container.querySelector('.custom-expand-icon')).toBeTruthy();
+  });
+
+  // https://github.com/ant-design/ant-design/issues/40041
+  it('should not show icon when inlineCollapsed', () => {
+    const { container } = render(
+      <Menu
+        expandIcon={<span className="bamboo">I</span>}
+        inlineCollapsed
+        items={[
+          {
+            label: 'Option 1',
+            key: '1',
+            icon: '112',
+            children: [
+              {
+                label: 'Option 1-1',
+                key: '1-1',
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(container.querySelector('.bamboo')).toBeTruthy();
+    expect(getComputedStyle(container.querySelector('.bamboo') as HTMLElement)).toHaveProperty(
+      'opacity',
+      '0',
+    );
+  });
 });

components/menu/menu.tsx

@@ -125,8 +125,9 @@ const InternalMenu = forwardRef<RcMenuRef, InternalMenuProps>((props, ref) => {
   if (typeof expandIcon === 'function') {
     mergedExpandIcon = expandIcon;
   } else {
-    mergedExpandIcon = cloneElement(expandIcon || overrideObj.expandIcon, {
+    const beClone: any = expandIcon || overrideObj.expandIcon;
-      className: `${prefixCls}-submenu-expand-icon`,
+    mergedExpandIcon = cloneElement(beClone, {
+      className: classNames(`${prefixCls}-submenu-expand-icon`, beClone?.props?.className),
     });
   }
 

components/menu/style/vertical.tsx

@@ -184,7 +184,10 @@ const getVerticalStyle: GenerateStyle<MenuToken> = (token) => {
           paddingInline: `calc(50% - ${fontSizeSM}px)`,
           textOverflow: 'clip',
 
-          [`${componentCls}-submenu-arrow`]: {
+          [`
+            ${componentCls}-submenu-arrow,
+            ${componentCls}-submenu-expand-icon
+          `]: {
             opacity: 0,
           },
 

components/table/__tests__/__snapshots__/Table.filter.test.tsx.snap

@@ -645,7 +645,7 @@ exports[`Table.filter renders menu correctly 1`] = `
           Title
         </span>
         <span
-          class="ant-dropdown-menu-submenu-expand-icon"
+          class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
         >
           <span
             aria-label="right"
@@ -787,7 +787,7 @@ exports[`Table.filter renders radio filter correctly 1`] = `
           Title
         </span>
         <span
-          class="ant-dropdown-menu-submenu-expand-icon"
+          class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
         >
           <span
             aria-label="right"

components/table/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -13569,7 +13569,7 @@ exports[`renders ./components/table/demo/head.tsx extend context correctly 1`] =
                                     Submenu
                                   </span>
                                   <span
-                                    class="ant-dropdown-menu-submenu-expand-icon"
+                                    class="ant-dropdown-menu-submenu-expand-icon ant-dropdown-menu-submenu-arrow"
                                   >
                                     <span
                                       aria-label="right"