From d099dea28b85db0fb0fc28f18f04c31f8b67a83c Mon Sep 17 00:00:00 2001
From: MasaoBlue <16271994+MasaoBlue@users.noreply.github.com>
Date: Wed, 8 Jun 2022 11:25:49 +0900
Subject: [PATCH] fix: menu items typings (#35790)

* Fix menu items typings

* add test case for menu item type checking
---
 .../__snapshots__/index.test.js.snap          | 161 ++++++++++++++++++
 components/menu/__tests__/index.test.js       |  42 +++++
 components/menu/__tests__/type.test.tsx       |  40 +++++
 components/menu/hooks/useItems.tsx            |   2 +-
 4 files changed, 244 insertions(+), 1 deletion(-)
 create mode 100644 components/menu/__tests__/type.test.tsx

diff --git a/components/menu/__tests__/__snapshots__/index.test.js.snap b/components/menu/__tests__/__snapshots__/index.test.js.snap
index 724f5ab99f..8f2d757367 100644
--- a/components/menu/__tests__/__snapshots__/index.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/index.test.js.snap
@@ -162,6 +162,167 @@ Array [
 ]
 `;
 
+exports[`Menu all types must be available in the "items" syntax 1`] = `
+Array [
+  <ul
+    class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
+    data-menu-list="true"
+    role="menu"
+    tabindex="0"
+  >
+    <li
+      class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+      role="none"
+    >
+      <div
+        aria-controls="rc-menu-uuid-test-submenu-popup"
+        aria-expanded="true"
+        aria-haspopup="true"
+        class="ant-menu-submenu-title"
+        data-menu-id="rc-menu-uuid-test-submenu"
+        role="menuitem"
+        style="padding-left: 24px;"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content"
+        >
+          Submenu
+        </span>
+        <i
+          class="ant-menu-submenu-arrow"
+        />
+      </div>
+      <ul
+        class="ant-menu ant-menu-sub ant-menu-inline"
+        data-menu-list="true"
+        id="rc-menu-uuid-test-submenu-popup"
+      >
+        <li
+          class="ant-menu-item ant-menu-item-only-child"
+          data-menu-id="rc-menu-uuid-test-submenu-item1"
+          role="menuitem"
+          style="padding-left: 48px;"
+          tabindex="-1"
+        >
+          <span
+            class="ant-menu-title-content"
+          >
+            SubmenuItem 1
+          </span>
+        </li>
+        <li
+          class="ant-menu-item ant-menu-item-only-child"
+          data-menu-id="rc-menu-uuid-test-submenu-item2"
+          role="menuitem"
+          style="padding-left: 48px;"
+          tabindex="-1"
+        >
+          <span
+            class="ant-menu-title-content"
+          >
+            SubmenuItem 2
+          </span>
+        </li>
+      </ul>
+    </li>
+    <li
+      class="ant-menu-item-divider"
+    />
+    <li
+      class="ant-menu-item-group"
+    >
+      <div
+        class="ant-menu-item-group-title"
+        title="Group"
+      >
+        Group
+      </div>
+      <ul
+        class="ant-menu-item-group-list"
+      >
+        <li
+          class="ant-menu-item ant-menu-item-only-child"
+          data-menu-id="rc-menu-uuid-test-group-item"
+          role="menuitem"
+          style="padding-left: 24px;"
+          tabindex="-1"
+        >
+          <span
+            class="ant-menu-title-content"
+          >
+            GroupItem
+          </span>
+        </li>
+        <li
+          class="ant-menu-item-divider"
+        />
+        <li
+          class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+          role="none"
+        >
+          <div
+            aria-controls="rc-menu-uuid-test-group-submenu-popup"
+            aria-expanded="true"
+            aria-haspopup="true"
+            class="ant-menu-submenu-title"
+            data-menu-id="rc-menu-uuid-test-group-submenu"
+            role="menuitem"
+            style="padding-left: 24px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              GroupSubmenu
+            </span>
+            <i
+              class="ant-menu-submenu-arrow"
+            />
+          </div>
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-inline"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-group-submenu-popup"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-group-submenu-item1"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                GroupSubmenuItem 1
+              </span>
+            </li>
+            <li
+              class="ant-menu-item ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-group-submenu-item2"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                GroupSubmenuItem 2
+              </span>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>,
+  <div
+    aria-hidden="true"
+    style="display: none;"
+  />,
+]
+`;
+
 exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = `
 Array [
   <ul
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
index f12df1fc42..6a3a0d53d5 100644
--- a/components/menu/__tests__/index.test.js
+++ b/components/menu/__tests__/index.test.js
@@ -960,4 +960,46 @@ describe('Menu', () => {
 
     expect(wrapper.exists('.bamboo')).toBeTruthy();
   });
+
+  it('all types must be available in the "items" syntax', () => {
+    const wrapper = mount(
+      <Menu
+        mode="inline"
+        defaultOpenKeys={['submenu', 'group-submenu']}
+        items={[
+          {
+            key: 'submenu',
+            label: 'Submenu',
+            children: [
+              { key: 'submenu-item1', label: 'SubmenuItem 1' },
+              { key: 'submenu-item2', label: 'SubmenuItem 2' },
+            ],
+          },
+          { key: 'divider', type: 'divider' },
+          {
+            key: 'group',
+            type: 'group',
+            label: 'Group',
+            children: [
+              {
+                key: 'group-item',
+                label: 'GroupItem',
+              },
+              { key: 'group-divider', type: 'divider' },
+              {
+                key: 'group-submenu',
+                label: 'GroupSubmenu',
+                children: [
+                  { key: 'group-submenu-item1', label: 'GroupSubmenuItem 1' },
+                  { key: 'group-submenu-item2', label: 'GroupSubmenuItem 2' },
+                ],
+              },
+            ],
+          },
+        ]}
+      />,
+    );
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });
diff --git a/components/menu/__tests__/type.test.tsx b/components/menu/__tests__/type.test.tsx
new file mode 100644
index 0000000000..cf3ce5916d
--- /dev/null
+++ b/components/menu/__tests__/type.test.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import Menu from '..';
+
+describe('Menu.typescript', () => {
+  it('Menu.items', () => {
+    const menu = (
+      <Menu
+        items={[
+          { key: 'item', title: 'Item' },
+          {
+            key: 'submenu',
+            theme: 'light',
+            children: [
+              { key: 'submenu-item', title: 'SubmenuItem' },
+              { key: 'submenu-submenu', theme: 'light', children: [] },
+              { key: 'submenu-divider', type: 'divider' },
+              { key: 'submenu-group', type: 'group' },
+              null,
+            ],
+          },
+          {
+            key: 'group',
+            type: 'group',
+            children: [
+              { key: 'group-item', label: 'GroupItem' },
+              { key: 'group-submenu', theme: 'light', children: [] },
+              { key: 'group-divider', type: 'divider' },
+              { key: 'group-group', type: 'group' },
+              null,
+            ],
+          },
+          { key: 'divider', type: 'divider' },
+          null,
+        ]}
+      />
+    );
+
+    expect(menu).toBeTruthy();
+  });
+});
diff --git a/components/menu/hooks/useItems.tsx b/components/menu/hooks/useItems.tsx
index 5b33d8236f..e558dd8243 100644
--- a/components/menu/hooks/useItems.tsx
+++ b/components/menu/hooks/useItems.tsx
@@ -23,7 +23,7 @@ interface SubMenuType extends Omit<RcSubMenuType, 'children'> {
 }
 
 interface MenuItemGroupType extends Omit<RcMenuItemGroupType, 'children'> {
-  children?: MenuItemType[];
+  children?: ItemType[];
   key?: React.Key;
 }