Perf menu2.0 (#3243)

close #3231 #3188

CHANGELOG.zh-CN.md

@@ -10,7 +10,6 @@
 
 ---
 
-
 ## 2.0.0-rc.1
 
 `2020-11-14`

antdv-demo

@@ -1 +1 @@
-Subproject commit 7cccccbb5571e61b35aca0d454eb83bc5924995e
+Subproject commit ef827839524b6f1ed427aefa082adb09ac2cc95f

components/menu/SubMenu.tsx

@@ -1,8 +1,6 @@
 import { defineComponent, inject } from 'vue';
 import { SubMenu as VcSubMenu } from '../vc-menu';
 import classNames from '../_util/classNames';
-import Omit from 'omit.js';
-import { getSlot } from '../_util/props-util';
 import { injectExtraPropsKey } from '../vc-menu/FunctionProvider';
 
 export type MenuTheme = 'light' | 'dark';
@@ -38,8 +36,7 @@ export default defineComponent({
       popupClassName: classNames(`${rootPrefixCls}-${antdMenuTheme}`, popupClassName),
       ref: 'subMenu',
       ...$attrs,
-      ...Omit($slots, ['default']),
+    } as any;
-    };
+    return <VcSubMenu {...props} v-slots={$slots}></VcSubMenu>;
-    return <VcSubMenu {...props}>{getSlot(this)}</VcSubMenu>;
   },
 });

components/menu/__tests__/__snapshots__/demo.test.js.snap

@@ -6,8 +6,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
     <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
     <!---->
@@ -17,8 +16,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
     <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
     <!---->
@@ -28,22 +26,19 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
     <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-horizontal" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span class="submenu-title-wrapper"><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span> Navigation Three - Submenu </span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="display: none;" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
     <!---->
@@ -53,8 +48,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/horizontal.md correctly 1`] = `
     <li class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu" style="visibility: hidden; position: absolute; display: none;" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span>···</span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
   </ul>
@@ -98,52 +92,12 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Two</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 5
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 6
-          <!---->
-        </li>
-        <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
-          <div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
-          <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 7
-              <!---->
-            </li>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 8
-              <!---->
-            </li>
-          </ul>
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 11
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 12
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
   </ul>
@@ -169,7 +123,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] =
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
+      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
         <!---->
         <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 5
           <!---->
@@ -191,30 +145,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/inline-collapsed.md correctly 1`] =
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Two</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
-          <!---->
-        </li>
-        <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
-          <div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
-          <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 11
-              <!---->
-            </li>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 12
-              <!---->
-            </li>
-          </ul>
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
   </ul>
@@ -226,7 +157,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/sider-current.md correctly 1`] = `
   <ul role="menu" class="ant-menu-light ant-menu-root ant-menu ant-menu-inline" style="width: 256px;">
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation One</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
+      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
         <!---->
         <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 1
           <!---->
@@ -248,52 +179,12 @@ exports[`renders ./antdv-demo/docs/menu/demo/sider-current.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Two</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 5
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 6
-          <!---->
-        </li>
-        <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
-          <div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
-          <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 7
-              <!---->
-            </li>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 8
-              <!---->
-            </li>
-          </ul>
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 11
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 12
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
   </ul>
@@ -317,7 +208,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
+      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
         <!---->
         <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
           <!---->
@@ -328,16 +219,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
         </li>
         <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
           <div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
-          <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+          <div></div>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 5
-              <!---->
-            </li>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 6
-              <!---->
-            </li>
-          </ul>
           <!---->
         </li>
       </ul>
@@ -345,24 +227,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/switch-mode.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Four</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 7
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 8
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
   </ul>
