docs: 🌐 translate more design documents (#26125)

* docs: 🌐 translate more design documents

* translate docs/spec/copywriting.en-US.md

* translate docs/spec/data-format.en-US.md

* translate docs/spec/detail-page.en-US.md

* fix remark link

* update link

* translate docs/spec/visualization-page.en-US.md

* update docs

* update docs

.eslintignore

@@ -26,4 +26,5 @@ dist
 coverage
 **/*.d.ts
 # Scripts
-scripts/previewEditor/**/*
+scripts/previewEditor/**/*
+jest-stare

.github/PULL_REQUEST_TEMPLATE.md

@@ -18,6 +18,8 @@ Please makes sure that these form are filled before submitting your pull request
 - [ ] TypeScript definition update
 - [ ] Bundle size optimization
 - [ ] Performance optimization
+- [ ] Enhancement feature
+- [ ] Internationalization
 - [ ] Refactoring
 - [ ] Code style optimization
 - [ ] Test Case

.github/PULL_REQUEST_TEMPLATE/pr_cn.md

@@ -14,11 +14,13 @@
 - [ ] 日常 bug 修复
 - [ ] 站点、文档改进
 - [ ] 演示代码改进
-- [ ] 组件样式改进
+- [ ] 组件样式/交互改进
 - [ ] TypeScript 定义更新
 - [ ] 包体积优化
 - [ ] 性能优化
 - [ ] 重构
+- [ ] 功能增强
+- [ ] 国际化改进
 - [ ] 代码风格优化
 - [ ] 测试用例
 - [ ] 分支合并

CHANGELOG.en-US.md

@@ -15,6 +15,58 @@ timeline: true
 
 ---
 
+## 4.5.4
+
+`2020-08-12`
+
+- 🐞 Fix Form.Item `hidden` not working in less. [#26152](https://github.com/ant-design/ant-design/pull/26152)
+- 🐞 Fix Dropdown render issue when `overlay` is string. [#26135](https://github.com/ant-design/ant-design/pull/26135)
+- 🐞 Fix Table pagination disappear when last record in last page is deleted. [#26133](https://github.com/ant-design/ant-design/pull/26133) [@QoVoQ](https://github.com/QoVoQ)
+- Tree
+  - 🐞 Fix Tree.DirectoryTree can not use `scrollTo` with ref. [#26129](https://github.com/ant-design/ant-design/pull/26129)
+  - 🐞 Fix Tree lost line between top level nodes when enable `showLine`. [#25991](https://github.com/ant-design/ant-design/pull/25991) [@zhangchen915](https://github.com/zhangchen915)
+- 💄 Add `@badge-color` less variable. [#26159](https://github.com/ant-design/ant-design/pull/26159)
+- RTL
+  - 🐞 Fixed Input.Search border style in RTL mode. [#26156](https://github.com/ant-design/ant-design/pull/26156)
+  - 🐞 Fix the style of Input when `addonBefore` in RTL mode. [#26153](https://github.com/ant-design/ant-design/pull/26153)
+  - 🐞 Fix multiple style issues for DatePicker in RTL mode. [#26149](https://github.com/ant-design/ant-design/pull/26149) [#26157](https://github.com/ant-design/ant-design/pull/26157) [#26158](https://github.com/ant-design/ant-design/pull/26158)
+- TypeScript
+  - 🐞 Fix Slider `handleStyle` and `trackStyle` TypeScript definitions. [#26160](https://github.com/ant-design/ant-design/pull/26160)
+
+## 4.5.3
+
+`2020-08-08`
+
+- Menu
+  - 🐞 Fix horizontal Menu dark `theme` style under dark theme. [#26062](https://github.com/ant-design/ant-design/pull/26062)
+  - 🐞 Fix the position of the horizontal Menu in dark theme and RTL mode. [#26032](https://github.com/ant-design/ant-design/pull/26032)
+- Table
+  - 🐞 Fix Table crash when `dataSource` contains number. [#26042](https://github.com/ant-design/ant-design/pull/26042)
+  - 🐞 Fix Table empty filters throw warning. [#26001](https://github.com/ant-design/ant-design/pull/26001)
+- Form
+  - 🐞 Fix Form.Item `hidden` not work with `noStyle`. [#26020](https://github.com/ant-design/ant-design/pull/26020)
+  - 💄 Fix Form.Item margin is uncorrect in compact mode. [#26069](https://github.com/ant-design/ant-design/pull/26069)
+- Transfer
+  - 🐞 Fix the mouse style of the head dropDown when Transfer is `disabled`. [#26005](https://github.com/ant-design/ant-design/pull/26005)
+  - 🐞 Fix the problem that Pagination is not `disabled` when Transfer is `disabled`. [#26009](https://github.com/ant-design/ant-design/pull/26009)
+- Cascader
+  - 💄 Cascader selector down arrow doesn't rotate. [#26078](https://github.com/ant-design/ant-design/pull/26078) [@07akioni](https://github.com/07akioni)
+  - 🐞 Fix Cascader text overflow bug in Firefox. [#26011](https://github.com/ant-design/ant-design/pull/26011)
+  - 🐞 Fix the problem that the color of mouse hover border is abnormal when Cascader is `disabled`. [#25970](https://github.com/ant-design/ant-design/pull/25970)
+- Select
+  - 💄 Optimize the `disabled` style of Select multiple mode. [#25980](https://github.com/ant-design/ant-design/pull/25980)
+  - 🐞 Fix the mouse style of custom icon when Select is `disabled`. [#26002](https://github.com/ant-design/ant-design/pull/26002)
+- 🐞 Fix Breadcrumb.Item lost separator after wrapping in component. [#25984](https://github.com/ant-design/ant-design/pull/25984) [@flyerH](https://github.com/flyerH)
+- 🐞 Fix InputNumber dark theme handler background color. [#26072](https://github.com/ant-design/ant-design/pull/26072)
+- 🐞 Fix the missing `key` of Avatar.Group. [#26098](https://github.com/ant-design/ant-design/pull/26098)
+- 💄 Adjusts Mentions `readOnly` mouse style to native style. [#25977](https://github.com/ant-design/ant-design/pull/25977)
+- 💄 Add `@btn-line-height`. [#26014](https://github.com/ant-design/ant-design/pull/26014)
+- 💄 Optimize Pagination style when `simple` type and `disabled`. [#26008](https://github.com/ant-design/ant-design/pull/26008)
+- 🐞 Fix Modal `useModal` missing style issue. [#25967](https://github.com/ant-design/ant-design/pull/25967)
+- 🐞 Fix Steps RTL style when use `progress`. [#26075](https://github.com/ant-design/ant-design/pull/26075)
+- 🌐 Improve Arabic locale. [#26094](https://github.com/ant-design/ant-design/pull/26094) [@Mohelm97](https://github.com/Mohelm97)
+- 🌐 Improve fr_FR localization. [#26034](https://github.com/ant-design/ant-design/pull/26034) [@Thanaen](https://github.com/Thanaen)
+
 ## 4.5.2
 
 `2020-08-02`

CHANGELOG.zh-CN.md

@@ -15,6 +15,58 @@ timeline: true
 
 ---
 
+## 4.5.4
+
+`2020-08-12`
+
+- 🐞 修复 Form.Item 在 `hidden` 时引用 less 样式时失效的问题。[#26152](https://github.com/ant-design/ant-design/pull/26152)
+- 🐞 修复 Dropdown `overlay` 为 string 时渲染错误的问题。[#26135](https://github.com/ant-design/ant-design/pull/26135)
+- 🐞 修复 Table 删除最后一页的最后一条记录时分页消失的问题。[#26133](https://github.com/ant-design/ant-design/pull/26133) [@QoVoQ](https://github.com/QoVoQ)
+- Tree
+  - 🐞 修复 Tree.DirectoryTree 不能通过 `ref` 调用 `scrollTo` 的问题。[#26129](https://github.com/ant-design/ant-design/pull/26129)
+  - 🐞 修复 Tree 开启 `showLine` 时顶级节点间缺少连接线的问题。[#25991](https://github.com/ant-design/ant-design/pull/25991) [@zhangchen915](https://github.com/zhangchen915)
+- 💄 新增 `@badge-color` less 变量。[#26159](https://github.com/ant-design/ant-design/pull/26159)
+- RTL
+  - 🐞 修复 Input.Search 在 RTL 模式下的边框样式。[#26156](https://github.com/ant-design/ant-design/pull/26156)
+  - 🐞 修复 Input 在 RTL 模式下 `addonBefore` 的样式问题。[#26153](https://github.com/ant-design/ant-design/pull/26153)
+  - 🐞 修复 DatePicker 在 RTL 模式下的多个样式问题。[#26149](https://github.com/ant-design/ant-design/pull/26149) [#26157](https://github.com/ant-design/ant-design/pull/26157) [#26158](https://github.com/ant-design/ant-design/pull/26158)
+- TypeScript
+  - 🐞 修复 Slider `handleStyle` 和 `trackStyle` 属性的类型定义。[#26160](https://github.com/ant-design/ant-design/pull/26160)
+
+## 4.5.3
+
+`2020-08-08`
+
+- Menu
+  - 🐞 修复水平 Menu 黑暗 `theme` 在暗黑主题下的样式。[#26062](https://github.com/ant-design/ant-design/pull/26062)
+  - 🐞 修复水平方向 Menu 在暗黑主题 RTL 模式下的位置。[#26032](https://github.com/ant-design/ant-design/pull/26032)
+- Table
+  - 🐞 修复 Table `dataSource` 中含有非法数值时会报错的问题。[#26042](https://github.com/ant-design/ant-design/pull/26042)
+  - 🐞 修复 Table 空筛选项在控制台抛出 warning 的问题。[#26001](https://github.com/ant-design/ant-design/pull/26001)
+- Form
+  - 🐞 修复 Form.Item `hidden` 不能和 `noStyle` 一同使用的问题。[#26020](https://github.com/ant-design/ant-design/pull/26020)
+  - 💄 修复 Form 紧凑模式下表单项 margin 计算错误。[#26069](https://github.com/ant-design/ant-design/pull/26069)
+- Transfer
+  - 🐞 修复 Transfer 禁用时分页未禁用的问题。[#26009](https://github.com/ant-design/ant-design/pull/26009)
+  - 🐞 修复 Transfer 禁用时头部下拉按钮的鼠标样式。[#26005](https://github.com/ant-design/ant-design/pull/26005)
+- Cascader
+  - 🐞 修复 Cascader 在 Firefox 下文本和箭头重叠的问题。[#26011](https://github.com/ant-design/ant-design/pull/26011)
+  - 💄 Cascader 的选择器箭头不再旋转。[#26078](https://github.com/ant-design/ant-design/pull/26078) [@07akioni](https://github.com/07akioni)
+  - 🐞 修复 Cascader 禁用时鼠标悬浮边框颜色异常的问题。[#25970](https://github.com/ant-design/ant-design/pull/25970)
+- Select
+  - 💄 优化 Select 多选模式 `disabled` 样式。[#25980](https://github.com/ant-design/ant-design/pull/25980)
+  - 🐞 修复 Select 禁用时自定义图标的鼠标样式。[#26002](https://github.com/ant-design/ant-design/pull/26002)
+- 🐞 修复 Breadcrumb.Item 封装后丢失分隔符的问题。[#25984](https://github.com/ant-design/ant-design/pull/25984) [@flyerH](https://github.com/flyerH)
+- 🐞 修复 Avatar.Group key 缺失的问题。[#26098](https://github.com/ant-design/ant-design/pull/26098)
+- 💄 调整 Mentions `readOnly` 鼠标样式为原生样式。[#25977](https://github.com/ant-design/ant-design/pull/25977)
+- 💄 新增 `@btn-line-height` 变量。[#26014](https://github.com/ant-design/ant-design/pull/26014)
+- 💄 优化 Pagination 简洁分页禁用样式。[#26008](https://github.com/ant-design/ant-design/pull/26008)
+- 🐞 修复 Modal `useModal` 丢失样式的问题。[#25967](https://github.com/ant-design/ant-design/pull/25967)
+- 🐞 修复 InputNumber 暗黑主题下操作栏背景色。[#26072](https://github.com/ant-design/ant-design/pull/26072)
+- 🐞 修复 Steps 使用 `progress` 时的 RTL 样式问题。[#26075](https://github.com/ant-design/ant-design/pull/26075)
+- 🌐 改进阿拉伯语 Arabic 的国际化。[#26094](https://github.com/ant-design/ant-design/pull/26094) [@Mohelm97](https://github.com/Mohelm97)
+- 🌐 改进法语 fr_FR 国际化。[#26034](https://github.com/ant-design/ant-design/pull/26034) [@Thanaen](https://github.com/Thanaen)
+
 ## 4.5.2
 
 `2020-08-02`

components/_util/motion.tsx

@@ -1,36 +1,14 @@
-import * as React from 'react';
-
-type MotionFunc = (element: HTMLElement) => React.CSSProperties;
-type MotionEndFunc = (element: HTMLElement, event: TransitionEvent) => boolean;
-
-interface Motion {
-  visible?: boolean;
-  motionName?: string; // It also support object, but we only use string here.
-  motionAppear?: boolean;
-  motionEnter?: boolean;
-  motionLeave?: boolean;
-  motionLeaveImmediately?: boolean; // Trigger leave motion immediately
-  motionDeadline?: number;
-  removeOnLeave?: boolean;
-  leavedClassName?: string;
-  onAppearStart?: MotionFunc;
-  onAppearActive?: MotionFunc;
-  onAppearEnd?: MotionEndFunc;
-  onEnterStart?: MotionFunc;
-  onEnterActive?: MotionFunc;
-  onEnterEnd?: MotionEndFunc;
-  onLeaveStart?: MotionFunc;
-  onLeaveActive?: MotionFunc;
-  onLeaveEnd?: MotionEndFunc;
-}
+import { CSSMotionProps } from 'rc-motion';
+import { MotionEventHandler, MotionEndEventHandler } from 'rc-motion/lib/CSSMotion';
 
 // ================== Collapse Motion ==================
-const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
-const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
-const skipOpacityTransition: MotionEndFunc = (_, event) => event.propertyName === 'height';
+const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
+const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
+const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
+const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
+  (event as TransitionEvent).propertyName === 'height';
 
-const collapseMotion: Motion = {
+const collapseMotion: CSSMotionProps = {
   motionName: 'ant-motion-collapse',
   onAppearStart: getCollapsedHeight,
   onEnterStart: getCollapsedHeight,

components/affix/demo/debug.md

@@ -2,7 +2,7 @@
 order: 99
 title:
   zh-CN: 调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678
-  en-US:
+  en-US: debug
 debug: true
 ---
 

components/affix/index.en-US.md

@@ -19,8 +19,8 @@ Please note that Affix should not cover other content on the page, especially wh
 | --- | --- | --- | --- |
 | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
 | offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
+| onChange | Callback for when Affix state is changed | function(affixed) | - |
 | target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
-| onChange | Callback for when Affix state is changed | Function(affixed) | - |
 
 **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
 

components/affix/index.zh-CN.md

@@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 | --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
+| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
-| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | - |
 
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
 

components/alert/__tests__/index.test.tsx

@@ -21,20 +21,17 @@ describe('Alert', () => {
 
   it('could be closed', () => {
     const onClose = jest.fn();
-    const afterClose = jest.fn();
     const wrapper = mount(
       <Alert
         message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
         type="warning"
         closable
         onClose={onClose}
-        afterClose={afterClose}
       />,
     );
     wrapper.find('.ant-alert-close-icon').simulate('click');
-    expect(onClose).toHaveBeenCalled();
     jest.runAllTimers();
-    expect(afterClose).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
   });
 
   describe('data and aria props', () => {

components/alert/index.tsx

@@ -8,7 +8,7 @@ import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
-import Animate from 'rc-animate';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
 
 import { ConfigContext } from '../config-provider';
@@ -75,12 +75,12 @@ const Alert: AlertInterface = ({
   onMouseEnter,
   onMouseLeave,
   onClick,
+  afterClose,
   showIcon,
   closable,
   closeText,
   ...props
 }) => {
-  const [closing, setClosing] = React.useState(false);
   const [closed, setClosed] = React.useState(false);
 
   const ref = React.useRef<HTMLElement>();
@@ -88,14 +88,8 @@ const Alert: AlertInterface = ({
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
-    setClosing(true);
-    props.onClose?.(e);
-  };
-
-  const animationEnd = () => {
-    setClosing(false);
     setClosed(true);
-    props.afterClose?.();
+    props.onClose?.(e);
   };
 
   const getType = () => {
@@ -149,7 +143,6 @@ const Alert: AlertInterface = ({
     prefixCls,
     `${prefixCls}-${type}`,
     {
-      [`${prefixCls}-closing`]: closing,
       [`${prefixCls}-with-description`]: !!description,
       [`${prefixCls}-no-icon`]: !isShowIcon,
       [`${prefixCls}-banner`]: !!banner,
@@ -161,30 +154,36 @@ const Alert: AlertInterface = ({
 
   const dataOrAriaProps = getDataOrAriaProps(props);
 
-  return closed ? null : (
-    <Animate
-      component=""
-      showProp="data-show"
-      transitionName={`${prefixCls}-slide-up`}
-      onEnd={animationEnd}
+  return (
+    <CSSMotion
+      visible={!closed}
+      motionName={`${prefixCls}-motion`}
+      motionAppear={false}
+      motionEnter={false}
+      onLeaveStart={node => ({
+        maxHeight: node.offsetHeight,
+      })}
+      onLeaveEnd={afterClose}
     >
-      <div
-        ref={ref}
-        data-show={!closing}
-        className={alertCls}
-        style={style}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onClick={onClick}
-        role="alert"
-        {...dataOrAriaProps}
-      >
-        {isShowIcon ? renderIconNode() : null}
-        <span className={`${prefixCls}-message`}>{message}</span>
-        <span className={`${prefixCls}-description`}>{description}</span>
-        {renderCloseIcon()}
-      </div>
-    </Animate>
+      {({ className: motionClassName, style: motionStyle }) => (
+        <div
+          ref={ref}
+          data-show={!closed}
+          className={classNames(alertCls, motionClassName)}
+          style={{ ...style, ...motionStyle }}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onClick={onClick}
+          role="alert"
+          {...dataOrAriaProps}
+        >
+          {isShowIcon ? renderIconNode() : null}
+          <span className={`${prefixCls}-message`}>{message}</span>
+          <span className={`${prefixCls}-description`}>{description}</span>
+          {renderCloseIcon()}
+        </div>
+      )}
+    </CSSMotion>
   );
 };
 

components/alert/style/index.less

@@ -7,7 +7,6 @@
   .reset-component;
 
   position: relative;
-  max-height: 1000vh;
   padding: 8px 15px 8px 37px;
   word-wrap: break-word;
   border-radius: @border-radius-base;
@@ -146,18 +145,20 @@
     display: block;
   }
 
-  &&-closing {
-    max-height: 0;
-    margin: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    transform-origin: 50% 0;
-    transition: all 0.3s @ease-in-out-circ;
+  &&-motion-leave {
+    overflow: hidden;
+    opacity: 1;
+    transition: max-height 0.3s @ease-in-out-circ, opacity 0.3s @ease-in-out-circ,
+      padding-top 0.3s @ease-in-out-circ, padding-bottom 0.3s @ease-in-out-circ,
+      margin-bottom 0.3s @ease-in-out-circ;
   }
 
-  &-slide-up-leave {
-    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
-    animation-fill-mode: both;
+  &&-motion-leave-active {
+    max-height: 0;
+    margin-bottom: 0 !important;
+    padding-top: 0;
+    padding-bottom: 0;
+    opacity: 0;
   }
 
   &-banner {
@@ -167,30 +168,4 @@
   }
 }
 
-@keyframes antAlertSlideUpIn {
-  0% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-  100% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-}
-
-@keyframes antAlertSlideUpOut {
-  0% {
-    transform: scaleY(1);
-    transform-origin: 0% 0%;
-    opacity: 1;
-  }
-  100% {
-    transform: scaleY(0);
-    transform-origin: 0% 0%;
-    opacity: 0;
-  }
-}
-
 @import './rtl';

components/auto-complete/index.en-US.md

@@ -24,7 +24,7 @@ When there is a need for autocomplete functionality.
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultValue | Initial selected option | string | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true |  |
+| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true |  |
 | placeholder | The placeholder of input | string | - |  |
 | value | Selected option | string | - |  |
 | onBlur | Called when leaving the component | function() | - |  |

components/auto-complete/index.zh-CN.md

@@ -25,7 +25,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false` | boolean \| function(inputValue, option) | true |  |
+| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
 | placeholder | 输入框提示 | string | - |  |
 | value | 指定当前选中的条目 | string | - |  |

components/avatar/group.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
+import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import Avatar from './avatar';
 import Popover from '../popover';
@@ -28,13 +29,19 @@ const Group: React.FC<GroupProps> = props => {
   );
 
   const { children, maxPopoverPlacement = 'top' } = props;
-  const childrenWithProps = toArray(children);
+  const childrenWithProps = toArray(children).map((child, index) => {
+    return cloneElement(child, {
+      key: `avatar-key-${index}`,
+    });
+  });
+
   const numOfChildren = childrenWithProps.length;
   if (maxCount && maxCount < numOfChildren) {
     const childrenShow = childrenWithProps.slice(0, maxCount);
     const childrenHidden = childrenWithProps.slice(maxCount, numOfChildren);
     childrenShow.push(
       <Popover
+        key="avatar-popover-key"
         content={childrenHidden}
         trigger="hover"
         placement={maxPopoverPlacement}

components/badge/style/index.less

@@ -23,7 +23,7 @@
     line-height: @badge-height;
     white-space: nowrap;
     text-align: center;
-    background: @highlight-color;
+    background: @badge-color;
     border-radius: @badge-height / 2;
     box-shadow: 0 0 0 1px @shadow-color-inverse;
     a,

components/breadcrumb/BreadcrumbItem.tsx

@@ -17,7 +17,7 @@ interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
 }
 const BreadcrumbItem: BreadcrumbItemInterface = ({
   prefixCls: customizePrefixCls,
-  separator,
+  separator = '/',
   children,
   overlay,
   dropdownProps,

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -138,4 +138,23 @@ describe('Breadcrumb', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/25975
+  it('should support Breadcrumb.Item default separator', () => {
+    const MockComponent = () => {
+      return (
+        <span>
+          <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
+        </span>
+      );
+    };
+    const wrapper = render(
+      <Breadcrumb>
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
+        <MockComponent />
+        <Breadcrumb.Item>Application Center</Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@@ -185,6 +185,51 @@ exports[`Breadcrumb should render a menu 1`] = `
 </div>
 `;
 
+exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Location
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Mock Node
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Application Center
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;
+
 exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
 <div
   class="ant-breadcrumb"

components/breadcrumb/demo/basic.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-The simplest use
+The simplest use.
 
 ```jsx
 import { Breadcrumb } from 'antd';

components/breadcrumb/demo/separator-indepent.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-The separator can be customized by setting the separator property: `Breadcrumb.Separator`
+The separator can be customized by setting the separator property: `Breadcrumb.Separator`.
 
 ```jsx
 import { Breadcrumb } from 'antd';

components/breadcrumb/demo/separator.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-The separator can be customized by setting the separator property: separator=">"
+The separator can be customized by setting the separator property: separator=">".
 
 ```jsx
 import { Breadcrumb } from 'antd';

components/breadcrumb/index.en-US.md

@@ -28,10 +28,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 | href | Target of hyperlink | string | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
-| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
+| onClick | Set the handler to handle `click` event | (e:MouseEvent) => void | - |  |
 
 ### Breadcrumb.Separator
 

components/breadcrumb/index.zh-CN.md

@@ -29,10 +29,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 | href | 链接的目的地 | string | - |  |
 | overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | 单击事件 | (e:MouseEvent)=>void | - |  |
-| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
+| onClick | 单击事件 | (e:MouseEvent) => void | - |  |
 
 ### Breadcrumb.Separator
 

components/button/LoadingIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import CSSMotion from 'rc-animate/lib/CSSMotion';
+import CSSMotion from 'rc-motion';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 
 export interface LoadingIconProps {

components/button/index.en-US.md

@@ -28,31 +28,31 @@ And 4 other properties additionally.
 
 ## API
 
-To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
+Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| block | Option to fit button width to its parent width | boolean | false |  |
+| danger | Set the danger status of button | boolean | false |  |
 | disabled | Disabled state of button | boolean | false |  |
 | ghost | Make background transparent and invert text and border colors | boolean | false |  |
 | href | Redirect url of link button | string | - |  |
 | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | Set the icon component of button | ReactNode | - |  |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
+| onClick | Set the handler to handle `click` event | (event) => void | - |  |
 | shape | Can be set to `circle`, `round` or omitted | string | - |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | - |  |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Can be set to `primary` `ghost` `dashed` `danger` `link` `text` `default` | string | `default` |  |
-| onClick | Set the handler to handle `click` event | (event) => void | - |  |
-| block | Option to fit button width to its parent width | boolean | false |  |
-| danger | Set the danger status of button | boolean | false |  |
 
 It accepts all props which native buttons support.
 
 ## FAQ
 
-### How to remove space between 2 chinese characters
+### How to remove space between 2 chinese characters?
 
-Following the Ant Design specification, we will add one space between if Button contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
+Following the Ant Design specification, we will add one space between if Button (exclude Text button and Link button) contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="Button with two Chinese characters" />
 

components/button/index.zh-CN.md

@@ -35,19 +35,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
+| danger | 设置危险按钮 | boolean | false |  |
 | disabled | 按钮失效状态 | boolean | false |  |
 | ghost | 幽灵属性，使按钮背景透明 | boolean | false |  |
 | href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | 设置按钮的图标组件 | ReactNode | - |  |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
+| onClick | 点击按钮时的回调 | (event) => void | - |  |
 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | - |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `danger` \| `link` \| `text` \| `default` | `default` |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
-| block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
-| danger | 设置危险按钮 | boolean | false |  |
 
 支持原生 button 的其他所有属性。
 
@@ -55,7 +55,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 
 ### 如何移除两个汉字之间的空格？
 
-根据 Ant Design 设计规范要求，我们会在按钮内只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
+根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider/#API) 的 `autoInsertSpaceInButton` 为 `false`。
 
 <img src="https://gw.alipayobjects.com/zos/antfincdn/MY%26THAPZrW/38f06cb9-293a-4b42-b183-9f443e79ffea.png" style="box-shadow: none; margin: 0; width: 100px" alt="移除两个汉字之间的空格"  />
 

components/button/style/index.less

@@ -19,7 +19,7 @@
   // Fixing https://github.com/ant-design/ant-design/issues/13214
   // It is a render problem of chrome, which is only happened in the codesandbox demo
   // 0.001px solution works and I don't why
-  line-height: @line-height-base;
+  line-height: @btn-line-height;
   .btn;
   .btn-default;
 

components/cascader/__tests__/__snapshots__/index.test.js.snap

@@ -1074,6 +1074,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
 >
   <div>
     <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
       motionAppear={false}
       motionEnter={false}
       motionLeave={false}
@@ -1088,6 +1089,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
     >
       <CSSMotion
         internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
         motionAppear={false}
         motionEnter={false}
         motionLeave={false}
@@ -1125,7 +1127,6 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
         >
           <PopupInner
             className="ant-cascader-menus"
-            hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
             prefixCls="ant-cascader-menus"
@@ -1135,7 +1136,6 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                 "zIndex": undefined,
               }
             }
-            visible={true}
           >
             <div
               className="ant-cascader-menus"
@@ -1514,6 +1514,7 @@ exports[`Cascader should render not found content 1`] = `
 >
   <div>
     <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
       motionAppear={false}
       motionEnter={false}
       motionLeave={false}
@@ -1528,6 +1529,7 @@ exports[`Cascader should render not found content 1`] = `
     >
       <CSSMotion
         internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
         motionAppear={false}
         motionEnter={false}
         motionLeave={false}
@@ -1565,7 +1567,6 @@ exports[`Cascader should render not found content 1`] = `
         >
           <PopupInner
             className="ant-cascader-menus ant-cascader-menu-empty"
-            hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
             prefixCls="ant-cascader-menus"
@@ -1575,7 +1576,6 @@ exports[`Cascader should render not found content 1`] = `
                 "zIndex": undefined,
               }
             }
-            visible={true}
           >
             <div
               className="ant-cascader-menus ant-cascader-menu-empty"
@@ -1835,6 +1835,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
 >
   <div>
     <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
       motionAppear={false}
       motionEnter={false}
       motionLeave={false}
@@ -1849,6 +1850,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
     >
       <CSSMotion
         internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
         motionAppear={false}
         motionEnter={false}
         motionLeave={false}
@@ -1886,7 +1888,6 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
         >
           <PopupInner
             className="ant-cascader-menus ant-cascader-menu-empty"
-            hiddenClassName="ant-cascader-menus-hidden"
             onMouseDown={[Function]}
             onTouchStart={[Function]}
             prefixCls="ant-cascader-menus"
@@ -1896,7 +1897,6 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                 "zIndex": undefined,
               }
             }
-            visible={true}
           >
             <div
               className="ant-cascader-menus ant-cascader-menu-empty"

components/cascader/style/index.less

@@ -110,16 +110,14 @@
       color: @disabled-color;
       font-size: 12px;
       line-height: 12px;
-      transition: transform 0.2s;
-      &&-expand {
-        transform: rotate(180deg);
-      }
     }
   }
 
   // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
   &-picker-label:hover + &-input {
-    .hover;
+    &:not(.@{cascader-prefix-cls}-picker-disabled &) {
+      .hover;
+    }
   }
 
   &-picker-small &-picker-clear,
@@ -190,8 +188,10 @@
   }
   &-menu-item {
     padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
+    overflow: hidden;
     line-height: @cascader-dropdown-line-height;
     white-space: nowrap;
+    text-overflow: ellipsis;
     cursor: pointer;
     transition: all 0.3s;
     &:hover {

components/config-provider/context.tsx

@@ -11,7 +11,7 @@ export interface ConfigConsumerProps {
   getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   rootPrefixCls?: string;
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
   renderEmpty: RenderEmptyHandler;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
@@ -32,7 +32,7 @@ export interface ConfigConsumerProps {
 
 export const ConfigContext = React.createContext<ConfigConsumerProps>({
   // We provide a default function for Context without provider
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
     if (customizePrefixCls) return customizePrefixCls;
 
     return suffixCls ? `ant-${suffixCls}` : 'ant';

components/config-provider/index.en-US.md

@@ -17,8 +17,8 @@ import { ConfigProvider } from 'antd';
 
 // ...
 
-return (
-  <ConfigProvider {...yourConfig}>
+export default () => (
+  <ConfigProvider direction="rtl">
     <App />
   </ConfigProvider>
 );

components/config-provider/index.zh-CN.md

@@ -18,8 +18,8 @@ import { ConfigProvider } from 'antd';
 
 // ...
 
-return (
-  <ConfigProvider {...yourConfig}>
+export default () => (
+  <ConfigProvider direction="rtl">
     <App />
   </ConfigProvider>
 );

components/date-picker/__tests__/__snapshots__/demo.test.js.snap

@@ -6,7 +6,7 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
 >
   <div
     class="ant-space-item"
-    style="margin-bottom:12px"
+    style="margin-bottom:8px"
   >
     <div
       class="ant-picker"
@@ -51,120 +51,180 @@ exports[`renders ./components/date-picker/demo/basic.md correctly 1`] = `
   </div>
   <div
     class="ant-space-item"
+    style="margin-bottom:8px"
   >
     <div
-      class="ant-space ant-space-horizontal ant-space-align-center"
+      class="ant-picker"
     >
       <div
-        class="ant-space-item"
-        style="margin-right:8px"
+        class="ant-picker-input"
       >
-        <div
-          class="ant-select ant-select-single ant-select-show-arrow"
+        <input
+          autocomplete="off"
+          placeholder="Select week"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
         >
-          <div
-            class="ant-select-selector"
-          >
-            <span
-              class="ant-select-selection-search"
-            >
-              <input
-                aria-activedescendant="undefined_list_0"
-                aria-autocomplete="list"
-                aria-controls="undefined_list"
-                aria-haspopup="listbox"
-                aria-owns="undefined_list"
-                autocomplete="off"
-                class="ant-select-selection-search-input"
-                readonly=""
-                role="combobox"
-                style="opacity:0"
-                unselectable="on"
-                value=""
-              />
-            </span>
-            <span
-              class="ant-select-selection-item"
-              title="Time"
-            >
-              Time
-            </span>
-          </div>
           <span
-            aria-hidden="true"
-            class="ant-select-arrow"
-            style="user-select:none;-webkit-user-select:none"
-            unselectable="on"
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
           >
-            <span
-              aria-label="down"
-              class="anticon anticon-down ant-select-suffix"
-              role="img"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <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>
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
           </span>
-        </div>
+        </span>
       </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker"
+    >
       <div
-        class="ant-space-item"
+        class="ant-picker-input"
       >
-        <div
-          class="ant-picker"
+        <input
+          autocomplete="off"
+          placeholder="Select month"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
         >
-          <div
-            class="ant-picker-input"
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
           >
-            <input
-              autocomplete="off"
-              placeholder="Select time"
-              readonly=""
-              size="10"
-              title=""
-              value=""
-            />
-            <span
-              class="ant-picker-suffix"
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
             >
-              <span
-                aria-label="clock-circle"
-                class="anticon anticon-clock-circle"
-                role="img"
-              >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="clock-circle"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
-                  />
-                  <path
-                    d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
-                  />
-                </svg>
-              </span>
-            </span>
-          </div>
-        </div>
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:8px"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select quarter"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select year"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="calendar"
+            class="anticon anticon-calendar"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="calendar"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+              />
+            </svg>
+          </span>
+        </span>
       </div>
     </div>
   </div>
@@ -3684,6 +3744,124 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/switchable.md correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center"
+>
+  <div
+    class="ant-space-item"
+    style="margin-right:8px"
+  >
+    <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="undefined_list_0"
+            aria-autocomplete="list"
+            aria-controls="undefined_list"
+            aria-haspopup="listbox"
+            aria-owns="undefined_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            readonly=""
+            role="combobox"
+            style="opacity:0"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="Time"
+        >
+          Time
+        </span>
+      </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
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select time"
+          readonly=""
+          size="10"
+          title=""
+          value=""
+        />
+        <span
+          class="ant-picker-suffix"
+        >
+          <span
+            aria-label="clock-circle"
+            class="anticon anticon-clock-circle"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="clock-circle"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+              />
+              <path
+                d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"

components/date-picker/demo/basic.md

@@ -14,46 +14,19 @@ title:
 Basic use case. Users can select or input a date in panel.
 
 ```jsx
-import { DatePicker, TimePicker, Select, Space } from 'antd';
+import { DatePicker, Space } from 'antd';
 
-const { Option } = Select;
-
-function TypeSelect({ type, onChange }) {
-  return (
-    <Select value={type} onChange={onChange}>
-      <Option value="time">Time</Option>
-      <Option value="date">Date</Option>
-      <Option value="week">Week</Option>
-      <Option value="month">Month</Option>
-      <Option value="quarter">Quarter</Option>
-      <Option value="year">Year</Option>
-    </Select>
-  );
-}
-
-function PickerWithType({ type, onChange }) {
-  if (type === 'time') return <TimePicker onChange={onChange} />;
-  if (type === 'date') return <DatePicker onChange={onChange} />;
-  return <DatePicker picker={type} onChange={onChange} />;
-}
-
-function SwitchablePicker() {
-  const [type, setType] = React.useState('time');
-  const onChange = value => {
-    console.log(value);
-  };
-  return (
-    <Space>
-      <TypeSelect type={type} onChange={setType} />
-      <PickerWithType type={type} onChange={onChange} />
-    </Space>
-  );
+function onChange(date, dateString) {
+  console.log(date, dateString);
 }
 
 ReactDOM.render(
-  <Space direction="vertical" size={12}>
-    <DatePicker />
-    <SwitchablePicker />
+  <Space direction="vertical">
+    <DatePicker onChange={onChange} />
+    <DatePicker onChange={onChange} picker="week" />
+    <DatePicker onChange={onChange} picker="month" />
+    <DatePicker onChange={onChange} picker="quarter" />
+    <DatePicker onChange={onChange} picker="year" />
   </Space>,
   mountNode,
 );

components/date-picker/demo/switchable.md

@@ -0,0 +1,46 @@
+---
+order: 1.1
+title:
+  zh-CN: 切换不同的选择器
+  en-US: Switchable picker
+---
+
+## zh-CN
+
+提供选择器，自由切换不同类型的日期选择器，常用于日期筛选场合。
+
+## en-US
+
+Switch in different types of pickers by Select.
+
+```jsx
+import React, { useState } from 'react';
+import { DatePicker, TimePicker, Select, Space } from 'antd';
+
+const { Option } = Select;
+
+function PickerWithType({ type, onChange }) {
+  if (type === 'time') return <TimePicker onChange={onChange} />;
+  if (type === 'date') return <DatePicker onChange={onChange} />;
+  return <DatePicker picker={type} onChange={onChange} />;
+}
+
+function SwitchablePicker() {
+  const [type, setType] = useState('time');
+  return (
+    <Space>
+      <Select value={type} onChange={setType}>
+        <Option value="time">Time</Option>
+        <Option value="date">Date</Option>
+        <Option value="week">Week</Option>
+        <Option value="month">Month</Option>
+        <Option value="quarter">Quarter</Option>
+        <Option value="year">Year</Option>
+      </Select>
+      <PickerWithType type={type} onChange={value => console.log(value)} />
+    </Space>
+  );
+}
+
+ReactDOM.render(<SwitchablePicker />, mountNode);
+```

components/date-picker/locale/ru_RU.tsx

@@ -15,7 +15,7 @@ const locale: PickerLocale = {
     monthPlaceholder: 'Выберите месяц',
     weekPlaceholder: 'Выберите неделю',
     rangePlaceholder: ['Начальная дата', 'Конечная дата'],
-    rangeYearPlaceholder: ['Начальный годr', 'Год окончания'],
+    rangeYearPlaceholder: ['Начальный год', 'Год окончания'],
     rangeMonthPlaceholder: ['Начальный месяц', 'Конечный месяц'],
     rangeWeekPlaceholder: ['Начальная неделя', 'Конечная неделя'],
     ...CalendarLocale,

components/date-picker/style/rtl.less

@@ -102,6 +102,7 @@
     .picker-cell-inner(~'@{picker-cell-inner-cls}');
   }
 
+  // ======================== Body ==========================
   .picker-cell-inner(@cellClassName) {
     .@{cellClassName} {
       position: relative;
@@ -120,12 +121,21 @@
         left: 0;
       }
     }
+
     &-in-view&-range-end::before {
       .@{picker-prefix-cls}-panel-rtl & {
         right: 0;
         left: 50%;
       }
     }
+
+    &-in-view&-range-start&-range-end::before {
+      .@{picker-prefix-cls}-panel-rtl & {
+        right: 50%;
+        left: 50%;
+      }
+    }
+
     .@{picker-prefix-cls}-date-panel
       &-in-view&-in-range&-range-hover-start
       .@{cellClassName}::after {
@@ -134,12 +144,14 @@
         left: -6px - @border-width-base;
       }
     }
+
     .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
       .@{picker-prefix-cls}-panel-rtl & {
         right: -6px - @border-width-base;
         left: 0;
       }
     }
+
     // Hover with range start & end
     &-range-hover&-range-start::after {
       .@{picker-prefix-cls}-panel-rtl & {
@@ -147,6 +159,7 @@
         left: 50%;
       }
     }
+
     &-range-hover&-range-end::after {
       .@{picker-prefix-cls}-panel-rtl & {
         right: 50%;
@@ -154,6 +167,20 @@
       }
     }
 
+    // range start border-radius
+    &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
+      .@{picker-prefix-cls}-panel-rtl & {
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+      }
+    }
+
+    // range end border-radius
+    &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
+      .@{picker-prefix-cls}-panel-rtl & {
+        border-radius: @border-radius-base 0 0 @border-radius-base;
+      }
+    }
+
     // Edge start
     tr > &-in-view&-range-hover:first-child::after,
     tr > &-in-view&-range-hover-end:first-child::after,
@@ -208,6 +235,17 @@
     }
   }
 
+  // ======================== Footer ========================
+  &-footer {
+    &-extra {
+      .@{picker-prefix-cls}-dropdown-rtl & {
+        direction: rtl;
+        text-align: right;
+      }
+    }
+  }
+
+  // ====================== Time Panel ======================
   &-time-panel {
     .@{picker-prefix-cls}-panel-rtl & {
       direction: ltr;

components/dropdown/__tests__/__snapshots__/index.test.js.snap

@@ -35,7 +35,7 @@ Array [
       style="opacity:0"
     >
       <span>
-        overlayNode
+        string
       </span>
     </div>
   </div>,

components/dropdown/dropdown.tsx

@@ -87,7 +87,7 @@ const Dropdown: DropdownInterface = props => {
       overlayNode = overlay;
     }
     overlayNode = React.Children.only(
-      typeof overlayNode === 'string' ? <span>overlayNode</span> : overlayNode,
+      typeof overlayNode === 'string' ? <span>{overlayNode}</span> : overlayNode,
     );
 
     const overlayProps = overlayNode.props;

components/form/FormItem.tsx

@@ -142,7 +142,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
     meta?: Meta,
     isRequired?: boolean,
   ): React.ReactNode {
-    if (noStyle) {
+    if (noStyle && !hidden) {
       return baseChildren;
     }
 

components/form/FormItemInput.tsx

@@ -5,7 +5,7 @@ import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import useMemo from 'rc-util/lib/hooks/useMemo';
-import CSSMotion from 'rc-animate/lib/CSSMotion';
+import CSSMotion from 'rc-motion';
 
 import Col, { ColProps } from '../grid/col';
 import { ValidateStatus } from './FormItem';

components/form/__tests__/__snapshots__/index.test.js.snap

@@ -1,6 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form Form item hidden 1`] = `
+exports[`Form Form item hidden noStyle should not work when hidden 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            id="light"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Form Form item hidden should work 1`] = `
 <form
   class="ant-form ant-form-horizontal"
 >

components/form/__tests__/index.test.js

@@ -699,14 +699,27 @@ describe('Form', () => {
     expect(wrapper.find('input').prop('onBlur')).toBeTruthy();
   });
 
-  it('Form item hidden', () => {
-    const wrapper = mount(
-      <Form>
-        <Form.Item name="light" hidden>
-          <Input />
-        </Form.Item>
-      </Form>,
-    );
-    expect(wrapper).toMatchRenderedSnapshot();
+  describe('Form item hidden', () => {
+    it('should work', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item name="light" hidden>
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+      expect(wrapper).toMatchRenderedSnapshot();
+    });
+
+    it('noStyle should not work when hidden', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item name="light" hidden noStyle>
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+      expect(wrapper).toMatchRenderedSnapshot();
+    });
   });
 });

components/form/demo/dep-debug.md

@@ -3,6 +3,7 @@ order: 99
 title:
   zh-CN: Dep Debug
   en-US: Dep Debug
+debug: true
 ---
 
 ## zh-CN

components/form/index.en-US.md

@@ -184,8 +184,8 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| onFormChange | Triggered when a sub form field updates | Function(formName: string, info: { changedFields, forms }) | - |
-| onFormFinish | Triggered when a sub form submits | Function(formName: string, info: { values, forms }) | - |
+| onFormChange | Triggered when a sub form field updates | function(formName: string, info: { changedFields, forms }) | - |
+| onFormFinish | Triggered when a sub form submits | function(formName: string, info: { values, forms }) | - |
 
 ```jsx
 <Form.Provider

components/form/index.zh-CN.md

@@ -36,10 +36,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 | validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - |  |
 | validateTrigger | 统一设置字段校验规则 | string \| string[] | `onChange` | 4.3.0 |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - |  |
-| onFinish | 提交表单且数据验证成功后回调事件 | Function(values) | - |  |
-| onFinishFailed | 提交表单且数据验证失败后回调事件 | Function({ values, errorFields, outOfDate }) | - |  |
-| onFieldsChange | 字段更新时触发回调事件 | Function(changedFields, allFields) | - |  |
-| onValuesChange | 字段值更新时触发回调事件 | Function(changedValues, allValues) | - |  |
+| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  |
+| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  |
+| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  |
+| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  |
 
 ### validateMessages
 
@@ -75,15 +75,15 @@ const validateMessages = {
 | --- | --- | --- | --- | --- |
 | colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true |  |
 | dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - |  |
-| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | - |  |
+| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string \| ReactNode | - |  |
 | getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  |
 | getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
 | hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |  |
-| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | - |  |
+| help | 提示信息，如不设置，则会根据校验规则自动生成 | string \| ReactNode | - |  |
 | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - |  |
 | initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
 | noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false |  |
-| label | `label` 标签的文本 | string\|ReactNode | - |  |
+| label | `label` 标签的文本 | string \| ReactNode | - |  |
 | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` |  |
 | labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
 | name | 字段名，支持数组 | [NamePath](#NamePath) | - |  |
@@ -186,8 +186,8 @@ Form.List 渲染表单相关操作函数。
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| onFormChange | 子表单字段更新时触发 | Function(formName: string, info: { changedFields, forms }) | - |
-| onFormFinish | 子表单提交时触发 | Function(formName: string, info: { values, forms }) | - |
+| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
+| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |
 
 ```jsx
 <Form.Provider

components/form/style/index.less

@@ -49,8 +49,8 @@
 }
 
 .explainAndExtraDistance(@num) when (@num < 0) {
-  margin-top: floor(@num);
-  margin-bottom: floor(@num);
+  margin-top: ceil(@num);
+  margin-bottom: ceil(@num);
 }
 
 // ================================================================
@@ -66,7 +66,9 @@
     margin-bottom: 0;
   }
 
-  &-hidden {
+  &-hidden,
+  &-hidden.@{ant-prefix}-row {
+    // https://github.com/ant-design/ant-design/issues/26141
     display: none;
   }
 

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -76,7 +76,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -111,7 +110,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -146,7 +144,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -181,7 +178,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -216,7 +212,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -256,7 +251,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -307,7 +301,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -358,7 +351,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -414,7 +406,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -449,7 +440,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -489,7 +479,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -516,7 +505,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -543,7 +531,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -575,7 +562,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -631,7 +617,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -687,7 +672,6 @@ Array [
   <div
     class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
-    style="color:#333;font-weight:normal"
   >
     <span
       class="ant-divider-inner-text"
@@ -827,9 +811,7 @@ Array [
 
 exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
 Array [
-  <span
-    style="margin-right:6px"
-  >
+  <span>
     Horizontal Gutter (px): 
   </span>,
   <div
@@ -925,9 +907,7 @@ Array [
       </div>
     </div>
   </div>,
-  <span
-    style="margin-right:6px"
-  >
+  <span>
     Vertical Gutter (px): 
   </span>,
   <div
@@ -1023,9 +1003,7 @@ Array [
       </div>
     </div>
   </div>,
-  <span
-    style="margin-right:6px"
-  >
+  <span>
     Column Count:
   </span>,
   <div

components/grid/demo/flex-align.md

@@ -20,9 +20,7 @@ const DemoBox = props => <p className={`height-${props.value}`}>{props.children}
 
 ReactDOM.render(
   <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Align Top
-    </Divider>
+    <Divider orientation="left">Align Top</Divider>
     <Row justify="center" align="top">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -38,9 +36,7 @@ ReactDOM.render(
       </Col>
     </Row>
 
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Align Middle
-    </Divider>
+    <Divider orientation="left">Align Middle</Divider>
     <Row justify="space-around" align="middle">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>
@@ -56,9 +52,7 @@ ReactDOM.render(
       </Col>
     </Row>
 
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Align Bottom
-    </Divider>
+    <Divider orientation="left">Align Bottom</Divider>
     <Row justify="space-between" align="bottom">
       <Col span={4}>
         <DemoBox value={100}>col-4</DemoBox>

components/grid/demo/flex-order.md

@@ -18,9 +18,7 @@ import { Row, Col, Divider } from 'antd';
 
 ReactDOM.render(
   <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Normal
-    </Divider>
+    <Divider orientation="left">Normal</Divider>
     <Row>
       <Col span={6} order={4}>
         1 col-order-4
@@ -35,9 +33,7 @@ ReactDOM.render(
         4 col-order-1
       </Col>
     </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Responsive
-    </Divider>
+    <Divider orientation="left">Responsive</Divider>
     <Row>
       <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
         1 col-order-responsive

components/grid/demo/flex-stretch.md

@@ -18,23 +18,17 @@ import { Row, Col, Divider } from 'antd';
 
 ReactDOM.render(
   <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Percentage columns
-    </Divider>
+    <Divider orientation="left">Percentage columns</Divider>
     <Row>
       <Col flex={2}>2 / 5</Col>
       <Col flex={3}>3 / 5</Col>
     </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Fill rest 
-    </Divider>
+    <Divider orientation="left">Fill rest</Divider>
     <Row>
       <Col flex="100px">100px</Col>
       <Col flex="auto">Fill Rest</Col>
     </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Raw flex style
-    </Divider>
+    <Divider orientation="left">Raw flex style</Divider>
     <Row>
       <Col flex="1 1 200px">1 1 200px</Col>
       <Col flex="0 1 300px">0 1 300px</Col>

components/grid/demo/flex.md

@@ -20,9 +20,7 @@ import { Row, Col, Divider } from 'antd';
 
 ReactDOM.render(
   <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align left
-    </Divider>
+    <Divider orientation="left">sub-element align left</Divider>
     <Row justify="start">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -30,9 +28,7 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align center
-    </Divider>
+    <Divider orientation="left">sub-element align center</Divider>
     <Row justify="center">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -40,9 +36,7 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align right
-    </Divider>
+    <Divider orientation="left">sub-element align right</Divider>
     <Row justify="end">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -50,9 +44,7 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element monospaced arrangement
-    </Divider>
+    <Divider orientation="left">sub-element monospaced arrangement</Divider>
     <Row justify="space-between">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
@@ -60,9 +52,7 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
     </Row>
 
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align full
-    </Divider>
+    <Divider orientation="left">sub-element align full</Divider>
     <Row justify="space-around">
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>

components/grid/demo/gutter.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
+栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔(n 是自然数)。
 
 如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。
 
@@ -17,7 +17,7 @@ title:
 
 ## en-US
 
-You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
+You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px` (`n` stands for natural number).
 
 You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.
 
@@ -32,9 +32,7 @@ const style = { background: '#0092ff', padding: '8px 0' };
 
 ReactDOM.render(
   <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Horizontal
-    </Divider>
+    <Divider orientation="left">Horizontal</Divider>
     <Row gutter={16}>
       <Col className="gutter-row" span={6}>
         <div style={style}>col-6</div>
@@ -49,9 +47,7 @@ ReactDOM.render(
         <div style={style}>col-6</div>
       </Col>
     </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Responsive
-    </Divider>
+    <Divider orientation="left">Responsive</Divider>
     <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
       <Col className="gutter-row" span={6}>
         <div style={style}>col-6</div>
@@ -66,9 +62,7 @@ ReactDOM.render(
         <div style={style}>col-6</div>
       </Col>
     </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Vertical
-    </Divider>
+    <Divider orientation="left">Vertical</Divider>
     <Row gutter={[16, 24]}>
       <Col className="gutter-row" span={6}>
         <div style={style}>col-6</div>

components/grid/demo/playground.md

@@ -64,7 +64,7 @@ class App extends React.Component {
     }
     return (
       <>
-        <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
+        <span>Horizontal Gutter (px): </span>
         <div style={{ width: '50%' }}>
           <Slider
             min={0}
@@ -76,7 +76,7 @@ class App extends React.Component {
             tipFormatter={value => gutters[value]}
           />
         </div>
-        <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
+        <span>Vertical Gutter (px): </span>
         <div style={{ width: '50%' }}>
           <Slider
             min={0}
@@ -88,7 +88,7 @@ class App extends React.Component {
             tipFormatter={value => vgutters[value]}
           />
         </div>
-        <span style={{ marginRight: 6 }}>Column Count:</span>
+        <span>Column Count:</span>
         <div style={{ width: '50%', marginBottom: 48 }}>
           <Slider
             min={0}

components/grid/index.zh-CN.md

@@ -89,7 +89,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` |  |
-| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | number \| object \| array | 0 |  |
+| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
 | justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |
 
 ### Col

components/icon/index.en-US.md

@@ -26,9 +26,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | className | The className of Icon | string | - |  |
-| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - |  |
-| spin | Rotate icon with animation | boolean | false |  |
 | rotate | Rotate by n degrees (not working in IE9) | number | - |  |
+| spin | Rotate icon with animation | boolean | false |  |
+| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - |  |
 | twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - |  |
 
 We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
@@ -45,10 +45,10 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - |  |
-| spin | Rotate icon with animation | boolean | false |  |
-| rotate | Rotate degrees (not working in IE9) | number | - |  |
 | component | The component used for the root node | ComponentType<CustomIconComponentProps\> | - |  |
+| rotate | Rotate degrees (not working in IE9) | number | - |  |
+| spin | Rotate icon with animation | boolean | false |  |
+| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - |  |
 
 ### About SVG icons
 
@@ -112,8 +112,8 @@ The following options are available:
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| extraCommonProps | Define extra properties to the component | { \[key: string]: any } | {} |  |
 | scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string[] | - |  |
-| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |  |
 
 The property `scriptUrl` should be set to import the SVG sprite symbols.
 
@@ -155,8 +155,8 @@ The following properties are available for the component:
 
 | Property | Description | Type | Readonly | Version |
 | --- | --- | --- | --- | --- |
-| width | The width of the `svg` element | string \| number | '1em' |  |
-| height | The height of the `svg` element | string \| number | '1em' |  |
-| fill | Define the color used to paint the `svg` element | string | 'currentColor' |  |
 | className | The computed class name of the `svg` element | string | - |  |
+| fill | Define the color used to paint the `svg` element | string | `currentColor` |  |
+| height | The height of the `svg` element | string \| number | `1em` |  |
 | style | The computed style of the `svg` element | CSSProperties | - |  |
+| width | The width of the `svg` element | string \| number | `1em` |  |

components/icon/index.zh-CN.md

@@ -33,9 +33,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | className | 设置图标的样式名 | string | - |  |
-| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
-| spin | 是否有旋转动画 | boolean | false |  |
 | rotate | 图标旋转角度（IE9 无效） | number | - |  |
+| spin | 是否有旋转动画 | boolean | false |  |
+| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
 | twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |  |
 
 其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
@@ -48,14 +48,14 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
 <StarTwoTone twoToneColor="#eb2f96" />
 ```
 
-### 自定义 Icon/Custom Icon
+### 自定义 Icon
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
-| spin | 是否有旋转动画 | boolean | false |  |
+| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件 | ComponentType<CustomIconComponentProps\> | - |  |
 | rotate | 图标旋转角度（IE9 无效） | number | - |  |
-| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件 | ComponentType<CustomIconComponentProps\> | - |  |
+| spin | 是否有旋转动画 | boolean | false |  |
+| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
 
 ### 关于 SVG 图标
 
@@ -103,16 +103,16 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
 
 其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
 
-`options` 的配置项如下：
+options 的配置项如下：
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - |  |
-| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |  |
+| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | { \[key: string]: any } | {} |  |
+| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - |  |
 
 在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
 
-见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
+见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 js 地址。
 
 ### 自定义 SVG 图标
 
@@ -150,8 +150,8 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
 
 | 字段      | 说明                    | 类型             | 只读值         | 版本 |
 | --------- | ----------------------- | ---------------- | -------------- | ---- |
-| width     | `svg` 元素宽度          | string \| number | '1em'          |      |
-| height    | `svg` 元素高度          | string \| number | '1em'          |      |
-| fill      | `svg` 元素填充的颜色    | string           | 'currentColor' |      |
 | className | 计算后的 `svg` 类名     | string           | -              |      |
+| fill      | `svg` 元素填充的颜色    | string           | `currentColor` |      |
+| height    | `svg` 元素高度          | string \| number | `1em`          |      |
 | style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |
+| width     | `svg` 元素宽度          | string \| number | `1em`          |      |

components/input-number/index.zh-CN.md

@@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | size | 输入框大小 | `large` \| `middle` \| `small` | - |
 | step | 每次改变步数，可以为小数 | number \| string | 1 |
 | value | 当前值 | number | - |
-| onChange | 变化回调 | Function(value: number \| string) | - |
+| onChange | 变化回调 | function(value: number \| string) | - |
 | onPressEnter | 按下回车的回调 | function(e) | - |
 
 ## 方法

components/input/style/rtl.less

@@ -99,7 +99,7 @@
 
   > .@{inputClass}:last-child,
   &-addon:last-child {
-    .@{inputClass}-group-rtl & {
+    .@{inputClass}-group-rtl& {
       border-radius: @border-radius-base 0 0 @border-radius-base;
     }
   }
@@ -225,6 +225,9 @@
     & + .@{ant-prefix}-input-group-addon,
     input + .@{ant-prefix}-input-group-addon {
       .@{search-rtl-cls}& {
+        padding: 0;
+        border: 0;
+
         .@{search-prefix}-button {
           width: 100%;
           border-radius: @border-radius-base 0 0 @border-radius-base;

components/list/demo/resposive.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-响应式的栅格列表。尺寸与 [Layout Grid](/components/grid-cn/#Col) 保持一致。
+响应式的栅格列表。尺寸与 [Layout Grid](/components/grid/#Col) 保持一致。
 
 ## en-US
 

components/locale/ar_EG.tsx

@@ -5,7 +5,7 @@ import TimePicker from '../time-picker/locale/ar_EG';
 import Calendar from '../calendar/locale/ar_EG';
 import { Locale } from '../locale-provider';
 
-const typeTemplate = 'صالحًا ${type} من نوع ${label} ليس';
+const typeTemplate = 'ليس ${label} من نوع ${type} صالحًا';
 
 const localeValues: Locale = {
   locale: 'ar',
@@ -68,14 +68,14 @@ const localeValues: Locale = {
   },
   Form: {
     defaultValidateMessages: {
-      default: '${label} خطأ في حقل الإدخال',
-      required: '${label} يرجى إدخال',
-      enum: '[${enum}] يجب أن يكون واحدا من ${label}',
-      whitespace: 'لا يمكن أن يكون حرفًا فارغًا ${label}',
+      "default": 'خطأ في حقل الإدخال ${label}',
+      required: 'يرجى إدخال ${label}',
+      "enum": '${label} يجب أن يكون واحدا من [${enum}]',
+      whitespace: '${label} لا يمكن أن يكون حرفًا فارغًا',
       date: {
-        format: 'تنسيق التاريخ غير صحيح ${label}',
-        parse: 'لا يمكن تحويلها إلى تاريخ ${label}',
-        invalid: 'غير صحيح ${label} تاريخ',
+        format: '${label} تنسيق التاريخ غير صحيح',
+        parse: '${label} لا يمكن تحويلها إلى تاريخ',
+        invalid: 'تاريخ ${label} غير صحيح',
       },
       types: {
         string: typeTemplate,
@@ -93,10 +93,10 @@ const localeValues: Locale = {
         hex: typeTemplate,
       },
       string: {
-        len: 'أحرف ${len} ان يكون ${label} يجب',
-        min: 'أحرف ${min} على الأقل ${label}',
-        max: 'أحرف ${max} يصل إلى ${label}',
-        range: 'أحرف ${max}-${min} ان يكون مابين ${label} يجب',
+        len: 'يجب ${label} ان يكون ${len} أحرف',
+        min: '${label} على الأقل ${min} أحرف',
+        max: '${label} يصل إلى ${max} أحرف',
+        range: 'يجب ${label} ان يكون مابين ${min}-${max} أحرف',
       },
       number: {
         len: '${len} ان يساوي ${label} يجب',
@@ -105,13 +105,13 @@ const localeValues: Locale = {
         range: '${max}-${min} ان يكون مابين ${label} يجب',
       },
       array: {
-        len: '${len} طوله ${label} يجب أن يكون',
-        min: '${min} طوله الأدنى ${label} يجب أن يكون',
-        max: '${max} طوله الأقصى ${label} يجب أن يكون',
-        range: '${max}-${min} طوله مابين ${label} يجب أن يكون',
+        len: 'يجب أن يكون ${label} طوله ${len}',
+        min: 'يجب أن يكون ${label} طوله الأدنى ${min}',
+        max: 'يجب أن يكون ${label} طوله الأقصى ${max}',
+        range: 'يجب أن يكون ${label} طوله مابين ${min}-${max}',
       },
       pattern: {
-        mismatch: '${pattern} مع ${label} لا يتطابق',
+        mismatch: 'لا يتطابق ${label} مع ${pattern}',
       },
     },
   },

components/locale/fr_FR.tsx

@@ -22,7 +22,7 @@ const localeValues: Locale = {
     collapse: 'Réduire la ligne',
     triggerDesc: 'Trier par ordre décroissant',
     triggerAsc: 'Trier par ordre croissant',
-    cancelSort: 'Annuler le trie',
+    cancelSort: 'Annuler le tri',
   },
   Modal: {
     okText: 'OK',

components/mentions/style/index.less

@@ -64,10 +64,6 @@
       background-color: transparent;
     }
     .placeholder();
-
-    &:read-only {
-      cursor: default;
-    }
   }
 
   &-measure {

components/menu/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import RcMenu, { Divider, ItemGroup, MenuProps as RcMenuProps } from 'rc-menu';
 import classNames from 'classnames';
-import { MotionType } from 'rc-trigger/lib/interface';
 import SubMenu from './SubMenu';
 import Item from './MenuItem';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
@@ -57,7 +56,7 @@ class InternalMenu extends React.Component<InternalMenuProps> {
     const { prefixCls: customizePrefixCls, className, theme } = this.props;
     const defaultMotions = {
       horizontal: { motionName: 'slide-up' },
-      inline: collapseMotion as MotionType,
+      inline: collapseMotion,
       other: { motionName: 'zoom-big' },
     };
 

components/menu/style/dark.less

@@ -36,6 +36,10 @@
     border-bottom: 0;
   }
 
+  &-dark&-horizontal > &-item:hover {
+    background-color: @menu-dark-item-active-bg;
+  }
+
   &-dark&-horizontal > &-item > a::before {
     bottom: 0;
   }

components/menu/style/index.less

@@ -350,6 +350,14 @@
         padding: @menu-item-padding;
         padding-right: 0;
         padding-left: 0;
+
+        &:hover,
+        &-active,
+        &-open,
+        &-selected {
+          color: @menu-highlight-color;
+          border-bottom: 2px solid @menu-highlight-color;
+        }
       }
     }
 
@@ -360,14 +368,6 @@
       display: inline-block;
       vertical-align: bottom;
       border-bottom: 2px solid transparent;
-
-      &:hover,
-      &-active,
-      &-open,
-      &-selected {
-        color: @menu-highlight-color;
-        border-bottom: 2px solid @menu-highlight-color;
-      }
     }
 
     > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {

components/menu/style/rtl.less

@@ -4,7 +4,7 @@
 @menu-prefix-cls: ~'@{ant-prefix}-menu';
 
 .@{menu-prefix-cls} {
-  &-rtl {
+  &&-rtl {
     direction: rtl;
     text-align: right;
   }

components/modal/__tests__/hook.test.js

@@ -35,6 +35,8 @@ describe('Modal.hook', () => {
     wrapper.find('button').simulate('click');
 
     expect(wrapper.find('.test-hook').text()).toEqual('bamboo');
+    expect(wrapper.find('.ant-btn').length).toBeTruthy();
+    expect(wrapper.find('.ant-modal-body').length).toBeTruthy();
 
     // Update instance
     instance.update({

components/modal/useModal/HookModal.tsx

@@ -27,7 +27,10 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
 ) => {
   const [visible, setVisible] = React.useState(true);
   const [innerConfig, setInnerConfig] = React.useState(config);
-  const { direction } = React.useContext(ConfigContext);
+  const { direction, getPrefixCls } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('modal');
+  const rootPrefixCls = getPrefixCls();
 
   function close() {
     setVisible(false);
@@ -47,6 +50,8 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
     <LocaleReceiver componentName="Modal" defaultLocale={defaultLocale.Modal}>
       {(modalLocale: ModalLocale) => (
         <ConfirmDialog
+          prefixCls={prefixCls}
+          rootPrefixCls={rootPrefixCls}
           {...innerConfig}
           close={close}
           visible={visible}

components/page-header/index.en-US.md

@@ -26,7 +26,7 @@ PageHeader can be used to highlight the page topic, display important informatio
 | extra | Operating area, at the end of the line of the title line | ReactNode | - |  |
 | breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - |  |
 | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |  |
-| onBack | Back icon click event | ()=>void | ()=>history.back() |  |
+| onBack | Back icon click event | () => void | - |  |
 
 <style>
   [data-theme="dark"] .site-page-header {

components/page-header/index.zh-CN.md

@@ -26,7 +26,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
 | extra | 操作区，位于 title 行的行尾 | ReactNode | - |  |
 | breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - |  |
 | footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - |  |
-| onBack | 返回按钮的点击事件 | ()=>void | ()=>history.back() |  |
+| onBack | 返回按钮的点击事件 | () => void | - |  |
 
 <style>
   [data-theme="dark"] .site-page-header {

components/pagination/__tests__/__snapshots__/demo.test.js.snap

@@ -2159,6 +2159,212 @@ Array [
       </button>
     </li>
   </ul>,
+  <ul
+    class="ant-pagination mini ant-pagination-disabled"
+    unselectable="unselectable"
+  >
+    <li
+      class="ant-pagination-total-text"
+    >
+      Total 50 items
+    </li>
+    <li
+      aria-disabled="true"
+      class="ant-pagination-prev ant-pagination-disabled"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow ant-select-disabled"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              disabled=""
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </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
+        class="ant-pagination-options-quick-jumper"
+      >
+        Go to
+        <input
+          disabled=""
+          type="text"
+          value=""
+        />
+      </div>
+    </li>
+  </ul>,
 ]
 `;
 
@@ -2455,92 +2661,182 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
 `;
 
 exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
-<ul
-  class="ant-pagination ant-pagination-simple"
->
-  <li
-    aria-disabled="false"
-    class="ant-pagination-prev"
-    tabindex="0"
-    title="Previous Page"
+Array [
+  <ul
+    class="ant-pagination ant-pagination-simple"
   >
-    <button
-      class="ant-pagination-item-link"
-      tabindex="-1"
-      type="button"
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
     >
-      <span
-        aria-label="left"
-        class="anticon anticon-left"
-        role="img"
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
       >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
         >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </button>
-  </li>
-  <li
-    class="ant-pagination-simple-pager"
-    title="2/5"
-  >
-    <input
-      size="3"
-      type="text"
-      value="2"
-    />
-    <span
-      class="ant-pagination-slash"
-    >
-      /
-    </span>
-    5
-  </li>
-  <li
-    aria-disabled="false"
-    class="ant-pagination-next"
-    tabindex="0"
-    title="Next Page"
-  >
-    <button
-      class="ant-pagination-item-link"
-      tabindex="-1"
-      type="button"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-simple-pager"
+      title="2/5"
     >
+      <input
+        size="3"
+        type="text"
+        value="2"
+      />
       <span
-        aria-label="right"
-        class="anticon anticon-right"
-        role="img"
+        class="ant-pagination-slash"
       >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-          />
-        </svg>
+        /
       </span>
-    </button>
-  </li>
-</ul>
+      5
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+  </ul>,
+  <br />,
+  <ul
+    class="ant-pagination ant-pagination-simple ant-pagination-disabled"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-simple-pager"
+      title="2/5"
+    >
+      <input
+        disabled=""
+        size="3"
+        type="text"
+        value="2"
+      />
+      <span
+        class="ant-pagination-slash"
+      >
+        /
+      </span>
+      5
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+  </ul>,
+]
 `;
 
 exports[`renders ./components/pagination/demo/total.md correctly 1`] = `

components/pagination/demo/mini.md

@@ -25,6 +25,14 @@ ReactDOM.render(
     <Pagination size="small" total={50} />
     <Pagination size="small" total={50} showSizeChanger showQuickJumper />
     <Pagination size="small" total={50} showTotal={showTotal} />
+    <Pagination
+      size="small"
+      total={50}
+      disabled
+      showTotal={showTotal}
+      showSizeChanger
+      showQuickJumper
+    />
   </>,
   mountNode,
 );

components/pagination/demo/simple.md

@@ -16,5 +16,12 @@ Simple mode.
 ```jsx
 import { Pagination } from 'antd';
 
-ReactDOM.render(<Pagination simple defaultCurrent={2} total={50} />, mountNode);
+ReactDOM.render(
+  <>
+    <Pagination simple defaultCurrent={2} total={50} />
+    <br />
+    <Pagination disabled simple defaultCurrent={2} total={50} />
+  </>,
+  mountNode,
+);
 ```

components/pagination/style/index.less

@@ -282,6 +282,13 @@
       &:hover {
         border-color: @primary-color;
       }
+
+      &[disabled] {
+        color: @disabled-color;
+        background: @disabled-bg;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -377,6 +384,9 @@
       background: @disabled-bg;
       border-color: @border-color-base;
       cursor: not-allowed;
+      .@{pagination-prefix-cls}-simple& {
+        background: transparent;
+      }
     }
 
     .@{pagination-prefix-cls}-item-link-icon {
@@ -386,6 +396,10 @@
     .@{pagination-prefix-cls}-item-ellipsis {
       opacity: 1;
     }
+
+    .@{pagination-prefix-cls}-simple-pager {
+      color: @disabled-color;
+    }
   }
 }
 

components/select/__tests__/__snapshots__/demo.test.js.snap

@@ -1089,112 +1089,223 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
 `;
 
 exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
-<div
-  class="ant-select ant-select-multiple ant-select-show-search"
-  style="width:100%"
->
+Array [
   <div
-    class="ant-select-selector"
+    class="ant-select ant-select-multiple ant-select-show-search"
+    style="width:100%"
   >
-    <span
-      class="ant-select-selection-item"
+    <div
+      class="ant-select-selector"
     >
       <span
-        class="ant-select-selection-item-content"
-      >
-        a10
-      </span>
-      <span
-        aria-hidden="true"
-        class="ant-select-selection-item-remove"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
+        class="ant-select-selection-item"
       >
         <span
-          aria-label="close"
-          class="anticon anticon-close"
-          role="img"
+          class="ant-select-selection-item-content"
         >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          a10
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
           >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
         </span>
       </span>
-    </span>
-    <span
-      class="ant-select-selection-item"
-    >
       <span
-        class="ant-select-selection-item-content"
-      >
-        c12
-      </span>
-      <span
-        aria-hidden="true"
-        class="ant-select-selection-item-remove"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
+        class="ant-select-selection-item"
       >
         <span
-          aria-label="close"
-          class="anticon anticon-close"
-          role="img"
+          class="ant-select-selection-item-content"
         >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          c12
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
           >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
         </span>
       </span>
-    </span>
-    <span
-      class="ant-select-selection-search"
-      style="width:0"
-    >
-      <input
-        aria-activedescendant="undefined_list_0"
-        aria-autocomplete="list"
-        aria-controls="undefined_list"
-        aria-haspopup="listbox"
-        aria-owns="undefined_list"
-        autocomplete="off"
-        class="ant-select-selection-search-input"
-        readonly=""
-        role="combobox"
-        style="opacity:0"
-        unselectable="on"
-        value=""
-      />
       <span
-        aria-hidden="true"
-        class="ant-select-selection-search-mirror"
+        class="ant-select-selection-search"
+        style="width:0"
       >
-         
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          unselectable="on"
+          value=""
+        />
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-search-mirror"
+        >
+           
+        </span>
       </span>
-    </span>
-  </div>
-</div>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
+    style="width:100%"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-item"
+      >
+        <span
+          class="ant-select-selection-item-content"
+        >
+          a10
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="ant-select-selection-item"
+      >
+        <span
+          class="ant-select-selection-item-content"
+        >
+          c12
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="ant-select-selection-search"
+        style="width:0"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          disabled=""
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          unselectable="on"
+          value=""
+        />
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-search-mirror"
+        >
+           
+        </span>
+      </span>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `

components/select/demo/multiple.md

@@ -28,15 +28,28 @@ function handleChange(value) {
 }
 
 ReactDOM.render(
-  <Select
-    mode="multiple"
-    style={{ width: '100%' }}
-    placeholder="Please select"
-    defaultValue={['a10', 'c12']}
-    onChange={handleChange}
-  >
-    {children}
-  </Select>,
+  <>
+    <Select
+      mode="multiple"
+      style={{ width: '100%' }}
+      placeholder="Please select"
+      defaultValue={['a10', 'c12']}
+      onChange={handleChange}
+    >
+      {children}
+    </Select>
+    <br />
+    <Select
+      mode="multiple"
+      disabled
+      style={{ width: '100%' }}
+      placeholder="Please select"
+      defaultValue={['a10', 'c12']}
+      onChange={handleChange}
+    >
+      {children}
+    </Select>
+  </>,
   mountNode,
 );
 ```

components/select/style/index.less

@@ -124,6 +124,10 @@
         pointer-events: auto;
       }
     }
+
+    .@{select-prefix-cls}-disabled & {
+      cursor: not-allowed;
+    }
   }
 
   // ========================== Clear ==========================

components/select/style/multiple.less

@@ -30,6 +30,11 @@
         cursor: text;
       }
 
+      .@{select-prefix-cls}-disabled& {
+        background: @select-multiple-disabled-background;
+        cursor: not-allowed;
+      }
+
       &::after {
         display: inline-block;
         width: 0;
@@ -64,6 +69,12 @@
       transition: font-size 0.3s, line-height 0.3s, height 0.3s;
       user-select: none;
 
+      .@{select-prefix-cls}-disabled& {
+        color: @select-multiple-item-disabled-color;
+        border-color: @select-multiple-item-disabled-border-color;
+        cursor: not-allowed;
+      }
+
       // It's ok not to do this, but 24px makes bottom narrow in view should adjust
       &-content {
         display: inline-block;

components/slider/index.tsx

@@ -45,6 +45,8 @@ export interface SliderBaseProps {
   className?: string;
   id?: string;
   style?: React.CSSProperties;
+  handleStyle?: React.CSSProperties;
+  trackStyle?: React.CSSProperties;
   tooltipVisible?: boolean;
   tooltipPlacement?: TooltipPlacement;
   getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;

components/space/index.zh-CN.md

@@ -13,6 +13,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
 
 避免组件紧贴在一起，拉开统一的空间。
 
+- 适合行内元素的水平间距。
+- 可以设置各种水平对齐方式。
+
 ## API
 
 | 参数      | 说明     | 类型                                       | 默认值       | 版本  |

components/steps/__tests__/__snapshots__/demo.test.js.snap

@@ -1273,7 +1273,7 @@ exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
           >
             <div
               class="ant-progress-inner"
-              style="width:38px;height:38px;font-size:11.7px"
+              style="width:40px;height:40px;font-size:12px"
             >
               <svg
                 class="ant-progress-circle"
@@ -1508,7 +1508,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:38px;height:38px;font-size:11.7px"
+                style="width:40px;height:40px;font-size:12px"
               >
                 <svg
                   class="ant-progress-circle"
@@ -1683,7 +1683,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:30px;height:30px;font-size:10.5px"
+                style="width:32px;height:32px;font-size:10.8px"
               >
                 <svg
                   class="ant-progress-circle"
@@ -1858,7 +1858,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:38px;height:38px;font-size:11.7px"
+                style="width:40px;height:40px;font-size:12px"
               >
                 <svg
                   class="ant-progress-circle"
@@ -2033,7 +2033,7 @@ Array [
             >
               <div
                 class="ant-progress-inner"
-                style="width:30px;height:30px;font-size:10.5px"
+                style="width:32px;height:32px;font-size:10.8px"
               >
                 <svg
                   class="ant-progress-circle"

components/steps/index.tsx

@@ -67,7 +67,7 @@ export default class Steps extends React.Component<StepsProps, any> {
     }) => {
       if (status === 'process' && percent !== undefined) {
         // currently it's hard-coded, since we can't easily read the actually width of icon
-        const progressWidth = size === 'small' ? 30 : 38;
+        const progressWidth = size === 'small' ? 32 : 40;
         const iconWithProgress = (
           <div className={`${prefixCls}-progress-icon`}>
             <Progress

components/steps/style/progress.less

@@ -11,10 +11,10 @@
       position: relative;
       .@{progress-prefix-cls} {
         position: absolute;
-        top: -4px;
-        right: -4px;
-        bottom: -4px;
-        left: -4px;
+        top: -5px;
+        right: -5px;
+        bottom: -5px;
+        left: -5px;
       }
     }
   }

components/steps/style/rtl.less

@@ -42,13 +42,13 @@
 .@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
   .@{steps-prefix-cls}-item {
     .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 16px;
+      padding-right: 16px;
+      padding-left: 0;
     }
 
-    &:last-child {
+    &:first-child {
       .@{steps-prefix-cls}-rtl& {
-        margin-left: 0;
+        padding-right: 0;
       }
     }
     &:last-child .@{steps-prefix-cls}-item-title {
@@ -115,13 +115,13 @@
   &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
     .@{steps-prefix-cls}-item {
     .@{steps-prefix-cls}-rtl& {
-      margin-right: 0;
-      margin-left: 12px;
+      padding-right: 12px;
+      padding-left: 0;
     }
 
-    &:last-child {
+    &:first-child {
       .@{steps-prefix-cls}-rtl& {
-        margin-left: 0;
+        padding-right: 0;
       }
     }
   }

components/style/themes/dark.less

@@ -262,7 +262,6 @@
 @input-bg: transparent;
 @input-placeholder-color: fade(@white, 30%);
 @input-icon-color: fade(@white, 30%);
-@input-number-handler-bg: transparent;
 @input-number-handler-active-bg: @item-hover-bg;
 @input-icon-hover-color: fade(@white, 85%);
 
@@ -273,6 +272,9 @@
 @select-clear-background: @component-background;
 @select-selection-item-bg: fade(@white, 8);
 @select-selection-item-border-color: @border-color-split;
+@select-multiple-disabled-background: @component-background;
+@select-multiple-item-disabled-color: #595959;
+@select-multiple-item-disabled-border-color: @popover-background;
 
 // Cascader
 // ---

components/style/themes/default.less

@@ -205,6 +205,8 @@
 @btn-height-lg: @height-lg;
 @btn-height-sm: @height-sm;
 
+@btn-line-height: @line-height-base;
+
 @btn-circle-size: @btn-height-base;
 @btn-circle-size-lg: @btn-height-lg;
 @btn-circle-size-sm: @btn-height-sm;
@@ -433,6 +435,9 @@
 @select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
 @select-multiple-item-height-lg: 32px;
 @select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
+@select-multiple-disabled-background: @input-disabled-bg;
+@select-multiple-item-disabled-color: #bfbfbf;
+@select-multiple-item-disabled-border-color: @select-border-color;
 
 // Cascader
 // ---
@@ -651,6 +656,7 @@
 @badge-font-weight: normal;
 @badge-status-size: 6px;
 @badge-text-color: @component-background;
+@badge-color: @highlight-color;
 
 // Rate
 // ---

components/table/Table.tsx

@@ -162,7 +162,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
   const { childrenColumnName = 'children' } = mergedExpandable;
 
   const expandType: ExpandType = React.useMemo<ExpandType>(() => {
-    if (rawData.some(item => (item as any)[childrenColumnName])) {
+    if (rawData.some(item => (item as any)?.[childrenColumnName])) {
       return 'nest';
     }
 
@@ -183,7 +183,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
       return rowKey;
     }
 
-    return (record: RecordType) => (record as any)[rowKey as string];
+    return (record: RecordType) => (record as any)?.[rowKey as string];
   }, [rowKey]);
 
   const [getRecordByKey] = useLazyKVMap(rawData, childrenColumnName, getRowKey);
@@ -495,7 +495,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
           internalRefs={internalRefs as any}
           transformColumns={transformColumns}
         />
-        {pageData && pageData.length > 0 && bottomPaginationNode}
+        {mergedData && mergedData.length > 0 && bottomPaginationNode}
       </Spin>
     </div>
   );

components/table/__tests__/Table.filter.test.js

@@ -82,16 +82,23 @@ describe('Table.filter', () => {
   });
 
   it('renders empty menu correctly', () => {
-    const wrapper = mount(createTable({
-      columns: [
-        {
-          ...column,
-          filters: [],
-        },
-      ],
-    }));
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filters: [],
+          },
+        ],
+      }),
+    );
     wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
     expect(wrapper.find('Empty').length).toBe(1);
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled();
+    // eslint-disable-next-line no-console
+    console.error.mockRestore();
   });
 
   it('renders radio filter correctly', () => {

components/table/__tests__/Table.pagination.test.js

@@ -349,7 +349,7 @@ describe('Table.pagination', () => {
     const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     dropdownWrapper.find('.ant-select-item-option').at(2).simulate('click');
 
-    expect(onChange).toBeCalledTimes(1)
+    expect(onChange).toBeCalledTimes(1);
   });
 
   it('dynamic warning', () => {
@@ -377,4 +377,40 @@ describe('Table.pagination', () => {
       'Warning: [antd: Table] `dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.',
     );
   });
+
+  it('should render pagination after last item on last page being removed with async mode', () => {
+    const lastPageNum = data.length;
+    const wrapper = mount(
+      createTable({ pagination: { pageSize: 1, total: data.length, current: lastPageNum } }),
+    );
+
+    const newCol = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+      },
+      {
+        title: 'Action',
+        dataIndex: 'name',
+        render(_, record) {
+          const deleteRow = () => {
+            const newData = data.filter(d => d.key !== record.key);
+            wrapper.setProps({
+              dataSource: newData,
+              pagination: { pageSize: 1, total: newData.length, current: lastPageNum },
+            });
+          };
+          return (
+            <span className="btn-delete" onClick={deleteRow}>
+              Delete
+            </span>
+          );
+        },
+      },
+    ];
+
+    wrapper.setProps({ columns: newCol });
+    wrapper.find('.btn-delete').simulate('click');
+    expect(wrapper.find('.ant-pagination')).toHaveLength(1);
+  });
 });

components/table/__tests__/Table.test.js

@@ -160,6 +160,19 @@ describe('Table', () => {
     );
   });
 
+  it('should not crash when dataSource is array with none-object items', () => {
+    mount(
+      <Table
+        columns={[
+          {
+            title: 'name',
+          },
+        ]}
+        dataSource={['1', 2, undefined, {}, null, true, false, 0]}
+      />,
+    );
+  });
+
   it('prevent touch event', () => {
     const wrapper = mount(
       <Table

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -2919,38 +2919,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3003,38 +3012,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3087,38 +3105,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3171,38 +3198,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3255,38 +3291,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3339,38 +3384,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3423,38 +3477,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3507,38 +3570,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3591,38 +3663,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -3675,38 +3756,47 @@ Array [
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                         >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              role="img"
                             >
-                              <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>
-                        </a>
-                      </span>
+                              <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>
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                 </tbody>
@@ -11463,16 +11553,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Invite John Brown
-                        </a>
-                        <a>
-                          Delete
-                        </a>
-                      </span>
+                          <a>
+                            Invite John Brown
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -11510,16 +11609,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Invite Jim Green
-                        </a>
-                        <a>
-                          Delete
-                        </a>
-                      </span>
+                          <a>
+                            Invite Jim Green
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   <tr
@@ -11562,16 +11670,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
                     <td
                       class="ant-table-cell"
                     >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                           style="margin-right:16px"
                         >
-                          Invite Joe Black
-                        </a>
-                        <a>
-                          Delete
-                        </a>
-                      </span>
+                          <a>
+                            Invite Joe Black
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                      </div>
                     </td>
                   </tr>
                 </tbody>

components/table/demo/custom-filter-panel.md

@@ -85,7 +85,7 @@ class App extends React.Component {
       record[dataIndex] ? record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()) : '',
     onFilterDropdownVisibleChange: visible => {
       if (visible) {
-        setTimeout(() => this.searchInput.select());
+        setTimeout(() => this.searchInput.select(), 100);
       }
     },
     render: text =>

components/table/demo/dynamic-settings.md

@@ -14,7 +14,7 @@ title:
 Select different settings to see the result.
 
 ```jsx
-import { Table, Switch, Radio, Form } from 'antd';
+import { Table, Switch, Radio, Form, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
 const columns = [
@@ -47,12 +47,12 @@ const columns = [
     key: 'action',
     sorter: true,
     render: () => (
-      <span>
-        <a style={{ marginRight: 16 }}>Delete</a>
+      <Space size="middle">
+        <a>Delete</a>
         <a className="ant-dropdown-link">
           More actions <DownOutlined />
         </a>
-      </span>
+      </Space>
     ),
   },
 ];

components/table/demo/nest-table-border-debug.md

@@ -15,7 +15,7 @@ debug: true
 To see if bordered style applied to other tables.
 
 ```jsx
-import { Table, Badge, Menu, Dropdown, Switch, Form } from 'antd';
+import { Table, Badge, Menu, Dropdown, Switch, Form, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
 const menu = (
@@ -47,7 +47,7 @@ function NestedTable() {
           dataIndex: 'operation',
           key: 'operation',
           render: () => (
-            <span className="table-operation">
+            <Space size="middle">
               <a>Pause</a>
               <a>Stop</a>
               <Dropdown overlay={menu}>
@@ -55,7 +55,7 @@ function NestedTable() {
                   More <DownOutlined />
                 </a>
               </Dropdown>
-            </span>
+            </Space>
           ),
         },
       ];

components/table/demo/nested-table.md

@@ -14,7 +14,7 @@ title:
 Showing more detailed info of every row.
 
 ```jsx
-import { Table, Badge, Menu, Dropdown } from 'antd';
+import { Table, Badge, Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
 const menu = (
@@ -45,7 +45,7 @@ function NestedTable() {
         dataIndex: 'operation',
         key: 'operation',
         render: () => (
-          <span className="table-operation">
+          <Space size="middle">
             <a>Pause</a>
             <a>Stop</a>
             <Dropdown overlay={menu}>
@@ -53,7 +53,7 @@ function NestedTable() {
                 More <DownOutlined />
               </a>
             </Dropdown>
-          </span>
+          </Space>
         ),
       },
     ];

components/table/demo/pagination.md

@@ -14,7 +14,7 @@ title:
 Table pagination settings.
 
 ```jsx
-import { Table, Tag, Radio } from 'antd';
+import { Table, Tag, Radio, Space } from 'antd';
 
 const topOptions = [
   { label: 'topLeft', value: 'topLeft' },
@@ -35,7 +35,7 @@ const columns = [
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
-    render: (text) => <a>{text}</a>,
+    render: text => <a>{text}</a>,
   },
   {
     title: 'Age',
@@ -51,9 +51,9 @@ const columns = [
     title: 'Tags',
     key: 'tags',
     dataIndex: 'tags',
-    render: (tags) => (
+    render: tags => (
       <span>
-        {tags.map((tag) => {
+        {tags.map(tag => {
           let color = tag.length > 5 ? 'geekblue' : 'green';
           if (tag === 'loser') {
             color = 'volcano';
@@ -71,10 +71,10 @@ const columns = [
     title: 'Action',
     key: 'action',
     render: (text, record) => (
-      <span>
-        <a style={{ marginRight: 16 }}>Invite {record.name}</a>
+      <Space size="middle">
+        <a>Invite {record.name}</a>
         <a>Delete</a>
-      </span>
+      </Space>
     ),
   },
 ];
@@ -117,7 +117,7 @@ class Demo extends React.Component {
             style={{ marginBottom: 10 }}
             options={topOptions}
             value={this.state.top}
-            onChange={(e) => {
+            onChange={e => {
               this.setState({ top: e.target.value });
             }}
           />
@@ -126,7 +126,7 @@ class Demo extends React.Component {
           style={{ marginBottom: 10 }}
           options={bottomOptions}
           value={this.state.bottom}
-          onChange={(e) => {
+          onChange={e => {
             this.setState({ bottom: e.target.value });
           }}
         />

components/table/hooks/useFilter/FilterDropdown.tsx

@@ -34,17 +34,21 @@ function renderFilterItems({
   locale: TableLocale;
 }) {
   if (filters.length === 0) {
+    // wrapped with <></> to avoid react warning
+    // https://github.com/ant-design/ant-design/issues/25979
     return (
-      <Empty
-        image={Empty.PRESENTED_IMAGE_SIMPLE}
-        description={locale.filterEmptyText}
-        style={{
-          margin: '16px 0',
-        }}
-        imageStyle={{
-          height: 24,
-        }}
-      />
+      <>
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={locale.filterEmptyText}
+          style={{
+            margin: '16px 0',
+          }}
+          imageStyle={{
+            height: 24,
+          }}
+        />
+      </>
     );
   }
   return filters.map((filter, index) => {

components/table/hooks/useLazyKVMap.ts

@@ -30,7 +30,7 @@ export default function useLazyKVMap<RecordType>(
           const rowKey = getRowKey(record, index);
           kvMap.set(rowKey, record);
 
-          if (childrenColumnName in record) {
+          if (record && typeof record === 'object' && childrenColumnName in record) {
             dig((record as any)[childrenColumnName] || []);
           }
         });