From e5451a95cb07df9146bf1b0db9501767a064e3d0 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 13 Jan 2022 13:34:34 +0800
Subject: [PATCH] feat: dropdown support arrow pointing at center (#33658)

* feat: add pointAtCenter prop for dropdown

* feat: dropdown support arrow pointing at center

* chore: code clean

* chore: use getPlacements in tooltip

* feat: dropdown support 'top' and 'bottom'

* chore: update snapshot

* chore: move placements to util folder

* feat: make 'topCenter' and 'bottomCenter' in Dropdown deprecated

* test: update snapshot

* test: add test for topCenter and bottomCenter
---
 components/{tooltip => _util}/placements.tsx  |    3 +-
 components/breadcrumb/BreadcrumbItem.tsx      |    6 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 1292 ++++++++++++++++-
 .../__tests__/__snapshots__/demo.test.js.snap |   62 +-
 components/dropdown/__tests__/index.test.js   |   20 +
 components/dropdown/demo/arrow-center.md      |   75 +
 components/dropdown/demo/arrow.md             |    8 +-
 components/dropdown/demo/dropdown-button.md   |    2 +-
 components/dropdown/demo/placement.md         |    8 +-
 components/dropdown/dropdown.tsx              |   33 +-
 components/dropdown/index.en-US.md            |    6 +-
 components/dropdown/index.zh-CN.md            |    6 +-
 components/dropdown/style/index.less          |   24 +-
 components/tooltip/index.tsx                  |   14 +-
 package.json                                  |    2 +-
 site/theme/template/Content/MainContent.jsx   |    2 +-
 16 files changed, 1510 insertions(+), 53 deletions(-)
 rename components/{tooltip => _util}/placements.tsx (97%)
 create mode 100644 components/dropdown/demo/arrow-center.md

diff --git a/components/tooltip/placements.tsx b/components/_util/placements.tsx
similarity index 97%
rename from components/tooltip/placements.tsx
rename to components/_util/placements.tsx
index 3fc9152268..eb4dead8a8 100644
--- a/components/tooltip/placements.tsx
+++ b/components/_util/placements.tsx
@@ -42,6 +42,7 @@ export default function getPlacements(config: PlacementsConfig) {
     horizontalArrowShift = 16,
     verticalArrowShift = 8,
     autoAdjustOverflow,
+    arrowPointAtCenter,
   } = config;
   const placementMap: BuildInPlacements = {
     left: {
@@ -94,7 +95,7 @@ export default function getPlacements(config: PlacementsConfig) {
     },
   };
   Object.keys(placementMap).forEach(key => {
-    placementMap[key] = config.arrowPointAtCenter
+    placementMap[key] = arrowPointAtCenter
       ? {
           ...placementMap[key],
           overflow: getOverflowOptions(autoAdjustOverflow),
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index fd29f24a85..860971e847 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
   const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
     if (overlay) {
       return (
-        <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
+        <DropDown overlay={overlay} placement="bottom" {...dropdownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />
@@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
     return (
       <span>
         {link}
-        {separator && (
-          <span className={`${prefixCls}-separator`}>{separator}</span>
-        )}
+        {separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
       </span>
     );
   }
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7ba1062ede..7bb2346334 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -220,7 +220,7 @@ Array [
     type="button"
   >
     <span>
-      bottomCenter
+      bottom
     </span>
   </button>,
   <div>
@@ -860,7 +860,1291 @@ Array [
     type="button"
   >
     <span>
-      topCenter
+      top
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topRight
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/dropdown/demo/arrow-center.md extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomLeft
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottom
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomRight
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topLeft
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <ul
+        class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+        data-menu-list="true"
+        role="menu"
+        tabindex="0"
+      >
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </ul>
+      <div
+        aria-hidden="true"
+        style="display:none"
+      >
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;pointer-events:none"
+          >
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-arrow"
+              >
+                <span
+                  class="ant-tooltip-arrow-content"
+                />
+              </div>
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      top
     </span>
   </button>,
   <div>
@@ -5754,7 +7038,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
           type="button"
         >
           <span>
-            bottomCenter
+            bottom
           </span>
         </button>
         <div>
@@ -6408,7 +7692,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
           type="button"
         >
           <span>
-            topCenter
+            top
           </span>
         </button>
         <div>
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 4e4aa98da4..1ff3a8874c 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -15,7 +15,7 @@ Array [
     type="button"
   >
     <span>
-      bottomCenter
+      bottom
     </span>
   </button>,
   <button
@@ -40,7 +40,61 @@ Array [
     type="button"
   >
     <span>
-      topCenter
+      top
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topRight
+    </span>
+  </button>,
+]
+`;
+
+exports[`renders ./components/dropdown/demo/arrow-center.md correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomLeft
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottom
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomRight
+    </span>
+  </button>,
+  <br />,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topLeft
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      top
     </span>
   </button>,
   <button
@@ -658,7 +712,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
           type="button"
         >
           <span>
-            bottomCenter
+            bottom
           </span>
         </button>
       </div>
@@ -706,7 +760,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
           type="button"
         >
           <span>
-            topCenter
+            top
           </span>
         </button>
       </div>
diff --git a/components/dropdown/__tests__/index.test.js b/components/dropdown/__tests__/index.test.js
index 06631ea92a..dc97a9bb8f 100644
--- a/components/dropdown/__tests__/index.test.js
+++ b/components/dropdown/__tests__/index.test.js
@@ -59,4 +59,24 @@ describe('Dropdown', () => {
     await sleep(500);
     expect(wrapper.find(Dropdown).find('#customExpandIcon').length).toBe(1);
   });
+
+  it('should warn if use topCenter or bottomCenter', () => {
+    const error = jest.spyOn(console, 'error');
+    mount(
+      <div>
+        <Dropdown overlay="123" placement="bottomCenter">
+          <button type="button">bottomCenter</button>
+        </Dropdown>
+        <Dropdown overlay="123" placement="topCenter">
+          <button type="button">topCenter</button>
+        </Dropdown>
+      </div>,
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("[antd: Dropdown] You are using 'bottomCenter'"),
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
+    );
+  });
 });
diff --git a/components/dropdown/demo/arrow-center.md b/components/dropdown/demo/arrow-center.md
new file mode 100644
index 0000000000..fd4834fbb7
--- /dev/null
+++ b/components/dropdown/demo/arrow-center.md
@@ -0,0 +1,75 @@
+---
+order: 3
+title:
+  zh-CN: 箭头指向
+  en-US: Arrow pointing at the center
+---
+
+## zh-CN
+
+设置 `arrow` 为 `{ pointAtCenter: true }` 后，箭头将指向目标元素的中心。
+
+## en-US
+
+By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
+
+```jsx
+import { Menu, Dropdown, Button } from 'antd';
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item
+      </a>
+    </Menu.Item>
+  </Menu>
+);
+
+ReactDOM.render(
+  <>
+    <Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
+      <Button>bottomLeft</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="bottom" arrow={{ pointAtCenter: true }}>
+      <Button>bottom</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="bottomRight" arrow={{ pointAtCenter: true }}>
+      <Button>bottomRight</Button>
+    </Dropdown>
+    <br />
+    <Dropdown overlay={menu} placement="topLeft" arrow={{ pointAtCenter: true }}>
+      <Button>topLeft</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="top" arrow={{ pointAtCenter: true }}>
+      <Button>top</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="topRight" arrow={{ pointAtCenter: true }}>
+      <Button>topRight</Button>
+    </Dropdown>
+  </>,
+  mountNode,
+);
+```
+
+```css
+#components-dropdown-demo-arrow-center .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+.ant-row-rtl #components-dropdown-demo-arrow-center .ant-btn {
+  margin-right: 0;
+  margin-bottom: 8px;
+  margin-left: 8px;
+}
+```
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
index 7a6af177b3..b4c3880e7f 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -41,8 +41,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="bottomLeft" arrow>
       <Button>bottomLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="bottomCenter" arrow>
-      <Button>bottomCenter</Button>
+    <Dropdown overlay={menu} placement="bottom" arrow>
+      <Button>bottom</Button>
     </Dropdown>
     <Dropdown overlay={menu} placement="bottomRight" arrow>
       <Button>bottomRight</Button>
@@ -51,8 +51,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topLeft" arrow>
       <Button>topLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="topCenter" arrow>
-      <Button>topCenter</Button>
+    <Dropdown overlay={menu} placement="top" arrow>
+      <Button>top</Button>
     </Dropdown>
     <Dropdown overlay={menu} placement="topRight" arrow>
       <Button>topRight</Button>
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 956fc58847..21e406aa78 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -46,7 +46,7 @@ ReactDOM.render(
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
     </Dropdown.Button>
-    <Dropdown.Button overlay={menu} placement="bottomCenter" icon={<UserOutlined />}>
+    <Dropdown.Button overlay={menu} placement="bottom" icon={<UserOutlined />}>
       Dropdown
     </Dropdown.Button>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index d46c3a564f..196bffc5ef 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -42,8 +42,8 @@ ReactDOM.render(
       <Dropdown overlay={menu} placement="bottomLeft">
         <Button>bottomLeft</Button>
       </Dropdown>
-      <Dropdown overlay={menu} placement="bottomCenter">
-        <Button>bottomCenter</Button>
+      <Dropdown overlay={menu} placement="bottom">
+        <Button>bottom</Button>
       </Dropdown>
       <Dropdown overlay={menu} placement="bottomRight">
         <Button>bottomRight</Button>
@@ -53,8 +53,8 @@ ReactDOM.render(
       <Dropdown overlay={menu} placement="topLeft">
         <Button>topLeft</Button>
       </Dropdown>
-      <Dropdown overlay={menu} placement="topCenter">
-        <Button>topCenter</Button>
+      <Dropdown overlay={menu} placement="top">
+        <Button>top</Button>
       </Dropdown>
       <Dropdown overlay={menu} placement="topRight">
         <Button>topRight</Button>
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 8a8a3a06bc..fd4e096893 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -7,6 +7,7 @@ import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/reactNode';
+import getPlacements from '../_util/placements';
 
 const Placements = tuple(
   'topLeft',
@@ -15,6 +16,8 @@ const Placements = tuple(
   'bottomLeft',
   'bottomCenter',
   'bottomRight',
+  'top',
+  'bottom',
 );
 
 type Placement = typeof Placements[number];
@@ -34,8 +37,12 @@ type Align = {
   useCssTransform?: boolean;
 };
 
+export type DropdownArrowOptions = {
+  pointAtCenter?: boolean;
+};
+
 export interface DropDownProps {
-  arrow?: boolean;
+  arrow?: boolean | DropdownArrowOptions;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   overlay: React.ReactElement | OverlayFunc;
   onVisibleChange?: (visible: boolean) => void;
@@ -129,10 +136,21 @@ const Dropdown: DropdownInterface = props => {
 
   const getPlacement = () => {
     const { placement } = props;
-    if (placement !== undefined) {
-      return placement;
+    if (!placement) {
+      return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
     }
-    return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
+
+    if (placement.includes('Center')) {
+      const newPlacement = placement.slice(0, placement.indexOf('Center'));
+      devWarning(
+        !placement.includes('Center'),
+        'Dropdown',
+        `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
+      );
+      return newPlacement;
+    }
+
+    return placement;
   };
 
   const {
@@ -169,11 +187,16 @@ const Dropdown: DropdownInterface = props => {
     alignPoint = true;
   }
 
+  const builtinPlacements = getPlacements({
+    arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
+  });
+
   return (
     <RcDropdown
-      arrow={arrow}
       alignPoint={alignPoint}
       {...props}
+      builtinPlacements={builtinPlacements}
+      arrow={!!arrow}
       overlayClassName={overlayClassNameCustomized}
       prefixCls={prefixCls}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 6099aa4be6..035af00153 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -17,14 +17,14 @@ When there are more than a few options to choose from, you can wrap them in a `D
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| arrow | Whether the dropdown arrow should be visible | boolean | false |  |
+| arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | The class name of the dropdown root element | string | - |  |
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
-| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` |  |
+| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | Whether the dropdown menu is currently visible | boolean | - |  |
 | onVisibleChange | Called when the visible state is changed. Not trigger when hidden by click item | (visible: boolean) => void | - |  |
@@ -44,7 +44,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |
-| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
+| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | size | Size of the button, the same as [Button](/components/button/#API) | string | `default` |  |
 | trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | Type of the button, the same as [Button](/components/button/#API) | string | `default` |  |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 15eccfea50..3ff8a060bd 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -21,14 +21,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| arrow | 下拉框箭头是否显示 | boolean | false |  |
+| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | 下拉根元素的类名称 | string | - |  |
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
-| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
+| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | 菜单是否显示 | boolean | - |  |
 | onVisibleChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (visible: boolean) => void | - |  |
@@ -48,7 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
 | overlay | 菜单 | [Menu](/components/menu/) | - |  |
-| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
+| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index bb60447921..77af0d2807 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -49,14 +49,14 @@
   }
 
   // Offset the popover to account for the dropdown arrow
-  &-show-arrow&-placement-topCenter,
   &-show-arrow&-placement-topLeft,
+  &-show-arrow&-placement-top,
   &-show-arrow&-placement-topRight {
     padding-bottom: @popover-distance;
   }
 
-  &-show-arrow&-placement-bottomCenter,
   &-show-arrow&-placement-bottomLeft,
+  &-show-arrow&-placement-bottom,
   &-show-arrow&-placement-bottomRight {
     padding-top: @popover-distance;
   }
@@ -76,7 +76,7 @@
     transform: rotate(45deg);
   }
 
-  &-placement-topCenter > &-arrow,
+  &-placement-top > &-arrow,
   &-placement-topLeft > &-arrow,
   &-placement-topRight > &-arrow {
     bottom: @popover-distance - @popover-arrow-width + 2.2px;
@@ -84,7 +84,7 @@
     box-shadow: 3px 3px 7px fade(@black, 7%);
   }
 
-  &-placement-topCenter > &-arrow {
+  &-placement-top > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
@@ -97,7 +97,7 @@
     right: 16px;
   }
 
-  &-placement-bottomCenter > &-arrow,
+  &-placement-bottom > &-arrow,
   &-placement-bottomLeft > &-arrow,
   &-placement-bottomRight > &-arrow {
     top: @popover-distance - @popover-arrow-width + 2px;
@@ -105,7 +105,7 @@
     box-shadow: -2px -2px 5px fade(@black, 6%);
   }
 
-  &-placement-bottomCenter > &-arrow {
+  &-placement-bottom > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
@@ -300,8 +300,8 @@
 
   &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
   &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
-  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter,
-  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom,
+  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottom,
   &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
   &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
     animation-name: antSlideUpIn;
@@ -309,21 +309,21 @@
 
   &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
   &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
-  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter,
-  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-top,
+  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-top,
   &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
   &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
     animation-name: antSlideDownIn;
   }
 
   &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
-  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottom,
   &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
     animation-name: antSlideUpOut;
   }
 
   &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
-  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-top,
   &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
     animation-name: antSlideDownOut;
   }
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 8842bb7c84..93a53eef7c 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -4,7 +4,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 import classNames from 'classnames';
 import { placements as Placements } from 'rc-tooltip/lib/placements';
-import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements';
+import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
 import { cloneElement, isValidElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import { PresetColorType, PresetColorTypes } from '../_util/colors';
@@ -130,9 +130,11 @@ function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixC
 }
 
 const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
-  const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction } = React.useContext(
-    ConfigContext,
-  );
+  const {
+    getPopupContainer: getContextPopupContainer,
+    getPrefixCls,
+    direction,
+  } = React.useContext(ConfigContext);
 
   const [visible, setVisible] = useMergedState(false, {
     value: props.visible,
@@ -167,11 +169,11 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   const onPopupAlign = (domNode: HTMLElement, align: any) => {
     const placements: any = getTooltipPlacements();
     // 当前返回的位置
-    const placement = Object.keys(placements).filter(
+    const placement = Object.keys(placements).find(
       key =>
         placements[key].points[0] === align.points[0] &&
         placements[key].points[1] === align.points[1],
-    )[0];
+    );
     if (!placement) {
       return;
     }
diff --git a/package.json b/package.json
index 75c96aaa85..f457399d79 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.6.0",
     "rc-drawer": "~4.4.2",
-    "rc-dropdown": "~3.2.0",
+    "rc-dropdown": "~3.2.2",
     "rc-field-form": "~1.22.0-2",
     "rc-image": "~5.2.5",
     "rc-input-number": "~7.3.0",
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 6c776b0767..2024068314 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -523,7 +523,7 @@ class MainContent extends Component {
             </section>
             {componentPage && (
               <div className="fixed-widgets">
-                <Dropdown overlay={this.getThemeSwitchMenu()} placement="topCenter">
+                <Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
                   <Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
                 </Dropdown>
               </div>