@@ -380,15 +245,10 @@ exports[`renders ./antdv-demo/docs/menu/demo/template.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
       <div aria-expanded="true" aria-owns="2$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation 2</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
+      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="2$Menu">
         <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
           <div aria-expanded="false" aria-haspopup="true" style="padding-left: 48px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="mail" class="anticon anticon-mail"><svg class="" data-icon="mail" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"></path></svg></span><span>Navigation 3</span></span><i class="ant-menu-submenu-arrow"></i></div>
-          <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+          <div></div>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"><span role="img" aria-label="pie-chart" class="anticon anticon-pie-chart"><svg class="" data-icon="pie-chart" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"></path></svg></span><span>Option 2.1.1</span>
-              <!---->
-            </li>
-          </ul>
           <!---->
         </li>
       </ul>
@@ -413,7 +273,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open" role="menuitem">
       <div aria-expanded="true" aria-owns="sub1$Menu" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline">
+      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" id="sub1$Menu">
         <!---->
         <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 3
           <!---->
@@ -424,16 +284,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
         </li>
         <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
           <div aria-expanded="false" aria-haspopup="true" title="Submenu" style="padding-left: 48px;" class="ant-menu-submenu-title">Submenu<i class="ant-menu-submenu-arrow"></i></div>
-          <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+          <div></div>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 5
-              <!---->
-            </li>
-            <!---->
-            <li role="menuitem" style="padding-left: 72px;" class="ant-menu-item"> Option 6
-              <!---->
-            </li>
-          </ul>
           <!---->
         </li>
       </ul>
@@ -441,24 +292,7 @@ exports[`renders ./antdv-demo/docs/menu/demo/theme.md correctly 1`] = `
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-inline" role="menuitem">
       <div aria-expanded="false" aria-haspopup="true" style="padding-left: 24px;" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Four</span></span><i class="ant-menu-submenu-arrow"></i></div>
-      <ul role="menu" class="ant-menu-sub ant-menu ant-menu-inline" style="display: none;">
+      <div></div>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 7
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 8
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 9
-          <!---->
-        </li>
-        <!---->
-        <li role="menuitem" style="padding-left: 48px;" class="ant-menu-item">Option 10
-          <!---->
-        </li>
-      </ul>
       <!---->
     </li>
   </ul>
@@ -479,15 +313,13 @@ exports[`renders ./antdv-demo/docs/menu/demo/vertical.md correctly 1`] = `
     <li class="ant-menu-submenu ant-menu-submenu-vertical" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span><span role="img" aria-label="appstore" class="anticon anticon-appstore"><svg class="" data-icon="appstore" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"></path></svg></span><span>Navigation Three</span></span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
     <li class="ant-menu-submenu ant-menu-submenu-vertical" role="menuitem">
       <!---->
       <!---->
-      <!--teleport start-->
+      <!---->
-      <!--teleport end-->
       <div aria-expanded="false" aria-haspopup="true" class="ant-menu-submenu-title"><span><span role="img" aria-label="setting" class="anticon anticon-setting"><svg class="" data-icon="setting" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"></path></svg></span><span>Navigation Four</span></span><i class="ant-menu-submenu-arrow"></i></div>
     </li>
   </ul>

components/menu/__tests__/index.test.js

@@ -52,7 +52,7 @@ describe('Menu', () => {
       { attachTo: 'body', sync: false },
     );
     await asyncExpect(() => {
-      expect($$('.ant-menu-submenu-selected').length).toBe(2);
+      expect($$('.ant-menu-submenu-selected').length).toBe(1);
     });
   });
   it('should accept defaultOpenKeys in mode horizontal', async () => {
@@ -73,7 +73,7 @@ describe('Menu', () => {
       { attachTo: 'body', sync: false },
     );
     await asyncExpect(() => {
-      expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
+      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
     });
   });
 
@@ -121,44 +121,44 @@ describe('Menu', () => {
     });
   });
 
-  // it('horizontal', async () => {
+  it('horizontal', async () => {
-  //   const wrapper = mount(
+    const wrapper = mount(
-  //     {
+      {
-  //       props: {
+        props: {
-  //         openKeys: {
+          openKeys: {
-  //           type: Array,
+            type: Array,
-  //           default() {
+            default() {
-  //             return ['1'];
+              return ['1'];
-  //           },
+            },
-  //         },
+          },
-  //       },
+        },
-  //       render() {
+        render() {
-  //         return (
+          return (
-  //           <Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
+            <Menu openKeys={this.openKeys} mode="horizontal" openTransitionName="">
-  //             <SubMenu key="1" title="submenu1">
+              <SubMenu key="1" title="submenu1">
-  //               <Menu.Item key="submenu1">Option 1</Menu.Item>
+                <Menu.Item key="submenu1">Option 1</Menu.Item>
-  //               <Menu.Item key="submenu2">Option 2</Menu.Item>
+                <Menu.Item key="submenu2">Option 2</Menu.Item>
-  //             </SubMenu>
+              </SubMenu>
-  //             <Menu.Item key="2">menu2</Menu.Item>
+              <Menu.Item key="2">menu2</Menu.Item>
-  //           </Menu>
+            </Menu>
-  //         );
+          );
-  //       },
+        },
-  //     },
+      },
-  //     { attachTo: 'body', sync: false },
+      { attachTo: 'body', sync: false },
-  //   );
+    );
-  //   await asyncExpect(() => {
+    await asyncExpect(() => {
-  //     expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
+      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
-  //   }, 100);
+    });
-  //   wrapper.setProps({ openKeys: [] });
+    wrapper.setProps({ openKeys: [] });
-  //   await asyncExpect(() => {
+    await asyncExpect(() => {
-  //     expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
+      expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
-  //   }, 500);
+    }, 500);
 
-  //   wrapper.setProps({ openKeys: ['1'] });
+    wrapper.setProps({ openKeys: ['1'] });
-  //   await asyncExpect(() => {
+    await asyncExpect(() => {
-  //     expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
+      expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
-  //   }, 0);
+    }, 0);
-  // });
+  });
 
   it('inline', async () => {
     const wrapper = mount(
@@ -382,7 +382,7 @@ describe('Menu', () => {
       { attachTo: 'body', sync: false },
     );
     await asyncExpect(() => {
-      expect(wrapper.findAll('.ant-menu-sub').length).not.toBe(0);
+      expect(wrapper.findAll('.ant-menu-sub').length).toBe(0);
     });
     wrapper.setProps({ inlineCollapsed: true });
     await asyncExpect(() => {
@@ -433,7 +433,7 @@ describe('Menu', () => {
         { attachTo: 'body', sync: false },
       );
       await asyncExpect(() => {
-        expect($$('.ant-menu-sub')[0].style.display).toBe('none');
+        expect($$('.ant-menu-sub').length).toBe(0);
         toggleMenu(wrapper, 0, 'click');
       }, 0);
       await asyncExpect(() => {
@@ -464,7 +464,7 @@ describe('Menu', () => {
         { attachTo: 'body', sync: false },
       );
       await asyncExpect(() => {
-        expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
+        expect($$('.ant-menu-sub').length).toBe(0);
         toggleMenu(wrapper, 0, 'mouseenter');
       }, 0);
       await asyncExpect(() => {
@@ -477,36 +477,36 @@ describe('Menu', () => {
       }, 500);
     });
 
-    // it('horizontal', async () => {
+    fit('horizontal', async () => {
-    //   const wrapper = mount(
+      const wrapper = mount(
-    //     {
+        {
-    //       render() {
+          render() {
-    //         return (
+            return (
-    //           <Menu mode="horizontal">
+              <Menu mode="horizontal">
-    //             <SubMenu key="1" title="submenu1">
+                <SubMenu key="1" title="submenu1">
-    //               <Menu.Item key="submenu1">Option 1</Menu.Item>
+                  <Menu.Item key="submenu1">Option 1</Menu.Item>
-    //               <Menu.Item key="submenu2">Option 2</Menu.Item>
+                  <Menu.Item key="submenu2">Option 2</Menu.Item>
-    //             </SubMenu>
+                </SubMenu>
-    //             <Menu.Item key="2">menu2</Menu.Item>
+                <Menu.Item key="2">menu2</Menu.Item>
-    //           </Menu>
+              </Menu>
-    //         );
+            );
-    //       },
+          },
-    //     },
+        },
-    //     { attachTo: 'body', sync: false },
+        { attachTo: 'body', sync: false },
-    //   );
+      );
-    //   await asyncExpect(() => {
+      await asyncExpect(() => {
-    //   //   expect($$('.ant-menu-sub').length).toBe(0);
+        expect($$('.ant-menu-sub').length).toBe(0);
-    //     toggleMenu(wrapper, 3, 'mouseenter');
+        toggleMenu(wrapper, 1, 'mouseenter');
-    //   }, 0);
+      }, 100);
-    //   await asyncExpect(() => {
+      await asyncExpect(() => {
-    //     // expect($$('.ant-menu-sub').length).toBe(1);
+        expect($$('.ant-menu-sub').length).toBe(1);
-    //     expect($$('.ant-menu-sub')[0].style.display).not.toBe('none');
+        expect($$('.ant-menu-sub')[0].parentElement.style.display).not.toBe('none');
-    //     toggleMenu(wrapper, 1, 'mouseleave');
+        toggleMenu(wrapper, 1, 'mouseleave');
-    //   }, 500);
+      }, 500);
-    //   await asyncExpect(() => {
+      await asyncExpect(() => {
-    //     expect($$('.ant-menu-sub')[0].style.display).toBe('none');
+        expect($$('.ant-menu-sub')[0].parentElement.style.display).toBe('none');
-    //   }, 500);
+      }, 500);
-    // });
+    });
   });
 
   it('inline title', async () => {

components/menu/index.tsx

@@ -6,7 +6,7 @@ import PropTypes from '../_util/vue-types';
 import animation from '../_util/openAnimation';
 import warning from '../_util/warning';
 import Item from './MenuItem';
-import { hasProp, getOptionProps, getSlot } from '../_util/props-util';
+import { hasProp, getOptionProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import commonPropsType from '../vc-menu/commonPropsType';
 import { defaultConfigProvider } from '../config-provider';
@@ -275,7 +275,7 @@ const Menu = defineComponent({
       onOpenChange: this.handleOpenChange,
       onMouseenter: this.handleMouseEnter,
       onTransitionend: this.handleTransitionEnd,
-      children: getSlot(this),
+      // children: getSlot(this),
     };
     if (!hasProp(this, 'selectedKeys')) {
       delete menuProps.selectedKeys;
@@ -300,7 +300,7 @@ const Menu = defineComponent({
       menuProps.openKeys = [];
     }
 
-    return <VcMenu {...menuProps} class={menuClassName} vSlots={omit(this.$slots, ['defalut'])} />;
+    return <VcMenu {...menuProps} class={menuClassName} v-slots={this.$slots} />;
   },
 });
 

components/menu/style/index.less

@@ -190,7 +190,7 @@
     &-popup {
       position: absolute;
       z-index: @zindex-dropdown;
-      background: @menu-popup-bg;
+      // background: @menu-popup-bg;
       border-radius: @border-radius-base;
 
       .submenu-title-wrapper {

components/table/filterDropdown.tsx

@@ -228,7 +228,6 @@ export default defineComponent({
       const { column } = this;
       const { sSelectedKeys: selectedKeys } = this;
       const multiple = 'filterMultiple' in column ? column.filterMultiple : true;
-
       const input = multiple ? (
         <Checkbox checked={selectedKeys && selectedKeys.indexOf(item.value) >= 0} />
       ) : (
@@ -281,8 +280,9 @@ export default defineComponent({
           onDeselect={this.setSelectedKeys}
           selectedKeys={originSelectedKeys}
           getPopupContainer={getPopupContainer}
-          children={this.renderMenus(column.filters)}
+        >
-        ></Menu>
+          {this.renderMenus(column.filters)}
+        </Menu>
         <div class={`${prefixCls}-dropdown-btns`}>
           <a class={`${prefixCls}-dropdown-link confirm`} onClick={this.handleConfirm}>
             {locale.filterConfirm}

components/table/interface.ts

@@ -181,10 +181,10 @@ export interface TableState {
 }
 
 export interface TransformCellTextProps {
-  text: any,
+  text: any;
-  column: ColumnProps,
+  column: ColumnProps;
-  record: any,
+  record: any;
-  index: number
+  index: number;
 }
 
 // export type SelectionItemSelectFn = (key: string[]) => any;

components/table/style/size.less

@@ -32,13 +32,11 @@
     }
 
     tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
-      margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical -
+      margin: -@padding-vertical -@table-padding-horizontal / 2 -@padding-vertical - 1px;
-        1px;
     }
   }
 }
 
-
 // ================================================================
 // =                            Middle                            =
 // ================================================================

components/tag/__tests__/__snapshots__/demo.test.js.snap

@@ -27,3 +27,17 @@ exports[`renders ./antdv-demo/docs/tag/demo/controlled.md correctly 1`] = `
 `;
 
 exports[`renders ./antdv-demo/docs/tag/demo/hot-tags.md correctly 1`] = `<div><span>Categories:</span><span class="ant-tag ant-tag-checkable">Movies</span><span class="ant-tag ant-tag-checkable">Books</span><span class="ant-tag ant-tag-checkable">Music</span><span class="ant-tag ant-tag-checkable">Sports</span></div>`;
+
+exports[`renders ./antdv-demo/docs/tag/demo/status.md correctly 1`] = `
+<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">Without icon</span></div>
+<div><span class="ant-tag ant-tag-success">success<!----></span><span class="ant-tag ant-tag-processing">processing<!----></span><span class="ant-tag ant-tag-error">error<!----></span><span class="ant-tag ant-tag-warning">warning<!----></span><span class="ant-tag ant-tag-default">default<!----></span></div>
+<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text">With icon</span></div>
+<div><span class="ant-tag ant-tag-success"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> success </span>
+  <!----></span><span class="ant-tag ant-tag-processing"><span role="img" aria-label="sync" class="anticon anticon-sync"><svg class="anticon-spin" data-icon="sync" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"></path></svg></span><span> processing </span>
+  <!----></span><span class="ant-tag ant-tag-error"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> error </span>
+  <!----></span><span class="ant-tag ant-tag-warning"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M464 688a48 48 0 1096 0 48 48 0 10-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z"></path></svg></span><span> warning </span>
+  <!----></span><span class="ant-tag ant-tag-default"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg class="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span><span> waiting </span>
+  <!----></span><span class="ant-tag ant-tag-default"><span role="img" aria-label="minus-circle" class="anticon anticon-minus-circle"><svg class="" data-icon="minus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M696 480H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h368c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span> stop </span>
+  <!----></span>
+</div>
+`;

components/vc-mentions/src/DropdownMenu.jsx

@@ -37,7 +37,8 @@ export default {
         }}
         onBlur={onBlur}
         onFocus={onFocus}
-        children={[
+      >
+        {[
           ...options.map((option, index) => {
             const { value, disabled, children } = option;
             return (
@@ -58,7 +59,7 @@ export default {
             </MenuItem>
           ),
         ].filter(Boolean)}
-      />
+      </Menu>
     );
   },
 };

components/vc-menu/DOMWrap.jsx

@@ -100,7 +100,8 @@ const DOMWrap = {
       // put all the overflowed item inside a submenu
       // with a title of overflow indicator ('...')
       const copy = getSlot(this)[0];
-      const { title, ...rest } = getAllProps(copy); // eslint-disable-line no-unused-vars
+      const allProps = getAllProps(copy) || {};
+      const { title, extraProps, ...rest } = { ...allProps, ...allProps.extraProps }; // eslint-disable-line no-unused-vars
       let style = {};
       let key = `${keyPrefix}-overflowed-indicator`;
       let eventKey = `${keyPrefix}-overflowed-indicator`;
@@ -136,7 +137,6 @@ const DOMWrap = {
         key,
         style,
       };
-
       return <SubMenu {...subMenuProps}>{overflowedItems}</SubMenu>;
     },
 

components/vc-menu/Divider.jsx

@@ -16,7 +16,7 @@ export default {
     };
   },
   render() {
-    const { rootPrefixCls } = {...this.$props, ...this.injectExtraProps};
+    const { rootPrefixCls } = { ...this.$props, ...this.injectExtraProps };
     const { class: className = '', style } = this.$attrs;
     return <li class={[className, `${rootPrefixCls}-item-divider`]} style={style} />;
   },

components/vc-menu/FunctionProvider.jsx

@@ -1,10 +1,17 @@
 // import PropTypes from '../_util/vue-types';
-import { provide, reactive } from 'vue';
+import { computed, provide } from 'vue';
+import { propTypes } from '../vc-progress/src/types';
 export const injectExtraPropsKey = Symbol();
 const FunctionProvider = {
   inheritAttrs: false,
-  setup(props, { slots, attrs }) {
+  props: {
-    provide(injectExtraPropsKey, reactive(attrs));
+    extraProps: propTypes.object,
+  },
+  setup(props, { slots }) {
+    provide(
+      injectExtraPropsKey,
+      computed(() => props.extraProps),
+    );
     return () => slots.default?.();
   },
 };

components/vc-menu/InjectExtraProps.js

@@ -0,0 +1,42 @@
+import { createVNode, defineComponent, inject, provide } from 'vue';
+import { injectExtraPropsKey } from './FunctionProvider';
+
+export default function wrapWithConnect(WrappedComponent) {
+  const tempProps = WrappedComponent.props || {};
+  const props = {};
+  Object.keys(tempProps).forEach(k => {
+    props[k] = { ...tempProps[k], required: false };
+  });
+  const Connect = {
+    name: `Connect_${WrappedComponent.name}`,
+    inheritAttrs: false,
+    props,
+    setup(props) {
+      provide(injectExtraPropsKey, undefined); // 断掉 injectExtraPropsKey 的依赖
+      return {
+        props,
+        injectExtraProps: injectExtraPropsKey ? inject(injectExtraPropsKey, () => ({})) : {},
+      };
+    },
+    methods: {
+      getWrappedInstance() {
+        return this.$refs.wrappedInstance;
+      },
+    },
+    render() {
+      const { $slots = {}, $attrs } = this;
+      const props = { ...this.props, ...this.injectExtraProps };
+      const wrapProps = {
+        ...$attrs,
+        ...props,
+        ref: 'wrappedInstance',
+      };
+      // const slots = {};
+      // for (let [key, value] of Object.entries($slots)) {
+      //   slots[key] = () => value();
+      // }
+      return createVNode(WrappedComponent, wrapProps, $slots);
+    },
+  };
+  return defineComponent(Connect);
+}

components/vc-menu/Menu.jsx

@@ -1,10 +1,18 @@
 import PropTypes from '../_util/vue-types';
-import { Provider, create } from '../_util/store';
+import { default as SubPopupMenu } from './SubPopupMenu';
-import { default as SubPopupMenu, getActiveKey } from './SubPopupMenu';
 import BaseMixin from '../_util/BaseMixin';
-import hasProp, { getOptionProps, getComponent, filterEmpty } from '../_util/props-util';
+import hasProp, { getOptionProps, getComponent } from '../_util/props-util';
 import commonPropsType from './commonPropsType';
-import { defineComponent, provide } from 'vue';
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  provide,
+  reactive,
+  ref,
+  toRaw,
+  watch,
+} from 'vue';
 
 const Menu = {
   name: 'Menu',
@@ -15,43 +23,81 @@ const Menu = {
     selectable: PropTypes.looseBool.def(true),
   },
   mixins: [BaseMixin],
-  data() {
+  setup(props) {
-    const props = getOptionProps(this);
+    const menuChildrenInfo = reactive({});
-    let selectedKeys = props.defaultSelectedKeys;
+    const selectedKeys = ref(props.selectedKeys || props.defaultSelectedKeys || []);
-    let openKeys = props.defaultOpenKeys;
+    const openKeys = ref(props.openKeys || props.defaultOpenKeys || []);
-    if ('selectedKeys' in props) {
+    //  computed(() => {
-      selectedKeys = props.selectedKeys || [];
+    //   return props.openKeys || props.defaultOpenKeys || [];
-    }
+    // });
-    if ('openKeys' in props) {
+    watch(
-      openKeys = props.openKeys || [];
+      () => props.selectedKeys,
-    }
+      () => {
-
+        selectedKeys.value = props.selectedKeys;
-    this.store = create({
+      },
+    );
+    watch(
+      () => props.openKeys,
+      () => {
+        openKeys.value = props.openKeys;
+      },
+    );
+    const activeKey = reactive({
+      '0-menu-': props.activeKey,
+    });
+    const defaultActiveFirst = reactive({});
+    const addChildrenInfo = (key, info) => {
+      menuChildrenInfo[key] = info;
+    };
+    const removeChildrenInfo = key => {
+      delete menuChildrenInfo[key];
+    };
+    const getActiveKey = key => {
+      return key;
+    }; // TODO
+    const selectedParentUniKeys = ref([]);
+    watch(menuChildrenInfo, () => {
+      const keys = Object.values(menuChildrenInfo)
+        .filter(info => info.isSelected)
+        .reduce((allKeys, { parentUniKeys = [] }) => {
+          return [...allKeys, ...toRaw(parentUniKeys)];
+        }, []);
+      selectedParentUniKeys.value = keys || [];
+    });
+    const store = reactive({
       selectedKeys,
       openKeys,
-      activeKey: {
+      activeKey,
-        '0-menu-': getActiveKey({ ...props, children: props.children || [] }, props.activeKey),
+      defaultActiveFirst,
-      },
+      menuChildrenInfo,
+      selectedParentUniKeys,
+      addChildrenInfo,
+      removeChildrenInfo,
+      getActiveKey,
     });
-
+    const ins = getCurrentInstance();
-    // this.isRootMenu = true // 声明在props上
+    const getEl = () => {
-    return {};
+      return ins.vnode.el;
-  },
+    };
-  created() {
+    provide('menuStore', store);
-    provide('parentMenu', this);
+    provide(
-  },
+      'parentMenu',
-  mounted() {
+      reactive({
-    this.updateMiniStore();
+        isRootMenu: computed(() => props.isRootMenu),
-  },
+        getPopupContainer: computed(() => props.getPopupContainer),
-  updated() {
+        getEl,
-    this.updateMiniStore();
+      }),
+    );
+    return {
+      store,
+    };
   },
   methods: {
     handleSelect(selectInfo) {
       const props = this.$props;
       if (props.selectable) {
         // root menu
-        let selectedKeys = this.store.getState().selectedKeys;
+        let selectedKeys = this.store.selectedKeys;
         const selectedKey = selectInfo.key;
         if (props.multiple) {
           selectedKeys = selectedKeys.concat([selectedKey]);
@@ -59,9 +105,7 @@ const Menu = {
           selectedKeys = [selectedKey];
         }
         if (!hasProp(this, 'selectedKeys')) {
-          this.store.setState({
+          this.store.selectedKeys = selectedKeys;
-            selectedKeys,
-          });
         }
         this.__emit('select', {
           ...selectInfo,
@@ -80,7 +124,7 @@ const Menu = {
       this.innerMenu.getWrappedInstance().onKeyDown(e, callback);
     },
     onOpenChange(event) {
-      const openKeys = this.store.getState().openKeys.concat();
+      const openKeys = this.store.openKeys.concat();
       let changed = false;
       const processSingle = e => {
         let oneChanged = false;
@@ -106,7 +150,7 @@ const Menu = {
       }
       if (changed) {
         if (!hasProp(this, 'openKeys')) {
-          this.store.setState({ openKeys });
+          this.store.openKeys = openKeys;
         }
         this.__emit('openChange', openKeys);
       }
@@ -115,16 +159,14 @@ const Menu = {
     handleDeselect(selectInfo) {
       const props = this.$props;
       if (props.selectable) {
-        const selectedKeys = this.store.getState().selectedKeys.concat();
+        const selectedKeys = this.store.selectedKeys.concat();
         const selectedKey = selectInfo.key;
         const index = selectedKeys.indexOf(selectedKey);
         if (index !== -1) {
           selectedKeys.splice(index, 1);
         }
         if (!hasProp(this, 'selectedKeys')) {
-          this.store.setState({
+          this.store.selectedKeys = selectedKeys;
-            selectedKeys,
-          });
         }
         this.__emit('deselect', {
           ...selectInfo,
@@ -142,19 +184,6 @@ const Menu = {
       }
       return transitionName;
     },
-    updateMiniStore() {
-      const props = getOptionProps(this);
-      if ('selectedKeys' in props) {
-        this.store.setState({
-          selectedKeys: props.selectedKeys || [],
-        });
-      }
-      if ('openKeys' in props) {
-        this.store.setState({
-          openKeys: props.openKeys || [],
-        });
-      }
-    },
     saveInnerMenu(ref) {
       this.innerMenu = ref;
     },
@@ -171,16 +200,14 @@ const Menu = {
       expandIcon: getComponent(this, 'expandIcon', props),
       overflowedIndicator: getComponent(this, 'overflowedIndicator', props) || <span>···</span>,
       openTransitionName: this.getOpenTransitionName(),
-      children: filterEmpty(props.children),
       onClick: this.handleClick,
       onOpenChange: this.onOpenChange,
       onDeselect: this.handleDeselect,
       onSelect: this.handleSelect,
       ref: this.saveInnerMenu,
+      store: this.store,
     };
-
+    return <SubPopupMenu {...subPopupMenuProps} v-slots={this.$slots} />;
-    const subPopupMenu = <SubPopupMenu {...subPopupMenuProps} />;
-    return <Provider store={this.store}>{subPopupMenu}</Provider>;
   },
 };
 

components/vc-menu/MenuItem.jsx

@@ -2,11 +2,10 @@ import PropTypes from '../_util/vue-types';
 import KeyCode from '../_util/KeyCode';
 import BaseMixin from '../_util/BaseMixin';
 import scrollIntoView from 'dom-scroll-into-view';
-import { connect } from '../_util/store';
 import { noop, menuAllProps } from './util';
 import { getComponent, getSlot, findDOMNode } from '../_util/props-util';
-import { inject } from 'vue';
+import { computed, defineComponent, inject, onBeforeUnmount, onMounted } from 'vue';
-import { injectExtraPropsKey } from './FunctionProvider';
+import InjectExtraProps from './InjectExtraProps';
 const props = {
   attribute: PropTypes.object,
   rootPrefixCls: PropTypes.string,
@@ -21,36 +20,56 @@ const props = {
   mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']),
   multiple: PropTypes.looseBool,
   value: PropTypes.any,
-  isSelected: PropTypes.looseBool,
   manualRef: PropTypes.func.def(noop),
   role: PropTypes.any,
   subMenuKey: PropTypes.string,
   itemIcon: PropTypes.any,
+  parentUniKeys: PropTypes.array.def(() => []),
+  parentUniKey: PropTypes.string,
   // clearSubMenuTimers: PropTypes.func.def(noop),
 };
-const MenuItem = {
+let indexGuid = 0;
+const MenuItem = defineComponent({
   name: 'AMenuItem',
+  mixins: [BaseMixin],
   inheritAttrs: false,
   props,
-  mixins: [BaseMixin],
   isMenuItem: true,
-  setup() {
+  setup(props) {
-    return { parentMenu: inject('parentMenu', undefined) };
+    const uniKey = `menu_item_${++indexGuid}`;
+    const store = inject('menuStore', () => ({}));
+    const isSelected = computed(() => store.selectedKeys.indexOf(props.eventKey) !== -1);
+    onMounted(() => {
+      store.addChildrenInfo(
+        uniKey,
+        computed(() => ({
+          parentUniKeys: props.parentUniKeys,
+          parentUniKey: props.parentUniKey,
+          eventKey: props.eventKey,
+          isSelected: isSelected.value,
+          disabled: props.disabled,
+        })),
+      );
+    });
+    onBeforeUnmount(() => {
+      store.removeChildrenInfo(uniKey);
+    });
+
+    return {
+      parentMenu: inject('parentMenu', undefined),
+      isSelected,
+    };
   },
   created() {
     this.prevActive = this.active;
     // invoke customized ref to expose component to mixin
     this.callRef();
   },
-  mounted() {
-    this.updateParentMenuSelectedStatus();
-  },
   updated() {
-    this.updateParentMenuSelectedStatus();
     this.$nextTick(() => {
       const { active, parentMenu, eventKey } = this;
       if (!this.prevActive && active && (!parentMenu || !parentMenu[`scrolled-${eventKey}`])) {
-        scrollIntoView(findDOMNode(this.node), findDOMNode(parentMenu), {
+        scrollIntoView(findDOMNode(this.node), parentMenu.getEl(), {
           onlyScrollIfNeeded: true,
         });
         parentMenu[`scrolled-${eventKey}`] = true;
@@ -61,17 +80,7 @@ const MenuItem = {
     });
     this.callRef();
   },
-  beforeUnmount() {
-    this.updateParentMenuSelectedStatus(false);
-    const props = this.$props;
-    this.__emit('destroy', props.eventKey);
-  },
   methods: {
-    updateParentMenuSelectedStatus(status = this.isSelected) {
-      if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
-        this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
-      }
-    },
     onKeyDown(e) {
       const keyCode = e.keyCode;
       if (keyCode === KeyCode.ENTER) {
@@ -105,11 +114,12 @@ const MenuItem = {
     },
 
     onClick(e) {
-      const { eventKey, multiple, isSelected } = this.$props;
+      const { eventKey, multiple } = this.$props;
+      const { isSelected } = this;
       const info = {
         key: eventKey,
         keyPath: [eventKey],
-        item: { ...this.$props },
+        item: this,
         domEvent: e,
       };
 
@@ -156,8 +166,8 @@ const MenuItem = {
     const className = {
       [cls]: !!cls,
       [this.getPrefixCls()]: true,
-      [this.getActiveClassName()]: !props.disabled && props.active,
+      [this.getActiveClassName()]: !props.disabled && this.active,
-      [this.getSelectedClassName()]: props.isSelected,
+      [this.getSelectedClassName()]: this.isSelected,
       [this.getDisabledClassName()]: props.disabled,
     };
     let attrs = {
@@ -171,7 +181,7 @@ const MenuItem = {
       attrs = {
         ...attrs,
         role: 'option',
-        'aria-selected': props.isSelected,
+        'aria-selected': this.isSelected,
       };
     } else if (props.role === null || props.role === 'none') {
       // sometimes we want to specify role inside <li/> element
@@ -199,7 +209,6 @@ const MenuItem = {
       ...mouseEvent,
       ref: this.saveNode,
     };
-    delete liProps.children;
     return (
       <li {...liProps} style={styles} class={className}>
         {getSlot(this)}
@@ -207,15 +216,7 @@ const MenuItem = {
       </li>
     );
   },
-};
+});
 
-const connected = connect(
+export default InjectExtraProps(MenuItem);
-  ({ activeKey, selectedKeys }, { eventKey, subMenuKey }) => ({
-    active: activeKey[subMenuKey] === eventKey,
-    isSelected: selectedKeys.indexOf(eventKey) !== -1,
-  }),
-  injectExtraPropsKey,
-)(MenuItem);
-
-export default connected;
 export { props as menuItemProps };

components/vc-menu/SubMenu.jsx

@@ -1,17 +1,25 @@
-import { inject, provide } from 'vue';
+import {
+  computed,
+  defineComponent,
+  getCurrentInstance,
+  inject,
+  onBeforeUnmount,
+  onMounted,
+  provide,
+  reactive,
+} from 'vue';
 import omit from 'omit.js';
 import PropTypes from '../_util/vue-types';
 import Trigger from '../vc-trigger';
 import KeyCode from '../_util/KeyCode';
-import { connect } from '../_util/store';
 import SubPopupMenu from './SubPopupMenu';
 import placements from './placements';
 import BaseMixin from '../_util/BaseMixin';
-import { getComponent, filterEmpty, getSlot, splitAttrs, findDOMNode } from '../_util/props-util';
+import { getComponent, splitAttrs, findDOMNode, getSlot } from '../_util/props-util';
 import { requestAnimationTimeout, cancelAnimationTimeout } from '../_util/requestAnimationTimeout';
-import { noop, getMenuIdFromSubMenuEventKey } from './util';
+import { noop, getMenuIdFromSubMenuEventKey, loopMenuItemRecursively } from './util';
 import { getTransitionProps, Transition } from '../_util/transition';
-import { injectExtraPropsKey } from './FunctionProvider';
+import InjectExtraProps from './InjectExtraProps';
 
 let guid = 0;
 const popupPlacementMap = {
@@ -23,33 +31,27 @@ const popupPlacementMap = {
 
 const updateDefaultActiveFirst = (store, eventKey, defaultActiveFirst) => {
   const menuId = getMenuIdFromSubMenuEventKey(eventKey);
-  const state = store.getState();
+  store.defaultActiveFirst[menuId] = defaultActiveFirst;
-  store.setState({
-    defaultActiveFirst: {
-      ...state.defaultActiveFirst,
-      [menuId]: defaultActiveFirst,
-    },
-  });
 };
-
+let indexGuid = 0;
-const SubMenu = {
+const SubMenu = defineComponent({
   name: 'SubMenu',
+  mixins: [BaseMixin],
   inheritAttrs: false,
+  isSubMenu: true,
   props: {
     title: PropTypes.any,
-    selectedKeys: PropTypes.array.def([]),
     openKeys: PropTypes.array.def([]),
     openChange: PropTypes.func.def(noop),
     rootPrefixCls: PropTypes.string,
     eventKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     multiple: PropTypes.looseBool,
-    active: PropTypes.looseBool, // TODO: remove
     isRootMenu: PropTypes.looseBool.def(false),
     index: PropTypes.number,
     triggerSubMenuAction: PropTypes.string,
     popupClassName: PropTypes.string,
     getPopupContainer: PropTypes.func,
-    forceSubMenuRender: PropTypes.looseBool.def(true),
+    forceSubMenuRender: PropTypes.looseBool.def(false),
     openAnimation: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
     disabled: PropTypes.looseBool,
     subMenuOpenDelay: PropTypes.number.def(0.1),
@@ -58,8 +60,6 @@ const SubMenu = {
     inlineIndent: PropTypes.number.def(24),
     openTransitionName: PropTypes.string,
     popupOffset: PropTypes.array,
-    isOpen: PropTypes.looseBool,
-    store: PropTypes.object,
     mode: PropTypes.oneOf([
       'horizontal',
       'vertical',
@@ -73,20 +73,58 @@ const SubMenu = {
     expandIcon: PropTypes.any,
     subMenuKey: PropTypes.string,
     theme: PropTypes.string,
+    parentUniKeys: PropTypes.array.def(() => []),
+    parentUniKey: PropTypes.string,
   },
-  mixins: [BaseMixin],
+
   isSubMenu: true,
-  setup() {
+  setup(props) {
-    return { parentMenu: inject('parentMenu', undefined) };
+    const uniKey = `sub_menu_${++indexGuid}`;
-  },
+    const store = inject('menuStore', () => ({}));
-  created() {
+    onMounted(() => {
-    provide('parentMenu', this);
+      store.addChildrenInfo(
+        uniKey,
+        computed(() => ({
+          parentUniKeys: props.parentUniKeys,
+          parentUniKey: props.parentUniKey,
+          eventKey: props.eventKey,
+          disabled: props.disabled,
+        })),
+      );
+    });
+    onBeforeUnmount(() => {
+      store.removeChildrenInfo(uniKey);
+    });
+    const isChildrenSelected = computed(() => {
+      return store.selectedParentUniKeys.indexOf(uniKey) !== -1;
+    });
+    const ins = getCurrentInstance();
+    const getEl = () => {
+      return ins.vnode.el;
+    };
+    provide(
+      'parentMenu',
+      reactive({
+        isRootMenu: computed(() => props.isRootMenu),
+        getPopupContainer: props.getPopupContainer,
+        getEl,
+      }),
+    );
+    return {
+      parentMenu: inject('parentMenu', undefined),
+      store,
+      isChildrenSelected,
+      childrenUniKeys: [...props.parentUniKeys, uniKey],
+      uniKey,
+      isOpen: computed(() => store.openKeys.indexOf(props.eventKey) > -1),
+      active: computed(() => store.activeKey[props.subMenuKey] === props.eventKey),
+    };
   },
   data() {
     const props = this.$props;
-    const store = props.store;
+    const store = this.store;
     const eventKey = props.eventKey;
-    const defaultActiveFirst = store.getState().defaultActiveFirst;
+    const defaultActiveFirst = store.defaultActiveFirst;
     let value = false;
 
     if (defaultActiveFirst) {
@@ -98,32 +136,21 @@ const SubMenu = {
     this.haveRendered = undefined;
     this.haveOpened = undefined;
     this.subMenuTitle = undefined;
-    return {
+    return {};
-      // defaultActiveFirst: false,
-      childrenSelectedStatus: {},
-    };
-  },
-  computed: {
-    isChildrenSelected() {
-      return Object.values(this.childrenSelectedStatus).find(status => status);
-    },
   },
   mounted() {
     this.$nextTick(() => {
       this.handleUpdated();
     });
-    this.updateParentMenuSelectedStatus();
   },
 
   updated() {
     this.$nextTick(() => {
       this.handleUpdated();
     });
-    this.updateParentMenuSelectedStatus();
   },
 
   beforeUnmount() {
-    this.updateParentMenuSelectedStatus(false);
     const { eventKey } = this;
     this.__emit('destroy', eventKey);
 
@@ -140,51 +167,40 @@ const SubMenu = {
     }
   },
   methods: {
-    updateParentMenuSelectedStatus(status = this.isChildrenSelected) {
+    isChildrenSelected2() {
-      if (this.parentMenu && this.parentMenu.setChildrenSelectedStatus) {
+      if (this.haveOpened) return this.isChildrenSelected;
-        this.parentMenu.setChildrenSelectedStatus(this.eventKey, status);
+      const ret = { find: false };
-      }
+      loopMenuItemRecursively(getSlot(this), this.store.selectedKeys, ret);
-    },
+      return ret.find;
-    setChildrenSelectedStatus(key, status) {
-      if (!status) {
-        delete this.childrenSelectedStatus[key];
-      } else {
-        this.childrenSelectedStatus[key] = status;
-      }
     },
     handleUpdated() {
-      const { mode, parentMenu, manualRef } = this;
+      const { mode, manualRef } = this.$props;
-
       // invoke customized ref to expose component to mixin
       if (manualRef) {
         manualRef(this);
       }
-
+      if (mode !== 'horizontal' || !this.parentMenu.isRootMenu || !this.isOpen) {
-      if (mode !== 'horizontal' || !parentMenu.isRootMenu || !this.isOpen) {
         return;
       }
-
       this.minWidthTimeout = requestAnimationTimeout(() => this.adjustWidth(), 0);
     },
 
     onKeyDown(e) {
       const keyCode = e.keyCode;
       const menu = this.menuInstance;
-      const { store, isOpen } = this.$props;
+      const { isOpen } = this;
-
       if (keyCode === KeyCode.ENTER) {
         this.onTitleClick(e);
-        updateDefaultActiveFirst(store, this.eventKey, true);
+        updateDefaultActiveFirst(this.store, this.$props.eventKey, true);
         return true;
       }
-
       if (keyCode === KeyCode.RIGHT) {
         if (isOpen) {
           menu.onKeyDown(e);
         } else {
           this.triggerOpenChange(true);
           // need to update current menu's defaultActiveFirst value
-          updateDefaultActiveFirst(store, this.eventKey, true);
+          updateDefaultActiveFirst(this.store, this.$props.eventKey, true);
         }
         return true;
       }
@@ -213,8 +229,8 @@ const SubMenu = {
     },
 
     onMouseEnter(e) {
-      const { eventKey: key, store } = this.$props;
+      const { eventKey: key } = this.$props;
-      updateDefaultActiveFirst(store, key, false);
+      updateDefaultActiveFirst(this.store, key, false);
       this.__emit('mouseenter', {
         key,
         domEvent: e,
@@ -222,7 +238,7 @@ const SubMenu = {
     },
 
     onMouseLeave(e) {
-      const { eventKey } = this;
+      const { eventKey } = this.$props;
       this.__emit('mouseleave', {
         key: eventKey,
         domEvent: e,
@@ -242,7 +258,7 @@ const SubMenu = {
     },
 
     onTitleMouseLeave(e) {
-      const { eventKey } = this;
+      const { eventKey } = this.$props;
       this.__emit('itemHover', {
         key: eventKey,
         hover: false,
@@ -254,7 +270,7 @@ const SubMenu = {
     },
 
     onTitleClick(e) {
-      const { triggerSubMenuAction, eventKey, isOpen, store } = this.$props;
+      const { triggerSubMenuAction, eventKey } = this.$props;
       this.__emit('titleClick', {
         key: eventKey,
         domEvent: e,
@@ -262,8 +278,8 @@ const SubMenu = {
       if (triggerSubMenuAction === 'hover') {
         return;
       }
-      this.triggerOpenChange(!isOpen, 'click');
+      this.triggerOpenChange(!this.isOpen, 'click');
-      updateDefaultActiveFirst(store, eventKey, false);
+      updateDefaultActiveFirst(this.store, eventKey, false);
     },
 
     onSubMenuClick(info) {
@@ -301,22 +317,12 @@ const SubMenu = {
         keyPath: (info.keyPath || []).concat(this.$props.eventKey),
       };
     },
-
-    // triggerOpenChange (open, type) {
-    //   const key = this.$props.eventKey
-    //   this.__emit('openChange', {
-    //     key,
-    //     item: this,
-    //     trigger: type,
-    //     open,
-    //   })
-    // },
     triggerOpenChange(open, type) {
       const key = this.$props.eventKey;
       const openChange = () => {
         this.__emit('openChange', {
           key,
-          item: this,
+          item: this.$props,
           trigger: type,
           open,
         });
@@ -330,16 +336,6 @@ const SubMenu = {
         openChange();
       }
     },
-
-    // isChildrenSelected(children) {
-    //   const ret = { find: false };
-    //   loopMenuItemRecursively(children, this.$props.selectedKeys, ret);
-    //   return ret.find;
-    // },
-    // isOpen () {
-    //   return this.$props.openKeys.indexOf(this.$props.eventKey) !== -1
-    // },
-
     adjustWidth() {
       /* istanbul ignore if */
       if (!this.subMenuTitle || !this.menuInstance) {
@@ -356,16 +352,15 @@ const SubMenu = {
     saveSubMenuTitle(subMenuTitle) {
       this.subMenuTitle = subMenuTitle;
     },
-    renderChildren(children) {
+    renderChildren() {
       const props = { ...this.$props, ...this.$attrs };
 
       const subPopupMenuProps = {
         mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
-        visible: props.isOpen,
+        visible: this.isOpen,
         level: props.level + 1,
         inlineIndent: props.inlineIndent,
         focusable: false,
-        selectedKeys: props.selectedKeys,
         eventKey: `${props.eventKey}-menu-`,
         openKeys: props.openKeys,
         openTransitionName: props.openTransitionName,
@@ -375,20 +370,18 @@ const SubMenu = {
         forceSubMenuRender: props.forceSubMenuRender,
         triggerSubMenuAction: props.triggerSubMenuAction,
         builtinPlacements: props.builtinPlacements,
-        defaultActiveFirst: props.store.getState().defaultActiveFirst[
-          getMenuIdFromSubMenuEventKey(props.eventKey)
-        ],
         multiple: props.multiple,
         prefixCls: props.rootPrefixCls,
         manualRef: this.saveMenuInstance,
         itemIcon: getComponent(this, 'itemIcon'),
         expandIcon: getComponent(this, 'expandIcon'),
-        children,
         onClick: this.onSubMenuClick,
         onSelect: props.onSelect || noop,
         onDeselect: props.onDeselect || noop,
         onOpenChange: props.onOpenChange || noop,
         id: this.internalMenuId,
+        parentUniKeys: this.childrenUniKeys,
+        parentUniKey: this.uniKey,
       };
       const haveRendered = this.haveRendered;
       this.haveRendered = true;
@@ -424,7 +417,7 @@ const SubMenu = {
       }
       return (
         <Transition {...transitionProps}>
-          <SubPopupMenu v-show={props.isOpen} {...subPopupMenuProps} />
+          <SubPopupMenu v-show={this.isOpen} {...subPopupMenuProps} v-slots={this.$slots} />
         </Transition>
       );
     },
@@ -433,19 +426,18 @@ const SubMenu = {
   render() {
     const props = { ...this.$props, ...this.$attrs };
     const { onEvents } = splitAttrs(props);
-    const isOpen = props.isOpen;
+    const isOpen = this.isOpen;
     const prefixCls = this.getPrefixCls();
     const isInlineMode = props.mode === 'inline';
-    const childrenTemp = filterEmpty(getSlot(this));
+    const children = this.renderChildren();
-    const children = this.renderChildren(childrenTemp);
     const className = {
       [prefixCls]: true,
       [`${prefixCls}-${props.mode}`]: true,
       [props.class]: !!props.class,
       [this.getOpenClassName()]: isOpen,
-      [this.getActiveClassName()]: props.active || (isOpen && !isInlineMode),
+      [this.getActiveClassName()]: this.active || (isOpen && !isInlineMode),
       [this.getDisabledClassName()]: props.disabled,
-      [this.getSelectedClassName()]: this.isChildrenSelected,
+      [this.getSelectedClassName()]: this.isChildrenSelected || this.isChildrenSelected2(),
     };
 
     if (!this.internalMenuId) {
@@ -511,7 +503,6 @@ const SubMenu = {
         {icon || <i class={`${prefixCls}-arrow`} />}
       </div>
     );
-
     const getPopupContainer = this.parentMenu.isRootMenu
       ? this.parentMenu.getPopupContainer
       : triggerNode => triggerNode.parentNode;
@@ -555,16 +546,6 @@ const SubMenu = {
       </li>
     );
   },
-};
+});
 
-const connected = connect(({ openKeys, activeKey, selectedKeys }, { eventKey, subMenuKey }) => {
+export default InjectExtraProps(SubMenu);
-  return {
-    isOpen: openKeys.indexOf(eventKey) > -1,
-    active: activeKey[subMenuKey] === eventKey,
-    selectedKeys,
-  };
-}, injectExtraPropsKey)(SubMenu);
-
-connected.isSubMenu = true;
-
-export default connected;

components/vc-menu/SubPopupMenu.jsx

@@ -1,19 +1,19 @@
 import { Comment, inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { connect } from '../_util/store';
 import BaseMixin from '../_util/BaseMixin';
 import KeyCode from '../_util/KeyCode';
 import classNames from '../_util/classNames';
-import { getKeyFromChildrenIndex, loopMenuItem, noop, isMobileDevice, menuAllProps } from './util';
+import { getKeyFromChildrenIndex, noop, isMobileDevice, menuAllProps } from './util';
 import DOMWrap from './DOMWrap';
 import {
   initDefaultProps,
   getOptionProps,
   getComponent,
   splitAttrs,
-  getPropsData,
+  getSlot,
 } from '../_util/props-util';
 import FunctionProvider from './FunctionProvider';
+// import { getActiveKey } from '../vc-tabs/src/utils';
 function allDisabled(arr) {
   if (!arr.length) {
     return true;
@@ -24,13 +24,7 @@ function allDisabled(arr) {
 }
 
 function updateActiveKey(store, menuId, activeKey) {
-  const state = store.getState();
+  store.activeKey[menuId] = activeKey;
-  store.setState({
-    activeKey: {
-      ...state.activeKey,
-      [menuId]: activeKey,
-    },
-  });
 }
 
 function getEventKey(props) {
@@ -44,34 +38,34 @@ export function saveRef(key, c) {
     this.instanceArray[index] = c;
   }
 }
-export function getActiveKey(props, originalActiveKey) {
+// export function getActiveKey(props, originalActiveKey) {
-  let activeKey = originalActiveKey;
+//   let activeKey = originalActiveKey;
-  const { eventKey, defaultActiveFirst, children } = props;
+//   const { eventKey, defaultActiveFirst, children } = props;
-  if (activeKey !== undefined && activeKey !== null) {
+//   if (activeKey !== undefined && activeKey !== null) {
-    let found;
+//     let found;
-    loopMenuItem(children, (c, i) => {
+//     loopMenuItem(children, (c, i) => {
-      const propsData = getPropsData(c);
+//       const propsData = getPropsData(c);
-      if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
+//       if (c && !propsData.disabled && activeKey === getKeyFromChildrenIndex(c, eventKey, i)) {
-        found = true;
+//         found = true;
-      }
+//       }
-    });
+//     });
-    if (found) {
+//     if (found) {
-      return activeKey;
+//       return activeKey;
-    }
+//     }
-  }
+//   }
-  activeKey = null;
+//   activeKey = null;
-  if (defaultActiveFirst) {
+//   if (defaultActiveFirst) {
-    loopMenuItem(children, (c, i) => {
+//     loopMenuItem(children, (c, i) => {
-      const propsData = getPropsData(c);
+//       const propsData = getPropsData(c);
-      const noActiveKey = activeKey === null || activeKey === undefined;
+//       const noActiveKey = activeKey === null || activeKey === undefined;
-      if (noActiveKey && c && !propsData.disabled) {
+//       if (noActiveKey && c && !propsData.disabled) {
-        activeKey = getKeyFromChildrenIndex(c, eventKey, i);
+//         activeKey = getKeyFromChildrenIndex(c, eventKey, i);
-      }
+//       }
-    });
+//     });
-    return activeKey;
+//     return activeKey;
-  }
+//   }
-  return activeKey;
+//   return activeKey;
-}
+// }
 
 const SubPopupMenu = {
   name: 'SubPopupMenu',
@@ -89,14 +83,12 @@ const SubPopupMenu = {
       openKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
       visible: PropTypes.looseBool,
       eventKey: PropTypes.string,
-      store: PropTypes.object,
 
       // adding in refactor
       focusable: PropTypes.looseBool,
       multiple: PropTypes.looseBool,
       defaultActiveFirst: PropTypes.looseBool,
       activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
       defaultSelectedKeys: PropTypes.arrayOf(
         PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       ),
@@ -116,7 +108,9 @@ const SubPopupMenu = {
       expandIcon: PropTypes.any,
       overflowedIndicator: PropTypes.any,
       children: PropTypes.any.def([]),
-      forceSubMenuRender: PropTypes.looseBool.def(true),
+      forceSubMenuRender: PropTypes.looseBool.def(false),
+      parentUniKeys: PropTypes.array.def(() => []),
+      parentUniKey: PropTypes.string,
     },
     {
       prefixCls: 'rc-menu',
@@ -131,17 +125,13 @@ const SubPopupMenu = {
 
   mixins: [BaseMixin],
   setup() {
-    return { parentMenu: inject('parentMenu', undefined) };
+    const store = inject('menuStore', () => ({}));
+    return { store };
   },
   created() {
     const props = getOptionProps(this);
     this.prevProps = { ...props };
-    props.store.setState({
+    this.store.activeKey[props.eventKey] = this.store.getActiveKey(props.activeKey);
-      activeKey: {
-        ...props.store.getState().activeKey,
-        [props.eventKey]: getActiveKey(props, props.activeKey),
-      },
-    });
     this.instanceArray = [];
   },
   mounted() {
@@ -154,16 +144,16 @@ const SubPopupMenu = {
     const props = getOptionProps(this);
     const prevProps = this.prevProps;
     const originalActiveKey =
-      'activeKey' in props ? props.activeKey : props.store.getState().activeKey[getEventKey(props)];
+      'activeKey' in props ? props.activeKey : this.store.activeKey[getEventKey(props)];
-    const activeKey = getActiveKey(props, originalActiveKey);
+    const activeKey = this.store.getActiveKey(originalActiveKey);
     if (activeKey !== originalActiveKey) {
-      updateActiveKey(props.store, getEventKey(props), activeKey);
+      updateActiveKey(this.store, getEventKey(props), activeKey);
     } else if ('activeKey' in prevProps) {
       // If prev activeKey is not same as current activeKey,
       // we should set it.
-      const prevActiveKey = getActiveKey(prevProps, prevProps.activeKey);
+      const prevActiveKey = this.store.getActiveKey(prevProps.activeKey);
       if (activeKey !== prevActiveKey) {
-        updateActiveKey(props.store, getEventKey(props), activeKey);
+        updateActiveKey(this.store, getEventKey(props), activeKey);
       }
     }
     this.prevProps = { ...props };
@@ -187,7 +177,7 @@ const SubPopupMenu = {
       }
       if (activeItem) {
         e.preventDefault();
-        updateActiveKey(this.$props.store, getEventKey(this.$props), activeItem.eventKey);
+        updateActiveKey(this.store, getEventKey(this.$props), activeItem.eventKey);
 
         if (typeof callback === 'function') {
           callback(activeItem);
@@ -200,7 +190,7 @@ const SubPopupMenu = {
 
     onItemHover(e) {
       const { key, hover } = e;
-      updateActiveKey(this.$props.store, getEventKey(this.$props), hover ? key : null);
+      updateActiveKey(this.store, getEventKey(this.$props), hover ? key : null);
     },
 
     onDeselect(selectInfo) {
@@ -233,7 +223,7 @@ const SubPopupMenu = {
 
     step(direction) {
       let children = this.getFlatInstanceArray();
-      const activeKey = this.$props.store.getState().activeKey[getEventKey(this.$props)];
+      const activeKey = this.store.activeKey[getEventKey(this.$props)];
       const len = children.length;
       if (!len) {
         return null;
@@ -278,7 +268,7 @@ const SubPopupMenu = {
       if (child.type === Comment) {
         return child;
       }
-      const state = this.$props.store.getState();
+      const state = this.store;
       const props = this.$props;
       const key = getKeyFromChildrenIndex(child, props.eventKey, i);
       const childProps = child.props || {}; // child.props 包含事件
@@ -317,6 +307,8 @@ const SubPopupMenu = {
         onDeselect: this.onDeselect,
         // destroy: this.onDestroy,
         onSelect: this.onSelect,
+        parentUniKeys: this.parentUniKeys,
+        parentUniKey: this.parentUniKey,
       };
       if (props.forceSubMenuRender !== undefined) {
         newChildProps.forceSubMenuRender = props.forceSubMenuRender;
@@ -325,14 +317,14 @@ const SubPopupMenu = {
       if (props.mode === 'inline' || isMobileDevice()) {
         newChildProps.triggerSubMenuAction = 'click';
       }
-      return <FunctionProvider {...newChildProps}>{child}</FunctionProvider>;
+      return <FunctionProvider extraProps={newChildProps}>{child}</FunctionProvider>;
     },
 
     renderMenuItem(c, i, subMenuKey) {
       if (!c) {
         return null;
       }
-      const state = this.$props.store.getState();
+      const state = this.store;
       const extraProps = {
         openKeys: state.openKeys,
         selectedKeys: state.selectedKeys,
@@ -384,11 +376,11 @@ const SubPopupMenu = {
       // ESLint is not smart enough to know that the type of `children` was checked.
       /* eslint-disable */
       <DOMWrap {...domWrapProps}>
-        {props.children.map((c, i) => this.renderMenuItem(c, i, eventKey || '0-menu-'))}
+        {getSlot(this).map((c, i) => this.renderMenuItem(c, i, eventKey || '0-menu-'))}
       </DOMWrap>
       /*eslint -enable */
     );
   },
 };
 
-export default connect(undefined)(SubPopupMenu);
+export default SubPopupMenu;

components/vc-menu/commonPropsType.js

@@ -3,7 +3,6 @@ export default {
   prefixCls: PropTypes.string.def('rc-menu'),
   focusable: PropTypes.looseBool.def(true),
   multiple: PropTypes.looseBool,
-  defaultActiveFirst: PropTypes.looseBool,
   visible: PropTypes.looseBool.def(true),
   activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   selectedKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
@@ -30,7 +29,7 @@ export default {
   theme: PropTypes.oneOf(['light', 'dark']).def('light'),
   getPopupContainer: PropTypes.func,
   openTransitionName: PropTypes.string,
-  forceSubMenuRender: PropTypes.looseBool.def(true),
+  forceSubMenuRender: PropTypes.looseBool.def(false),
   selectable: PropTypes.looseBool,
   isRootMenu: PropTypes.looseBool.def(true),
   builtinPlacements: PropTypes.object.def(() => ({})),
@@ -40,5 +39,4 @@ export default {
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
   onDeselect: PropTypes.func,
-  children: PropTypes.VNodeChild,
 };

components/vc-menu/util.js

@@ -12,21 +12,21 @@ export function getMenuIdFromSubMenuEventKey(eventKey) {
   return `${eventKey}-menu-`;
 }
 
-export function loopMenuItem(children, cb) {
+// export function loopMenuItem(children, cb) {
-  let index = -1;
+//   let index = -1;
-  children.forEach(c => {
+//   children.forEach(c => {
-    index++;
+//     index++;
-    if (c && c.type && c.type.isMenuItemGroup) {
+//     if (c && c.type && c.type.isMenuItemGroup) {
-      c.children.default &&
+//       c.children.default &&
-        c.children.default().forEach(c2 => {
+//         c.children.default().forEach(c2 => {
-          index++;
+//           index++;
-          cb(c2, index);
+//           cb(c2, index);
-        });
+//         });
-    } else {
+//     } else {
-      cb(c, index);
+//       cb(c, index);
-    }
+//     }
-  });
+//   });
-}
+// }
 
 export function loopMenuItemRecursively(children, keys, ret) {
   if (!children || ret.find) {
@@ -113,6 +113,8 @@ export const menuAllProps = [
   'slots',
   'ref',
   'isRootMenu',
+  'parentUniKeys',
+  'parentUniKey',
 ];
 
 // ref: https://github.com/ant-design/ant-design/issues/14007

examples/App.vue

@@ -1,39 +1,30 @@
 <template>
-  <div>
+  <a-dropdown>
-    <demo />
+    <a class="ant-dropdown-link" @click="e => e.preventDefault()">
-  </div>
+      Cascading menu <DownOutlined />
+    </a>
+    <template #overlay>
+      <a-menu>
+        <a-menu-item>1st menu item</a-menu-item>
+        <a-menu-item>2nd menu item</a-menu-item>
+        <a-sub-menu key="test" title="sub menu">
+          <a-menu-item>3rd menu item</a-menu-item>
+          <a-menu-item>4th menu item</a-menu-item>
+        </a-sub-menu>
+        <a-sub-menu title="disabled sub menu" disabled>
+          <a-menu-item>5d menu item</a-menu-item>
+          <a-menu-item>6th menu item</a-menu-item>
+        </a-sub-menu>
+      </a-menu>
+    </template>
+  </a-dropdown>
 </template>
 <script>
-import { defineComponent } from 'vue';
+import { DownOutlined } from '@ant-design/icons-vue';
-import demo from '../antdv-demo/docs/tree-select/demo';
+
-// import Affix from '../components/affix';
+export default {
-export default defineComponent({
   components: {
-    demo,
+    DownOutlined,
-    // Affix,
   },
-  data() {
+};
-    return {
-      visible: false,
-      pStyle: {
-        fontSize: '16px',
-        color: 'rgba(0,0,0,0.85)',
-        lineHeight: '24px',
-        display: 'block',
-        marginBottom: '16px',
-      },
-      pStyle2: {
-        marginBottom: '24px',
-      },
-    };
-  },
-  methods: {
-    showDrawer() {
-      this.visible = true;
-    },
-    onClose() {
-      this.visible = false;
-    },
-  },
-});
 </script>