feat: SSR render default fully

Author: zombieJ

package.json

@@ -46,7 +46,7 @@
     "classnames": "2.x",
     "mini-store": "^3.0.1",
     "rc-motion": "^2.4.3",
-    "rc-overflow": "^1.2.0-alpha.10",
+    "rc-overflow": "^1.2.0-alpha.12",
     "rc-trigger": "^5.1.2",
     "rc-util": "^5.12.0",
     "resize-observer-polyfill": "^1.5.0",

src/Menu.tsx

@@ -483,6 +483,7 @@ const Menu: React.FC<MenuProps> = props => {
           ? Overflow.INVALIDATE
           : Overflow.RESPONSIVE
       }
+      ssr="full"
       data-menu-list
       onVisibleChange={newLastIndex => {
         setLastVisibleIndex(newLastIndex);

tests/Keyboard.spec.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { spyElementPrototypes } from 'rc-util/lib/test/domHook';
+import { render } from 'enzyme';
 import { mount } from './util';
 import type { ReactWrapper } from './util';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -41,6 +42,18 @@ describe('Menu.Keyboard', () => {
     });
   }
 
+  it('no data-menu-id by init', () => {
+    const wrapper = render(
+      <Menu mode="inline" openKeys={['light']}>
+        <Menu.SubMenu key="light" title="Light">
+          <Menu.Item key="bamboo">Bamboo</Menu.Item>
+        </Menu.SubMenu>
+      </Menu>,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('keydown works when children change', async () => {
     class App extends React.Component {
       state = {

tests/Responsive.spec.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import KeyCode from 'rc-util/lib/KeyCode';
+import { render } from 'enzyme';
 import ResizeObserver from 'rc-resize-observer';
 import { mount } from './util';
 import Menu, { MenuItem, SubMenu } from '../src';
@@ -16,6 +17,18 @@ describe('Menu.Responsive', () => {
     jest.useRealTimers();
   });
 
+  it('ssr render full', () => {
+    const wrapper = render(
+      <Menu mode="horizontal">
+        <MenuItem key="light">Light</MenuItem>
+        <SubMenu key="bamboo">Bamboo</SubMenu>
+        <MenuItem key="little">Little</MenuItem>
+      </Menu>,
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   it('show rest', () => {
     const onOpenChange = jest.fn();
     const wrapper = mount(

tests/__snapshots__/Keyboard.spec.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Menu.Keyboard no data-menu-id by init 1`] = `
+<ul
+  class="rc-menu rc-menu-root rc-menu-inline"
+  data-menu-list="true"
+  role="menu"
+  tabindex="0"
+>
+  <li
+    class="rc-menu-submenu rc-menu-submenu-inline rc-menu-submenu-open"
+    role="none"
+  >
+    <div
+      aria-expanded="true"
+      aria-haspopup="true"
+      class="rc-menu-submenu-title"
+      role="menuitem"
+      style="padding-left:24px"
+      tabindex="-1"
+      title="Light"
+    >
+      Light
+      <i
+        class="rc-menu-submenu-arrow"
+      />
+    </div>
+    <ul
+      class="rc-menu rc-menu-sub rc-menu-inline"
+      data-menu-list="true"
+    >
+      <li
+        class="rc-menu-item"
+        role="menuitem"
+        style="padding-left:24px"
+        tabindex="-1"
+      >
+        Bamboo
+      </li>
+    </ul>
+  </li>
+</ul>
+`;

tests/__snapshots__/Responsive.spec.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Menu.Responsive ssr render full 1`] = `
+Array [
+  <ul
+    class="rc-menu-overflow rc-menu rc-menu-root rc-menu-horizontal"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
+  >
+    <li
+      class="rc-menu-overflow-item rc-menu-item"
+      role="menuitem"
+      style="opacity:1;order:0"
+      tabindex="-1"
+    >
+      Light
+    </li>
+    <li
+      class="rc-menu-overflow-item rc-menu-submenu rc-menu-submenu-horizontal"
+      role="none"
+      style="opacity:1;order:1"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+    <li
+      class="rc-menu-overflow-item rc-menu-item"
+      role="menuitem"
+      style="opacity:1;order:2"
+      tabindex="-1"
+    >
+      Little
+    </li>
+    <li
+      aria-hidden="true"
+      class="rc-menu-overflow-item rc-menu-overflow-item-rest rc-menu-submenu rc-menu-submenu-horizontal"
+      role="none"
+      style="opacity:0;height:0;overflow-y:hidden;order:9007199254740991;pointer-events:none"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="true"
+        class="rc-menu-submenu-title"
+        role="menuitem"
+        tabindex="-1"
+        title="..."
+      >
+        ...
+        <i
+          class="rc-menu-submenu-arrow"
+        />
+      </div>
+    </li>
+  </ul>,
+  "Bamboo",
+]
+`;