chore: feature merge master

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`

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`

components/_util/__tests__/util.test.js

@@ -3,17 +3,21 @@ 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);
 
+  describe('throttle', () => {
     it('throttle function should work', async () => {
       const callback = jest.fn();
       const throttled = throttleByAnimationFrame(callback);
@@ -38,6 +42,24 @@ describe('Test utils function', () => {
       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', () => {
     it('returns all data-* properties from an object', () => {
       const props = {
@@ -187,20 +209,23 @@ describe('Test utils function', () => {
     });
   });
 
-  describe('openAnimation', () => {
+  describe('style', () => {
-    it('should support openAnimation', () => {
+    it('isFlexSupported', () => {
-      const done = jest.fn();
+      expect(isFlexSupported).toBe(true);
-      const domNode = document.createElement('div');
+    });
-      expect(typeof openAnimation.enter).toBe('function');
+
-      expect(typeof openAnimation.leave).toBe('function');
+    it('isStyleSupport', () => {
-      expect(typeof openAnimation.appear).toBe('function');
+      expect(isStyleSupport('color')).toBe(true);
-      const appear = openAnimation.appear(domNode, done);
+      expect(isStyleSupport('not-existed')).toBe(false);
-      const enter = openAnimation.enter(domNode, done);
+    });
-      const leave = openAnimation.leave(domNode, done);
+
-      expect(typeof appear.stop).toBe('function');
+    it('isStyleSupport return false in service side', () => {
-      expect(typeof enter.stop).toBe('function');
+      const spy = jest
-      expect(typeof leave.stop).toBe('function');
+        .spyOn(window.document, 'documentElement', 'get')
-      expect(done).toHaveBeenCalled();
+        .mockImplementation(() => undefined);
+      expect(isStyleSupport('color')).toBe(false);
+      expect(isStyleSupport('not-existed')).toBe(false);
+      spy.mockRestore();
     });
   });
 });

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;

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 throttle(target: any, key: string, descriptor: any) {
-  return function(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;
         }
 

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);
   };
 

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' },
+];
+```

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' },
+];
+```

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';

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}>

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();
+  });
+});

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>

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;

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();
+  });
+});

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;
 

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';

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

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 {

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"

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(

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);
+```

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;

components/layout/style/index.less

@@ -109,8 +109,19 @@
         cursor: pointer;
         transition: background 0.3s ease;
 
-        &:hover {
+        &::after {
-          background: tint(@layout-sider-background, 10%);
+          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 {

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>

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(
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
-      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: [] });
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
-    wrapper.update();
+  });
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
+
-    wrapper.setProps({ openKeys: ['1'] });
+  it('should accept openKeys in mode vertical', () => {
-    wrapper.update();
+    const wrapper = mount(
-    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
+      <Menu openKeys={['1']} mode="vertical">
-      true,
+        <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(
+    expectSubMenuBehavior(
-      true,
+      wrapper,
-    );
+      () => wrapper.setProps({ openKeys: ['1'] }),
-    wrapper.setProps({ openKeys: [] });
+      () => 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,
     );
   });
 
-  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(
+    expectSubMenuBehavior(
-      true,
+      wrapper,
-    );
+      () => wrapper.setProps({ openKeys: ['1'] }),
-    wrapper.setProps({ openKeys: [] });
+      () => 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,
     );
   });
 
@@ -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">
+        <Menu.Item key="menu1" icon={<InboxOutlined />}>
-          <InboxOutlined />
+          Option
-          <span>Option</span>
         </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">
+        <Menu.Item key="menu1" icon={<InboxOutlined />}>
-          <InboxOutlined />
+          Option
-          <span>Option</span>
         </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);
+      expectSubMenuBehavior(
-      toggleMenu(wrapper, 0, 'click');
+        wrapper,
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
+        () => toggleMenu(wrapper, 0, 'click'),
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
+        () => toggleMenu(wrapper, 0, 'click'),
-        true,
       );
-      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);
+      expectSubMenuBehavior(
-      toggleMenu(wrapper, 0, 'mouseenter');
+        wrapper,
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
+        () => toggleMenu(wrapper, 0, 'mouseenter'),
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
+        () => toggleMenu(wrapper, 0, 'mouseleave'),
-        true,
-      );
-      toggleMenu(wrapper, 0, 'mouseleave');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
       );
     });
 
@@ -383,15 +441,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
+      expectSubMenuBehavior(
-      toggleMenu(wrapper, 0, 'click');
+        wrapper,
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
+        () => toggleMenu(wrapper, 0, 'click'),
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
+        () => toggleMenu(wrapper, 0, 'click'),
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
       );
     });
 
@@ -406,15 +459,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
+      expectSubMenuBehavior(
-      toggleMenu(wrapper, 0, 'mouseenter');
+        wrapper,
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
+        () => toggleMenu(wrapper, 0, 'mouseenter'),
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
+        () => toggleMenu(wrapper, 0, 'mouseleave'),
-        true,
-      );
-      toggleMenu(wrapper, 0, 'mouseleave');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
       );
     });
 
@@ -429,15 +477,10 @@ describe('Menu', () => {
           <Menu.Item key="2">menu2</Menu.Item>
         </Menu>,
       );
-      expect(wrapper.find('.ant-menu-sub').length).toBe(0);
+      expectSubMenuBehavior(
-      toggleMenu(wrapper, 0, 'click');
+        wrapper,
-      expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
+        () => toggleMenu(wrapper, 0, 'click'),
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
+        () => toggleMenu(wrapper, 0, 'click'),
-        true,
-      );
-      toggleMenu(wrapper, 0, 'click');
-      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        true,
       );
     });
   });
@@ -446,16 +489,13 @@ describe('Menu', () => {
     jest.useFakeTimers();
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed>
-        <Menu.Item key="1" title="bamboo lucky">
+        <Menu.Item key="1" title="bamboo lucky" icon={<PieChartOutlined />}>
-          <PieChartOutlined />
-          <span>
           Option 1
           <img
             style={{ width: 20 }}
             alt="test"
             src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
           />
-          </span>
         </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
+                <SubMenu key="sub1" icon={<UserOutlined />} title="User">
-                  key="sub1"
-                  title={
-                    <span>
-                      <UserOutlined />
-                      <span>User</span>
-                    </span>
-                  }
-                >
                   <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">
+        <Menu.Item key="mail" icon={<MailOutlined />}>
-          <MailOutlined />
           Navigation One
         </Menu.Item>
-        <Menu.Item key="app">
+        <Menu.Item key="app" icon={<AppstoreOutlined />}>
-          <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">
+        <Menu.Item key="1" icon={<PieChartOutlined />}>
-          <PieChartOutlined />
+          Option 1
-          <span>Option 1</span>
         </Menu.Item>
       </Menu>,
     );
@@ -580,9 +609,8 @@ describe('Menu', () => {
     jest.useFakeTimers();
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed={false}>
-        <Menu.Item key="1">
+        <Menu.Item key="1" icon={<PieChartOutlined />}>
-          <PieChartOutlined />
+          Option 1
-          <span>Option 1</span>
         </Menu.Item>
       </Menu>,
     );

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;
     }

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,

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();
 

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();
     });

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();
+  });
+});

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

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

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

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();

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>

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"

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).

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` 的横向滚动条）。

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';

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

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);
   });

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.

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` 来进行匹配。

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",

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');

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));
+  });
+};