chore: feature merge master

2025-01-18 14:13:37 +08:00 · 2020-09-22 10:56:04 +08:00 · 2020-09-22 10:56:04 +08:00 · 358c7fa4c4
commit 358c7fa4c4
parent 659a2d7701 fc5e0a9155
48 changed files with 1068 additions and 466 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,25 @@ timeline: true

 ---

+## 4.6.5
+
+`2020-09-20`
+
+- 💄 Fix Descriptions item long text ellipsis issue. [#26820](https://github.com/ant-design/ant-design/pull/26820)
+- 🐞 Fix Menu unexpected scrollbar when show and hide. [#26817](https://github.com/ant-design/ant-design/pull/26817)
+- 🐞 Fix `@layout-sider-background` cannot set to linear gradient color. [#26810](https://github.com/ant-design/ant-design/pull/26810)
+- 🐞 Fix Select compositing status lost when input first letter in Chinese. [#26796](https://github.com/ant-design/ant-design/pull/26796)
+- 🐞 Fix Table `@table-sticky-zindex` less compile error issue. [#26800](https://github.com/ant-design/ant-design/pull/26800) [@chimp1nski](https://github.com/chimp1nski)
+- Button
+  - 💄 Fix Button align issue when has icon only. [#26785](https://github.com/ant-design/ant-design/pull/26785)
+  - 🐞 Fix Button warning `Invalid value for prop navigate` when using with react-router. [#26740](https://github.com/ant-design/ant-design/pull/26740) [@knobo](https://github.com/knobo)
+- 💄 Fix TimePicker column align issue, add `@picker-time-panel-column-width` and `@picker-time-panel-column-height` less variables. [#26784](https://github.com/ant-design/ant-design/pull/26784)
+- 🐞 Fix AutoComplete warning when using `placeholder` and `allowClear`. [#26765](https://github.com/ant-design/ant-design/pull/26765)
+- 🐞 Fix Space show items when it's render empty dom. [#26721](https://github.com/ant-design/ant-design/pull/26721) [@knobo](https://github.com/knobo)
+- 🛠 Dedupe `rc-trigger` version to reduce package size. [#26803](https://github.com/ant-design/ant-design/pull/26803)
+- TypeScript
+  - 🤖 Cascader add `name` and `id` props definition. [#26660](https://github.com/ant-design/ant-design/pull/26660) [@alwaysloseall](https://github.com/alwaysloseall)
+
 ## 4.6.4

 `2020-09-13`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,25 @@ timeline: true

 ---

+## 4.6.5
+
+`2020-09-20`
+
+- 💄 修复 Descriptions 长文本溢出的样式问题。[#26820](https://github.com/ant-design/ant-design/pull/26820)
+- 🐞 修复 Menu 子菜单展开/收起时会出现滚动条的问题。[#26817](https://github.com/ant-design/ant-design/pull/26817)
+- 🐞 修复 `@layout-sider-background` 变量不能设置为渐变色的问题。[#26810](https://github.com/ant-design/ant-design/pull/26810)
+- 🐞 修复 Select 搜索时输入第一个字符后中文输入法状态丢失的问题。[#26796](https://github.com/ant-design/ant-design/pull/26796)
+- 🐞 修复 Table `@table-sticky-zindex` less 报错问题。[#26800](https://github.com/ant-design/ant-design/pull/26800) [@chimp1nski](https://github.com/chimp1nski)
+- Button
+  - 💄 修复 Button 只有图标时的对齐问题。[#26785](https://github.com/ant-design/ant-design/pull/26785)
+  - 🐞 修复 Button 和 react-router 一起使用时抛出 `Invalid value for prop navigate` 的问题。[#26740](https://github.com/ant-design/ant-design/pull/26740) [@knobo](https://github.com/knobo)
+- 💄 修复 TimePicker 选择框 hover 时文字内容左移的问题，并新增 `@picker-time-panel-column-width` 和 `@picker-time-panel-column-height` less 变量。[#26784](https://github.com/ant-design/ant-design/pull/26784)
+- 🐞 修复 AutoComplete 使用 `placeholder` 和 `allowClear` 时抛出警告的问题。[#26765](https://github.com/ant-design/ant-design/pull/26765)
+- 🐞 修复 Space 空条目会占据一格的样式问题。[#26721](https://github.com/ant-design/ant-design/pull/26721) [@knobo](https://github.com/knobo)
+- 🛠 去重多版本 `rc-trigger` 以降低打包尺寸。[#26803](https://github.com/ant-design/ant-design/pull/26803)
+- TypeScript
+  - 🤖 Cascader 增加 `name` 和 `id` 属性。[#26660](https://github.com/ant-design/ant-design/pull/26660) [@alwaysloseall](https://github.com/alwaysloseall)
+
 ## 4.6.4

 `2020-09-13`
--- a/components/_util/tests/util.test.js
+++ b/components/_util/tests/util.test.js
@ -3,39 +3,61 @@ import React from 'react';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
 import delayRaf from '../raf';
-import throttleByAnimationFrame from '../throttleByAnimationFrame';
+import {
+  throttleByAnimationFrame,
+  throttleByAnimationFrameDecorator,
+} from '../throttleByAnimationFrame';
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import Wave from '../wave';
 import TransButton from '../transButton';
-import openAnimation from '../openAnimation';
+import { isStyleSupport, isFlexSupported } from '../styleChecker';
 import { sleep } from '../../../tests/utils';
 import focusTest from '../../../tests/shared/focusTest';

 describe('Test utils function', () => {
  focusTest(TransButton);

-  it('throttle function should work', async () => {
-    const callback = jest.fn();
-    const throttled = throttleByAnimationFrame(callback);
-    expect(callback).not.toHaveBeenCalled();
+  describe('throttle', () => {
+    it('throttle function should work', async () => {
+      const callback = jest.fn();
+      const throttled = throttleByAnimationFrame(callback);
+      expect(callback).not.toHaveBeenCalled();

-    throttled();
-    throttled();
-    await sleep(20);
+      throttled();
+      throttled();
+      await sleep(20);

-    expect(callback).toHaveBeenCalled();
-    expect(callback.mock.calls.length).toBe(1);
-  });
+      expect(callback).toHaveBeenCalled();
+      expect(callback.mock.calls.length).toBe(1);
+    });

-  it('throttle function should be canceled', async () => {
-    const callback = jest.fn();
-    const throttled = throttleByAnimationFrame(callback);
+    it('throttle function should be canceled', async () => {
+      const callback = jest.fn();
+      const throttled = throttleByAnimationFrame(callback);

-    throttled();
-    throttled.cancel();
-    await sleep(20);
+      throttled();
+      throttled.cancel();
+      await sleep(20);

-    expect(callback).not.toHaveBeenCalled();
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it('throttleByAnimationFrameDecorator should works', async () => {
+      const callbackFn = jest.fn();
+      class Test {
+        @throttleByAnimationFrameDecorator()
+        // eslint-disable-next-line class-methods-use-this
+        callback() {
+          callbackFn();
+        }
+      }
+      const test = new Test();
+      test.callback();
+      test.callback();
+      test.callback();
+      await sleep(30);
+      expect(callbackFn).toHaveBeenCalledTimes(1);
+    });
  });

  describe('getDataOrAriaProps', () => {
@ -187,20 +209,23 @@ describe('Test utils function', () => {
    });
  });

-  describe('openAnimation', () => {
-    it('should support openAnimation', () => {
-      const done = jest.fn();
-      const domNode = document.createElement('div');
-      expect(typeof openAnimation.enter).toBe('function');
-      expect(typeof openAnimation.leave).toBe('function');
-      expect(typeof openAnimation.appear).toBe('function');
-      const appear = openAnimation.appear(domNode, done);
-      const enter = openAnimation.enter(domNode, done);
-      const leave = openAnimation.leave(domNode, done);
-      expect(typeof appear.stop).toBe('function');
-      expect(typeof enter.stop).toBe('function');
-      expect(typeof leave.stop).toBe('function');
-      expect(done).toHaveBeenCalled();
+  describe('style', () => {
+    it('isFlexSupported', () => {
+      expect(isFlexSupported).toBe(true);
+    });
+
+    it('isStyleSupport', () => {
+      expect(isStyleSupport('color')).toBe(true);
+      expect(isStyleSupport('not-existed')).toBe(false);
+    });
+
+    it('isStyleSupport return false in service side', () => {
+      const spy = jest
+        .spyOn(window.document, 'documentElement', 'get')
+        .mockImplementation(() => undefined);
+      expect(isStyleSupport('color')).toBe(false);
+      expect(isStyleSupport('not-existed')).toBe(false);
+      spy.mockRestore();
    });
  });
 });
--- a/components/_util/styleChecker.tsx
+++ b/components/_util/styleChecker.tsx
@ -1,4 +1,4 @@
-const isStyleSupport = (styleName: string | Array<string>): boolean => {
+export const isStyleSupport = (styleName: string | Array<string>): boolean => {
  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
    const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
    const { documentElement } = window.document;
@ -9,5 +9,3 @@ const isStyleSupport = (styleName: string | Array<string>): boolean => {
 };

 export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);
-
-export default isStyleSupport;
--- a/components/_util/throttleByAnimationFrame.tsx
+++ b/components/_util/throttleByAnimationFrame.tsx
@ -1,6 +1,6 @@
 import raf from 'raf';

-export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
+export function throttleByAnimationFrame(fn: (...args: any[]) => void) {
  let requestId: number | null;

  const later = (args: any[]) => () => {
@ -20,15 +20,18 @@ export default function throttleByAnimationFrame(fn: (...args: any[]) => void) {
 }

 export function throttleByAnimationFrameDecorator() {
-  // eslint-disable-next-line func-names
-  return function(target: any, key: string, descriptor: any) {
+  return function throttle(target: any, key: string, descriptor: any) {
    const fn = descriptor.value;
    let definingProperty = false;
    return {
      configurable: true,
      get() {
+        // In IE11 calling Object.defineProperty has a side-effect of evaluating the
+        // getter for the property which is being replaced. This causes infinite
+        // recursion and an "Out of stack space" error.
        // eslint-disable-next-line no-prototype-builtins
        if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
+          /* istanbul ignore next */
          return fn;
        }

--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@ -116,7 +116,6 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
    if (!e || e.target !== node || this.animationStart) {
      return;
    }
-
    this.resetEffect(node);
  };

--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -58,3 +58,25 @@ Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [
 ### Part of api from v3 not available in v4?

 AutoComplete is a Input component support auto complete tips which should not support `labelInValue` prop to modify dispaly value in input. In v3, AutoComplete realization can not handle case that user type match of both `value` & `label` are the same. v4 not longer support `label` as the value input.
+
+Besides, to unique API, `dataSource` replaced with `options`:
+
+#### v3
+
+```tsx
+dataSource = ['light', 'bamboo'];
+// or
+dataSource = [
+  { value: 'light', text: 'Light' },
+  { value: 'bamboo', text: 'Bamboo' },
+];
+```
+
+#### v4
+
+```tsx
+options = [
+  { value: 'light', label: 'Light' },
+  { value: 'bamboo', label: 'Bamboo' },
+];
+```
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -60,3 +60,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 ### v3 的部分属性为何在 v4 中没有了？

 AutoComplete 组件是一个支持自动提示的 Input 组件，因而其不具有 `labelInValue` 等影响 value 展示的属性。在 v3 版本，AutoComplete 实现存在输入值如果遇到 `value` 与 `label` 相同时无法映射的问题。 v4 中不再支持 `label` 为值的输入形态。
+
+此外为了统一 API，`dataSource` 改为 `options` 你可以如下转换：
+
+#### v3
+
+```tsx
+dataSource = ['light', 'bamboo'];
+// or
+dataSource = [
+  { value: 'light', text: 'Light' },
+  { value: 'bamboo', text: 'Bamboo' },
+];
+```
+
+#### v4
+
+```tsx
+options = [
+  { value: 'light', label: 'Light' },
+  { value: 'bamboo', label: 'Bamboo' },
+];
+```
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@ -4,7 +4,7 @@ import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
-import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
+import { throttleByAnimationFrame } from '../_util/throttleByAnimationFrame';
 import { ConfigContext } from '../config-provider';
 import getScroll from '../_util/getScroll';
 import scrollTo from '../_util/scrollTo';
--- a/components/button/tests/snapshots/index.test.tsx.snap
+++ b/components/button/tests/snapshots/index.test.tsx.snap
--- a/components/button/tests/index.test.tsx
+++ b/components/button/tests/index.test.tsx
@ -211,33 +211,6 @@ describe('Button', () => {
    expect(<Button>{false}</Button>).toMatchRenderedSnapshot();
  });

-  it('should have click wave effect', async () => {
-    const wrapper = mount(<Button type="primary">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await sleep(0);
-    expect(
-      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(true);
-  });
-
-  it('should not have click wave effect for link type button', async () => {
-    const wrapper = mount(<Button type="link">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await sleep(0);
-    expect(
-      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(false);
-  });
-
-  it('should not have click wave effect for text type button', async () => {
-    const wrapper = mount(<Button type="link">button</Button>);
-    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
-    await sleep(0);
-    expect(
-      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
-    ).toBe(false);
-  });
-
  it('should not render as link button when href is undefined', async () => {
    const wrapper = mount(
      <Button type="primary" href={undefined}>
--- a/components/button/tests/wave.test.tsx
+++ b/components/button/tests/wave.test.tsx
@ -0,0 +1,93 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Button from '..';
+import Wave from '../../_util/wave';
+import { sleep } from '../../../tests/utils';
+
+describe('click wave effect', () => {
+  async function clickButton(wrapper: any) {
+    wrapper.find('.ant-btn').getDOMNode().click();
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(new Event('transitionstart'));
+    await sleep(20);
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(new Event('animationend'));
+    await sleep(20);
+  }
+
+  it('should have click wave effect for primary button', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    await clickButton(wrapper);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+  });
+
+  it('should have click wave effect for default button', async () => {
+    const wrapper = mount(<Button>button</Button>);
+    await clickButton(wrapper);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+  });
+
+  it('should not have click wave effect for link type button', async () => {
+    const wrapper = mount(<Button type="link">button</Button>);
+    await clickButton(wrapper);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(false);
+  });
+
+  it('should not have click wave effect for text type button', async () => {
+    const wrapper = mount(<Button type="text">button</Button>);
+    await clickButton(wrapper);
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(false);
+  });
+
+  it('should handle transitionstart', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    await clickButton(wrapper);
+    const buttonNode = wrapper.find('.ant-btn').getDOMNode();
+    buttonNode.dispatchEvent(new Event('transitionstart'));
+    expect(
+      wrapper.find('.ant-btn').getDOMNode().hasAttribute('ant-click-animating-without-extra-node'),
+    ).toBe(true);
+    wrapper.unmount();
+    buttonNode.dispatchEvent(new Event('transitionstart'));
+  });
+
+  it('should run resetEffect in transitionstart', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    const waveInstance = wrapper.find(Wave).instance() as any;
+    const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
+    await clickButton(wrapper);
+    expect(resetEffect).toHaveBeenCalledTimes(1);
+    wrapper.find('.ant-btn').getDOMNode<HTMLButtonElement>().click();
+    await sleep(10);
+    expect(resetEffect).toHaveBeenCalledTimes(2);
+    waveInstance.animationStart = false;
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(new Event('transitionstart'));
+    expect(resetEffect).toHaveBeenCalledTimes(3);
+    resetEffect.mockRestore();
+  });
+
+  it('should handle transitionend', async () => {
+    const wrapper = mount(<Button type="primary">button</Button>);
+    const waveInstance = wrapper.find(Wave).instance() as any;
+    const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
+    await clickButton(wrapper);
+    expect(resetEffect).toHaveBeenCalledTimes(1);
+    const event = new Event('animationend');
+    Object.assign(event, { animationName: 'fadeEffect' });
+    wrapper.find('.ant-btn').getDOMNode().dispatchEvent(event);
+    expect(resetEffect).toHaveBeenCalledTimes(2);
+    resetEffect.mockRestore();
+  });
+
+  it('Wave on falsy element', async () => {
+    const wrapper = mount(<Wave />);
+    const waveInstance = wrapper.find(Wave).instance() as any;
+    waveInstance.resetEffect();
+  });
+});
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@ -601,7 +601,7 @@ exports[`Cascader can be selected in RTL direction 2`] = `
 exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
 <div>
  <div
-    class="ant-cascader-menus"
+    class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
    style="opacity: 0; pointer-events: none;"
  >
    <div>
@ -1046,7 +1046,7 @@ exports[`Cascader rtl render component should be rendered correctly in RTL direc
 exports[`Cascader should highlight keyword and filter when search in Cascader 1`] = `
 <div>
  <div
-    class="ant-cascader-menus"
+    class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
    style="opacity: 0; pointer-events: none;"
  >
    <div>
@ -1083,7 +1083,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
 exports[`Cascader should highlight keyword and filter when search in Cascader with same field name of label and value 1`] = `
 <div>
  <div
-    class="ant-cascader-menus"
+    class="ant-cascader-menus slide-up-appear slide-up-appear-prepare slide-up"
    style="opacity: 0; pointer-events: none;"
  >
    <div>
@ -1126,7 +1126,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader wi
 exports[`Cascader should render not found content 1`] = `
 <div>
  <div
-    class="ant-cascader-menus ant-cascader-menu-empty"
+    class="ant-cascader-menus ant-cascader-menu-empty slide-up-appear slide-up-appear-prepare slide-up"
    style="opacity: 0; pointer-events: none;"
  >
    <div>
@ -1195,7 +1195,7 @@ exports[`Cascader should render not found content 1`] = `
 exports[`Cascader should show not found content when options.length is 0 1`] = `
 <div>
  <div
-    class="ant-cascader-menus ant-cascader-menu-empty"
+    class="ant-cascader-menus ant-cascader-menu-empty slide-up-appear slide-up-appear-prepare slide-up"
    style="opacity: 0; pointer-events: none;"
  >
    <div>
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@ -5,7 +5,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined';

 import CollapsePanel from './CollapsePanel';
 import { ConfigContext } from '../config-provider';
-import animation from '../_util/openAnimation';
+import animation from './openAnimation';
 import { cloneElement } from '../_util/reactNode';

 export type ExpandIconPosition = 'left' | 'right' | undefined;
--- a/components/collapse/tests/common.test.js
+++ b/components/collapse/tests/common.test.js
@ -1,8 +1,26 @@
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import Collapse from '..';
+import openAnimation from '../openAnimation';

 describe('Collapse', () => {
  mountTest(Collapse);
  rtlTest(Collapse);
 });
+
+describe('openAnimation', () => {
+  it('should support openAnimation', () => {
+    const done = jest.fn();
+    const domNode = document.createElement('div');
+    expect(typeof openAnimation.enter).toBe('function');
+    expect(typeof openAnimation.leave).toBe('function');
+    expect(typeof openAnimation.appear).toBe('function');
+    const appear = openAnimation.appear(domNode, done);
+    const enter = openAnimation.enter(domNode, done);
+    const leave = openAnimation.leave(domNode, done);
+    expect(typeof appear.stop).toBe('function');
+    expect(typeof enter.stop).toBe('function');
+    expect(typeof leave.stop).toBe('function');
+    expect(done).toHaveBeenCalled();
+  });
+});
--- a/components/collapse/tests/index.test.js
+++ b/components/collapse/tests/index.test.js
@ -3,17 +3,6 @@ import { mount } from 'enzyme';
 import { sleep } from '../../../tests/utils';

 describe('Collapse', () => {
-  // Fix css-animation deps on these
-  // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
-  window.AnimationEvent = window.AnimationEvent || (() => {});
-  window.TransitionEvent = window.TransitionEvent || (() => {});
-
-  afterAll(() => {
-    // restore it
-    delete window.AnimationEvent;
-    delete window.TransitionEvent;
-  });
-
  // eslint-disable-next-line global-require
  const Collapse = require('..').default;

--- a/components/collapse/openAnimation.tsx
+++ b/components/collapse/openAnimation.tsx
@ -20,9 +20,6 @@ function animate(node: HTMLElement, show: boolean, done: () => void) {
      }
    },
    active() {
-      if (requestAnimationFrameId) {
-        raf.cancel(requestAnimationFrameId);
-      }
      requestAnimationFrameId = raf(() => {
        node.style.height = `${show ? height : 0}px`;
        node.style.opacity = show ? '1' : '0';
--- a/components/date-picker/tests/snapshots/DatePicker.test.js.snap
+++ b/components/date-picker/tests/snapshots/DatePicker.test.js.snap
@ -44,7 +44,7 @@ Array [
  </div>,
  <div>
    <div
-      class="ant-picker-dropdown"
+      class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
      style="opacity: 0; pointer-events: none;"
    >
      <div
@ -668,7 +668,7 @@ Array [
  </div>,
  <div>
    <div
-      class="ant-picker-dropdown"
+      class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
      style="opacity: 0; pointer-events: none;"
    >
      <div
--- a/components/descriptions/style/index.less
+++ b/components/descriptions/style/index.less
@ -86,6 +86,7 @@
    color: @text-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
+    overflow-wrap: break-word;
  }

  &-item {
--- a/components/form/tests/snapshots/demo.test.js.snap
+++ b/components/form/tests/snapshots/demo.test.js.snap
@ -1743,6 +1743,172 @@ exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
 </form>
 `;

+exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly 1`] = `
+<form
+  autocomplete="off"
+  class="ant-form ant-form-horizontal"
+  id="dynamic_form_nest_item"
+>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-label"
+    >
+      <label
+        class="ant-form-item-required"
+        for="dynamic_form_nest_item_area"
+        title="Area"
+      >
+        Area
+      </label>
+    </div>
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <div
+            class="ant-select ant-select-single ant-select-show-arrow"
+          >
+            <div
+              class="ant-select-selector"
+            >
+              <span
+                class="ant-select-selection-search"
+              >
+                <input
+                  aria-activedescendant="dynamic_form_nest_item_area_list_0"
+                  aria-autocomplete="list"
+                  aria-controls="dynamic_form_nest_item_area_list"
+                  aria-haspopup="listbox"
+                  aria-owns="dynamic_form_nest_item_area_list"
+                  autocomplete="off"
+                  class="ant-select-selection-search-input"
+                  id="dynamic_form_nest_item_area"
+                  readonly=""
+                  role="combobox"
+                  style="opacity:0"
+                  type="search"
+                  unselectable="on"
+                  value=""
+                />
+              </span>
+              <span
+                class="ant-select-selection-placeholder"
+              />
+            </div>
+            <span
+              aria-hidden="true"
+              class="ant-select-arrow"
+              style="user-select:none;-webkit-user-select:none"
+              unselectable="on"
+            >
+              <span
+                aria-label="down"
+                class="anticon anticon-down ant-select-suffix"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="down"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                  />
+                </svg>
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-dashed ant-btn-block"
+            type="button"
+          >
+            <span
+              aria-label="plus"
+              class="anticon anticon-plus"
+              role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="plus"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <defs />
+                <path
+                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                />
+                <path
+                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                />
+              </svg>
+            </span>
+            <span>
+               Add sights
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <button
+            class="ant-btn ant-btn-primary"
+            type="submit"
+          >
+            <span>
+              Submit
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
 exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
--- a/components/form/tests/index.test.js
+++ b/components/form/tests/index.test.js
@ -136,6 +136,7 @@ describe('Form', () => {
      "Warning: [antd: Form.Item] `shouldUpdate` and `dependencies` shouldn't be used together. See https://ant.design/components/form/#dependencies.",
    );
  });
+
  it('`name` should not work with render props', () => {
    mount(
      <Form>
@ -148,6 +149,7 @@ describe('Form', () => {
      "Warning: [antd: Form.Item] Do not use `name` with `children` of render props since it's not a field.",
    );
  });
+
  it('children is array has name props', () => {
    mount(
      <Form>
@ -435,6 +437,24 @@ describe('Form', () => {
    expect(wrapper.find('.ant-form-item-explain').text()).toEqual('help');
  });

+  it('clear validation message when ', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="username" rules={[{ required: true, message: 'message' }]}>
+          <Input />
+        </Form.Item>
+      </Form>,
+    );
+    await change(wrapper, 0, '1');
+    expect(wrapper.find('.ant-form-item-explain').length).toBeFalsy();
+    await change(wrapper, 0, '');
+    expect(wrapper.find('.ant-form-item-explain').length).toBeTruthy();
+    await change(wrapper, 0, '123');
+    await sleep(800);
+    wrapper.update();
+    expect(wrapper.find('.ant-form-item-explain').length).toBeFalsy();
+  });
+
  // https://github.com/ant-design/ant-design/issues/21167
  it('`require` without `name`', () => {
    const wrapper = mount(
--- a/components/form/demo/dynamic-form-items-complex.md
+++ b/components/form/demo/dynamic-form-items-complex.md
@ -0,0 +1,116 @@
+---
+order: 4.2
+title:
+  zh-CN: 复杂的动态增减表单项
+  en-US: Complex Dynamic Form Item
+---
+
+## zh-CN
+
+这个例子演示了一个表单中包含多个表单控件的情况。
+
+## en-US
+
+This example demonstrates the case that a form contains multiple form controls.
+
+```jsx
+import { Form, Input, Button, Space, Select } from 'antd';
+import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
+
+const areas = [
+  { label: 'Beijing', value: 'Beijing' },
+  { label: 'Shanghai', value: 'Shanghai' },
+];
+
+const sights = {
+  Beijing: ['Tiananmen', 'Great Wall'],
+  Shanghai: ['Oriental Pearl', 'The Bund'],
+};
+
+const Demo = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = values => {
+    console.log('Received values of form:', values);
+  };
+
+  const handleChange = () => {
+    form.setFieldsValue({ sights: [] });
+  };
+
+  return (
+    <Form form={form} name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
+      <Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
+        <Select options={areas} onChange={handleChange} />
+      </Form.Item>
+      <Form.List name="sights">
+        {(fields, { add, remove }) => {
+          return (
+            <>
+              {fields.map(field => (
+                <Space key={field.key} align="start">
+                  <Form.Item
+                    noStyle
+                    shouldUpdate={(prevValues, curValues) =>
+                      prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
+                    }
+                  >
+                    {() => (
+                      <Form.Item
+                        {...field}
+                        label="Sight"
+                        name={[field.name, 'sight']}
+                        fieldKey={[field.fieldKey, 'sight']}
+                        rules={[{ required: true, message: 'Missing sight' }]}
+                      >
+                        <Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
+                          {(sights[form.getFieldValue('area')] || []).map(item => (
+                            <Select.Option key={item} value={item}>
+                              {item}
+                            </Select.Option>
+                          ))}
+                        </Select>
+                      </Form.Item>
+                    )}
+                  </Form.Item>
+                  <Form.Item
+                    {...field}
+                    label="Price"
+                    name={[field.name, 'price']}
+                    fieldKey={[field.fieldKey, 'price']}
+                    rules={[{ required: true, message: 'Missing price' }]}
+                  >
+                    <Input />
+                  </Form.Item>
+
+                  <MinusCircleOutlined onClick={() => remove(field.name)} />
+                </Space>
+              ))}
+
+              <Form.Item>
+                <Button
+                  type="dashed"
+                  onClick={() => {
+                    add();
+                  }}
+                  block
+                >
+                  <PlusOutlined /> Add sights
+                </Button>
+              </Form.Item>
+            </>
+          );
+        }}
+      </Form.List>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@ -2,7 +2,7 @@ import { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
 import InternalForm, { useForm, FormInstance, FormProps } from './Form';
 import Item, { FormItemProps } from './FormItem';
 import ErrorList, { ErrorListProps } from './ErrorList';
-import List from './FormList';
+import List, { FormListProps } from './FormList';
 import { FormProvider } from './context';
 import devWarning from '../_util/devWarning';

@ -34,6 +34,15 @@ Form.create = () => {
  );
 };

-export { FormInstance, FormProps, FormItemProps, ErrorListProps, Rule, RuleObject, RuleRender };
+export {
+  FormInstance,
+  FormProps,
+  FormItemProps,
+  ErrorListProps,
+  Rule,
+  RuleObject,
+  RuleRender,
+  FormListProps,
+};

 export default Form;
--- a/components/layout/style/index.less
+++ b/components/layout/style/index.less
@ -109,8 +109,19 @@
        cursor: pointer;
        transition: background 0.3s ease;

-        &:hover {
-          background: tint(@layout-sider-background, 10%);
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: transparent;
+          transition: all 0.3s;
+          content: '';
+        }
+
+        &:hover::after {
+          background: rgba(255, 255, 255, 0.1);
        }

        &-right {
--- a/components/list/tests/snapshots/pagination.test.js.snap
+++ b/components/list/tests/snapshots/pagination.test.js.snap
@ -397,7 +397,7 @@ exports[`List.pagination should change page size work 2`] = `
      </div>
      <div>
        <div
-          class="ant-select-dropdown"
+          class="ant-select-dropdown slide-up-enter slide-up-enter-prepare slide-up"
          style="pointer-events: none; min-width: 0; opacity: 0;"
        >
          <div>
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
--- a/components/menu/tests/index.test.js
+++ b/components/menu/tests/index.test.js
@ -12,9 +12,39 @@ import Layout from '../../layout';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
+import collapseMotion from '../../_util/motion';
+import { sleep } from '../../../tests/utils';

 const { SubMenu } = Menu;

+const noop = () => {};
+
+const expectSubMenuBehavior = (menu, enter = noop, leave = noop) => {
+  if (!menu.prop('openKeys') && !menu.prop('defaultOpenKeys')) {
+    expect(menu.find('.ant-menu-sub').length).toBe(0);
+  }
+  menu.update();
+  expect(menu.find('.ant-menu-sub').length).toBe(0);
+  const AnimationClassNames = {
+    horizontal: 'slide-up-leave',
+    inline: 'ant-motion-collapse-leave',
+    vertical: 'zoom-big-leave',
+  };
+  const mode = menu.prop('mode') || 'horizontal';
+  enter();
+  menu.update();
+  let submenu = menu.find('.ant-menu-sub').hostNodes().at(0);
+  expect(submenu.hasClass('ant-menu-hidden') || submenu.hasClass(AnimationClassNames[mode])).toBe(
+    false,
+  );
+  leave();
+  menu.update();
+  submenu = menu.find('.ant-menu-sub').hostNodes().at(0);
+  expect(submenu.hasClass('ant-menu-hidden') || submenu.hasClass(AnimationClassNames[mode])).toBe(
+    true,
+  );
+};
+
 describe('Menu', () => {
  mountTest(() => (
    <Menu>
@ -116,9 +146,9 @@ describe('Menu', () => {
    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
  });

-  it('horizontal', () => {
+  it('should accept openKeys in mode horizontal', () => {
    const wrapper = mount(
-      <Menu openKeys={['1']} mode="horizontal" openTransitionName="">
+      <Menu openKeys={['1']} mode="horizontal">
        <SubMenu key="1" title="submenu1">
          <Menu.Item key="submenu1">Option 1</Menu.Item>
          <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -126,22 +156,55 @@ describe('Menu', () => {
        <Menu.Item key="2">menu2</Menu.Item>
      </Menu>,
    );
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept openKeys in mode inline', () => {
+    const wrapper = mount(
+      <Menu openKeys={['1']} mode="inline">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
    );
-    wrapper.setProps({ openKeys: [] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-    wrapper.setProps({ openKeys: ['1'] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('should accept openKeys in mode vertical', () => {
+    const wrapper = mount(
+      <Menu openKeys={['1']} mode="vertical">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
+    );
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
+  });
+
+  it('test submenu in mode horizontal', () => {
+    const wrapper = mount(
+      <Menu mode="horizontal">
+        <SubMenu key="1" title="submenu1">
+          <Menu.Item key="submenu1">Option 1</Menu.Item>
+          <Menu.Item key="submenu2">Option 2</Menu.Item>
+        </SubMenu>
+        <Menu.Item key="2">menu2</Menu.Item>
+      </Menu>,
+    );
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
    );
  });

-  it('inline', () => {
+  it('test submenu in mode inline', () => {
    const wrapper = mount(
-      <Menu openKeys={['1']} mode="inline" openAnimation="">
+      <Menu mode="inline">
        <SubMenu key="1" title="submenu1">
          <Menu.Item key="submenu1">Option 1</Menu.Item>
          <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -149,22 +212,16 @@ describe('Menu', () => {
        <Menu.Item key="2">menu2</Menu.Item>
      </Menu>,
    );
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
-    );
-    wrapper.setProps({ openKeys: [] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-    wrapper.setProps({ openKeys: ['1'] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
    );
  });

-  it('vertical', () => {
+  it('test submenu in mode vertical', () => {
    const wrapper = mount(
-      <Menu openKeys={['1']} mode="vertical" openTransitionName="">
+      <Menu mode="vertical" openTransitionName="">
        <SubMenu key="1" title="submenu1">
          <Menu.Item key="submenu1">Option 1</Menu.Item>
          <Menu.Item key="submenu2">Option 2</Menu.Item>
@ -172,16 +229,10 @@ describe('Menu', () => {
        <Menu.Item key="2">menu2</Menu.Item>
      </Menu>,
    );
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
-    );
-    wrapper.setProps({ openKeys: [] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-    wrapper.setProps({ openKeys: ['1'] });
-    wrapper.update();
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      true,
+    expectSubMenuBehavior(
+      wrapper,
+      () => wrapper.setProps({ openKeys: ['1'] }),
+      () => wrapper.setProps({ openKeys: [] }),
    );
  });

@ -221,9 +272,8 @@ describe('Menu', () => {
  it('should always follow openKeys when inlineCollapsed is switched', () => {
    const wrapper = mount(
      <Menu defaultOpenKeys={['1']} mode="inline">
-        <Menu.Item key="menu1">
-          <InboxOutlined />
-          <span>Option</span>
+        <Menu.Item key="menu1" icon={<InboxOutlined />}>
+          Option
        </Menu.Item>
        <SubMenu key="1" title="submenu1">
          <Menu.Item key="submenu1">Option</Menu.Item>
@ -254,9 +304,8 @@ describe('Menu', () => {
  it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
    const wrapper = mount(
      <Menu defaultOpenKeys={['not-existed']} mode="inline">
-        <Menu.Item key="menu1">
-          <InboxOutlined />
-          <span>Option</span>
+        <Menu.Item key="menu1" icon={<InboxOutlined />}>
+          Option
        </Menu.Item>
        <SubMenu key="1" title="submenu1">
          <Menu.Item key="submenu1">Option</Menu.Item>
@ -339,16 +388,30 @@ describe('Menu', () => {
          <Menu.Item key="2">menu2</Menu.Item>
        </Menu>,
      );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'click'),
+        () => toggleMenu(wrapper, 0, 'click'),
      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+    });
+
+    it('inline menu collapseMotion should be triggered', async () => {
+      jest.useRealTimers();
+      const onAppearEnd = jest.spyOn(collapseMotion, 'onAppearEnd');
+      collapseMotion.motionDeadline = 1;
+      const wrapper = mount(
+        <Menu mode="inline">
+          <SubMenu key="1" title="submenu1">
+            <Menu.Item key="submenu1">Option 1</Menu.Item>
+            <Menu.Item key="submenu2">Option 2</Menu.Item>
+          </SubMenu>
+          <Menu.Item key="2">menu2</Menu.Item>
+        </Menu>,
      );
+      wrapper.find('.ant-menu-submenu-title').simulate('click');
+      await sleep(3000);
+      expect(onAppearEnd).toHaveBeenCalledTimes(1);
+      onAppearEnd.mockRestore();
    });

    it('vertical with hover(default)', () => {
@ -361,15 +424,10 @@ describe('Menu', () => {
          <Menu.Item key="2">menu2</Menu.Item>
        </Menu>,
      );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'mouseenter');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'mouseleave');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'mouseenter'),
+        () => toggleMenu(wrapper, 0, 'mouseleave'),
      );
    });

@ -383,15 +441,10 @@ describe('Menu', () => {
          <Menu.Item key="2">menu2</Menu.Item>
        </Menu>,
      );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'click'),
+        () => toggleMenu(wrapper, 0, 'click'),
      );
    });

@ -406,15 +459,10 @@ describe('Menu', () => {
          <Menu.Item key="2">menu2</Menu.Item>
        </Menu>,
      );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'mouseenter');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'mouseleave');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'mouseenter'),
+        () => toggleMenu(wrapper, 0, 'mouseleave'),
      );
    });

@ -429,15 +477,10 @@ describe('Menu', () => {
          <Menu.Item key="2">menu2</Menu.Item>
        </Menu>,
      );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
+      expectSubMenuBehavior(
+        wrapper,
+        () => toggleMenu(wrapper, 0, 'click'),
+        () => toggleMenu(wrapper, 0, 'click'),
      );
    });
  });
@ -446,16 +489,13 @@ describe('Menu', () => {
    jest.useFakeTimers();
    const wrapper = mount(
      <Menu mode="inline" inlineCollapsed>
-        <Menu.Item key="1" title="bamboo lucky">
-          <PieChartOutlined />
-          <span>
-            Option 1
-            <img
-              style={{ width: 20 }}
-              alt="test"
-              src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
-            />
-          </span>
+        <Menu.Item key="1" title="bamboo lucky" icon={<PieChartOutlined />}>
+          Option 1
+          <img
+            style={{ width: 20 }}
+            alt="test"
+            src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
+          />
        </Menu.Item>
      </Menu>,
    );
@ -485,15 +525,7 @@ describe('Menu', () => {
            <Layout.Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
              <div className="logo" />
              <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
-                <SubMenu
-                  key="sub1"
-                  title={
-                    <span>
-                      <UserOutlined />
-                      <span>User</span>
-                    </span>
-                  }
-                >
+                <SubMenu key="sub1" icon={<UserOutlined />} title="User">
                  <Menu.Item key="3">Tom</Menu.Item>
                  <Menu.Item key="4">Bill</Menu.Item>
                  <Menu.Item key="5">Alex</Menu.Item>
@ -527,12 +559,10 @@ describe('Menu', () => {
  it('MenuItem should not render Tooltip when inlineCollapsed is false', () => {
    const wrapper = mount(
      <Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
-        <Menu.Item key="mail">
-          <MailOutlined />
+        <Menu.Item key="mail" icon={<MailOutlined />}>
          Navigation One
        </Menu.Item>
-        <Menu.Item key="app">
-          <AppstoreOutlined />
+        <Menu.Item key="app" icon={<AppstoreOutlined />}>
          Navigation Two
        </Menu.Item>
        <Menu.Item key="alipay">
@ -562,9 +592,8 @@ describe('Menu', () => {
  it('should controlled collapse work', () => {
    const wrapper = mount(
      <Menu mode="inline" inlineCollapsed={false}>
-        <Menu.Item key="1">
-          <PieChartOutlined />
-          <span>Option 1</span>
+        <Menu.Item key="1" icon={<PieChartOutlined />}>
+          Option 1
        </Menu.Item>
      </Menu>,
    );
@ -580,9 +609,8 @@ describe('Menu', () => {
    jest.useFakeTimers();
    const wrapper = mount(
      <Menu mode="inline" inlineCollapsed={false}>
-        <Menu.Item key="1">
-          <PieChartOutlined />
-          <span>Option 1</span>
+        <Menu.Item key="1" icon={<PieChartOutlined />}>
+          Option 1
        </Menu.Item>
      </Menu>,
    );
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -147,7 +147,8 @@
    transform-origin: 0 0;

    // https://github.com/ant-design/ant-design/issues/22244
-    &:not(.zoom-big-enter-active):not(.zoom-big-leave-active) {
+    // https://github.com/ant-design/ant-design/issues/26812
+    &:not([class*='-active']) {
      overflow-x: hidden;
      overflow-y: auto;
    }
--- a/components/message/tests/config.test.js
+++ b/components/message/tests/config.test.js
@ -60,7 +60,7 @@ describe('message.config', () => {
      duration: 0.5,
    });
    message.info('last');
-    await sleep(600);
+    await sleep(1000);
    expect(document.querySelectorAll('.ant-message-notice').length).toBe(0);
    message.config({
      duration: 3,
--- a/components/popconfirm/tests/index.test.js
+++ b/components/popconfirm/tests/index.test.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import Popconfirm from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import { sleep } from '../../../tests/utils';
@ -14,6 +15,12 @@ describe('Popconfirm', () => {
    preventDefault: expect.any(Function),
  });

+  beforeAll(() => {
+    spyElementPrototype(HTMLElement, 'offsetParent', {
+      get: () => ({}),
+    });
+  });
+
  it('should popup Popconfirm dialog', () => {
    const onVisibleChange = jest.fn();

--- a/components/slider/SliderTooltip.tsx
+++ b/components/slider/SliderTooltip.tsx
@ -34,13 +34,8 @@ const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
  }

  function keepAlign() {
-    if (rafRef.current !== null) {
-      return;
-    }
-
    rafRef.current = window.requestAnimationFrame(() => {
      (tooltipRef.current as any).forcePopupAlign();
-
      rafRef.current = null;
      keepAlign();
    });
--- a/components/switch/tests/wave.test.js
+++ b/components/switch/tests/wave.test.js
@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Switch from '..';
+import Wave from '../../_util/wave';
+import { sleep } from '../../../tests/utils';
+
+describe('click wave effect', () => {
+  async function click(wrapper) {
+    wrapper.find('.ant-switch').getDOMNode().click();
+    wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('transitionstart'));
+    await sleep(20);
+    wrapper.find('.ant-switch').getDOMNode().dispatchEvent(new Event('animationend'));
+    await sleep(20);
+  }
+
+  it('should have click wave effect', async () => {
+    const wrapper = mount(<Switch />);
+    await click(wrapper);
+    const waveInstance = wrapper.find(Wave).instance();
+    const resetEffect = jest.spyOn(waveInstance, 'resetEffect');
+    await click(wrapper);
+    expect(resetEffect).toHaveBeenCalledTimes(1);
+    const event = new Event('animationend');
+    Object.assign(event, { animationName: 'fadeEffect' });
+    wrapper.find('.ant-switch').getDOMNode().dispatchEvent(event);
+    resetEffect.mockRestore();
+  });
+});
--- a/components/table/tests/snapshots/Table.filter.test.js.snap
+++ b/components/table/tests/snapshots/Table.filter.test.js.snap
@ -334,7 +334,7 @@ exports[`Table.filter renders custom filter icon with right Tooltip title 1`] =
                          </span>
                          <div>
                            <div
-                              class="ant-tooltip"
+                              class="ant-tooltip zoom-big-fast-appear zoom-big-fast-appear-prepare zoom-big-fast"
                              style="opacity: 0; pointer-events: none;"
                            >
                              <div
@ -819,7 +819,7 @@ exports[`Table.filter should support getPopupContainer 1`] = `
                        </span>
                        <div>
                          <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                            style="opacity: 0; pointer-events: none;"
                          >
                            <div
@ -1052,7 +1052,7 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
                        </span>
                        <div>
                          <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                            style="opacity: 0; pointer-events: none;"
                          >
                            <div
--- a/components/table/tests/snapshots/Table.rowSelection.test.js.snap
+++ b/components/table/tests/snapshots/Table.rowSelection.test.js.snap
@ -1080,7 +1080,7 @@ exports[`Table.rowSelection should support getPopupContainer 1`] = `
                        </span>
                        <div>
                          <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                            style="opacity: 0; pointer-events: none;"
                          >
                            <ul
@ -1410,7 +1410,7 @@ exports[`Table.rowSelection should support getPopupContainer from ConfigProvider
                        </span>
                        <div>
                          <div
-                            class="ant-dropdown"
+                            class="ant-dropdown slide-up-appear slide-up-appear-prepare slide-up"
                            style="opacity: 0; pointer-events: none;"
                          >
                            <ul
--- a/components/time-picker/tests/snapshots/index.test.js.snap
+++ b/components/time-picker/tests/snapshots/index.test.js.snap
@ -117,7 +117,7 @@ Array [
  </div>,
  <div>
    <div
-      class="ant-picker-dropdown"
+      class="ant-picker-dropdown slide-up-appear slide-up-appear-prepare slide-up"
      style="opacity: 0; pointer-events: none;"
    >
      <div
--- a/components/tooltip/tests/tooltip.test.js
+++ b/components/tooltip/tests/tooltip.test.js
@ -1,5 +1,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import { spyElementPrototype } from 'rc-util/lib/test/domHook';
 import Tooltip from '..';
 import Button from '../../button';
 import Switch from '../../switch';
@ -15,6 +16,12 @@ describe('Tooltip', () => {
  mountTest(Tooltip);
  rtlTest(Tooltip);

+  beforeAll(() => {
+    spyElementPrototype(HTMLElement, 'offsetParent', {
+      get: () => ({}),
+    });
+  });
+
  it('check `onVisibleChange` arguments', () => {
    const onVisibleChange = jest.fn();
    const ref = React.createRef();
--- a/components/tree-select/tests/snapshots/index.test.js.snap
+++ b/components/tree-select/tests/snapshots/index.test.js.snap
@ -34,7 +34,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
  </div>
  <div>
    <div
-      class="ant-select-dropdown ant-tree-select-dropdown"
+      class="ant-select-dropdown ant-tree-select-dropdown slide-up-appear slide-up-appear-prepare slide-up"
      style="opacity: 0; pointer-events: none; min-width: 0; width: 0px;"
    >
      <div>
--- a/components/tree/tests/snapshots/directory.test.js.snap
+++ b/components/tree/tests/snapshots/directory.test.js.snap
@ -812,7 +812,8 @@ exports[`Directory Tree expand click 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
          >
            <div
              class="ant-tree-treenode ant-tree-treenode-switcher-close"
@ -1069,6 +1070,10 @@ exports[`Directory Tree expand click 2`] = `
              </span>
            </span>
          </div>
+          <div
+            class="ant-tree-treenode-motion ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse"
+            style="height: 0px;"
+          />
          <div
            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
          >
@ -1226,7 +1231,8 @@ exports[`Directory Tree expand double click 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
          >
            <div
              class="ant-tree-treenode ant-tree-treenode-switcher-close"
@ -1483,6 +1489,10 @@ exports[`Directory Tree expand double click 2`] = `
              </span>
            </span>
          </div>
+          <div
+            class="ant-tree-treenode-motion ant-motion-collapse-leave ant-motion-collapse-leave-start ant-motion-collapse"
+            style="height: 0px;"
+          />
          <div
            class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
          >
@ -1640,7 +1650,8 @@ exports[`Directory Tree expand with state control click 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
          >
            <div
              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
@ -1787,7 +1798,8 @@ exports[`Directory Tree expand with state control doubleClick 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
          >
            <div
              class="ant-tree-treenode ant-tree-treenode-switcher-close ant-tree-treenode-leaf-last"
@ -1996,7 +2008,8 @@ exports[`Directory Tree expandedKeys update 1`] = `
            </span>
          </div>
          <div
-            class="ant-tree-treenode-motion"
+            class="ant-tree-treenode-motion ant-motion-collapse-appear ant-motion-collapse-appear-start ant-motion-collapse"
+            style="height: 0px; opacity: 0;"
          >
            <div
              class="ant-tree-treenode ant-tree-treenode-switcher-close"
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@ -31,6 +31,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 | draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |  |
 | expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |  |
 | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |  |
+| height | Config virtual scroll height. Will not support horizontal scroll when enable this | number | - |  |
 | loadData | Load data asynchronously | function(node) | - |  |
 | loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] | \[] |  |
 | multiple | Allows selecting multiple treeNodes | boolean | false |  |
@ -107,3 +108,7 @@ File icon realize by using switcherIcon. You can overwrite the style to hide it:
 ### Why defaultExpandedAll not working on ajax data?

 `default` prefix prop only works when inited. So `defaultExpandedAll` has already executed when ajax load data. You can control `expandedKeys` or render Tree when data loaded to realize expanded all.
+
+### Virtual scroll limitation
+
+Virtual scroll only render items in visible region. Thus not support auto width (like long `title` with horizontal scroll).
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@ -32,6 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | draggable | 设置节点可拖拽（IE>8） | boolean | false |  |
 | expandedKeys | （受控）展开指定的树节点 | string\[] | \[] |  |
 | filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - |  |
+| height | 设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动 | number | - |  |
 | loadData | 异步加载数据 | function(node) | - |  |
 | loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] | \[] |  |
 | multiple | 支持点选多个节点（节点本身） | boolean | false |  |
@ -108,3 +109,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 ### defaultExpandedAll 在异步加载数据时为何不生效？

 `default` 前缀属性只有在初始化时生效，因而异步加载数据时 `defaultExpandedAll` 已经执行完成。你可以通过受控 `expandedKeys` 或者在数据加载完成后渲染 Tree 来实现全部展开。
+
+### 虚拟滚动的限制
+
+虚拟滚动通过在仅渲染可视区域的元素来提升渲染性能。但是同时由于不会渲染所有节点，所以无法自动拓转横向宽度（比如超长 `title` 的横向滚动条）。
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@ -14,7 +14,7 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import devWarning from '../_util/devWarning';
 import TransButton from '../_util/transButton';
 import raf from '../_util/raf';
-import isStyleSupport from '../_util/styleChecker';
+import { isStyleSupport } from '../_util/styleChecker';
 import Tooltip from '../tooltip';
 import Typography, { TypographyProps } from './Typography';
 import Editable from './Editable';
--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/components/upload/tests/snapshots/uploadlist.test.js.snap
@ -28,7 +28,7 @@ exports[`Upload List handle error 1`] = `
    class="ant-upload-list ant-upload-list-text"
  >
    <div
-      class=""
+      class="ant-upload-animate-enter ant-upload-animate-enter-active"
    >
      <div
        class="ant-upload-list-item ant-upload-list-item-error ant-upload-list-item-list-type-text"
@ -287,7 +287,7 @@ exports[`Upload List should be uploading when upload a file 2`] = `
    class="ant-upload-list ant-upload-list-text"
  >
    <div
-      class=""
+      class="ant-upload-animate-enter ant-upload-animate-enter-active"
    >
      <span>
        <div
--- a/components/upload/tests/uploadlist.test.js
+++ b/components/upload/tests/uploadlist.test.js
@ -131,7 +131,7 @@ describe('Upload List', () => {
    );
    expect(wrapper.find('.ant-upload-list-item').length).toBe(2);
    wrapper.find('.ant-upload-list-item').at(0).find('.anticon-delete').simulate('click');
-    await sleep(400);
+    await sleep(1000);
    wrapper.update();
    expect(wrapper.find('.ant-upload-list-item').hostNodes().length).toBe(1);
  });
--- a/docs/react/migration-v4.en-US.md
+++ b/docs/react/migration-v4.en-US.md
@ -125,6 +125,7 @@ const Demo = () => (
  - use virtual scrolling.
  - `onBlur` no longer trigger value change and return React origin `event` object instead.
  - AutoComplete no longer support `optionLabelProp`. Please set Option `value` directly.
+  - AutoComplete options definition align with Select. Please use `options` instead of `dataSource`.
  - Select remove `dropdownMenuStyle` prop.
  - Use `listHeight` to config popup height instead of `dropdownStyle`.
  - `filterOption` return origin data with second params instead. No need to use `option.props.children` for matching.
--- a/docs/react/migration-v4.zh-CN.md
+++ b/docs/react/migration-v4.zh-CN.md
@ -125,6 +125,7 @@ const Demo = () => (
  - 使用虚拟滚动。
  - `onBlur` 时不再修改选中值，且返回 React 原生的 `event` 对象。
  - AutoComplete 不再支持 `optionLabelProp`，请直接设置 Option `value` 属性。
+  - AutoComplete 选项与 Select 对齐，请使用 `options` 代替 `dataSource`。
  - Select 移除 `dropdownMenuStyle` 属性。
  - 如果你需要设置弹窗高度请使用 `listHeight` 来代替 `dropdownStyle` 的高度样式。
  - `filterOption` 第二个参数直接返回原数据，不在需要通过 `option.props.children` 来进行匹配。
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.6.4",
+  "version": "4.6.5",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -207,7 +207,7 @@
    "eslint-plugin-markdown": "^1.0.0",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-unicorn": "^21.0.0",
+    "eslint-plugin-unicorn": "^22.0.0",
    "eslint-tinker": "^0.5.0",
    "fetch-jsonp": "^1.1.3",
    "fs-extra": "^9.0.0",
--- a/tests/setup.js
+++ b/tests/setup.js
@ -21,6 +21,12 @@ if (typeof window !== 'undefined') {
      })),
    });
  }
+
+  // Fix css-animation or rc-motion deps on these
+  // https://github.com/react-component/motion/blob/9c04ef1a210a4f3246c9becba6e33ea945e00669/src/util/motion.ts#L27-L35
+  // https://github.com/yiminghe/css-animation/blob/a5986d73fd7dfce75665337f39b91483d63a4c8c/src/Event.js#L44
+  window.AnimationEvent = window.AnimationEvent || (() => {});
+  window.TransitionEvent = window.TransitionEvent || (() => {});
 }

 const Enzyme = require('enzyme');
--- a/tests/utils.ts
+++ b/tests/utils.ts
@ -1,4 +1,5 @@
 import MockDate from 'mockdate';
+import { act } from 'react-dom/test-utils';

 export function setMockDate(dateString = '2017-09-18T03:30:07.795') {
  MockDate.set(dateString);
@ -10,4 +11,8 @@ export function resetMockDate() {

 const globalTimeout = global.setTimeout;

-export const sleep = (timeout = 0) => new Promise(resolve => globalTimeout(resolve, timeout));
+export const sleep = async (timeout = 0) => {
+  await act(async () => {
+    await new Promise(resolve => globalTimeout(resolve, timeout));
+  });
+};