Merge remote-tracking branch 'origin/feature' into next

components/grid/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -243,6 +243,40 @@ Array [
       col-4
     </div>
   </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align evenly
+    </span>
+  </div>,
+  <div
+    class="ant-row ant-row-space-evenly"
+  >
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+  </div>,
 ]
 `;
 

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

@@ -243,6 +243,40 @@ Array [
       col-4
     </div>
   </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      sub-element align evenly
+    </span>
+  </div>,
+  <div
+    class="ant-row ant-row-space-evenly"
+  >
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+    <div
+      class="ant-col ant-col-4"
+    >
+      col-4
+    </div>
+  </div>,
 ]
 `;
 

components/grid/demo/flex.md

@@ -9,11 +9,11 @@ title:
 
 布局基础。
 
-子元素根据不同的值 `start`,`center`,`end`,`space-between`,`space-around`，分别定义其在父节点里面的排版方式。
+子元素根据不同的值 `start`、`center`、`end`、`space-between`、`space-around` 和 `space-evenly`，分别定义其在父节点里面的排版方式。
 
 ## en-US
 
-Child elements depending on the value of the `start`,`center`, `end`,`space-between`, `space-around`, which are defined in its parent node typesetting mode.
+Child elements depending on the value of the `start`, `center`, `end`, `space-between`, `space-around` and `space-evenly`, which are defined in its parent node typesetting mode.
 
 ```jsx
 import { Row, Col, Divider } from 'antd';
@@ -59,6 +59,14 @@ ReactDOM.render(
       <Col span={4}>col-4</Col>
       <Col span={4}>col-4</Col>
     </Row>
+
+    <Divider orientation="left">sub-element align evenly</Divider>
+    <Row justify="space-evenly">
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+      <Col span={4}>col-4</Col>
+    </Row>
   </>,
   mountNode,
 );

components/grid/index.en-US.md

@@ -91,7 +91,7 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 | --- | --- | --- | --- | --- |
 | align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` |  |
 | gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 |  |
-| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` \| `space-evenly` | `start` |  |
 | wrap | Auto wrap line | boolean | true | 4.8.0 |
 
 ### Col

components/grid/index.zh-CN.md

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

components/grid/row.tsx

@@ -11,7 +11,7 @@ import ResponsiveObserve, {
 import useFlexGapSupport from '../_util/hooks/useFlexGapSupport';
 
 const RowAligns = tuple('top', 'middle', 'bottom', 'stretch');
-const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between');
+const RowJustify = tuple('start', 'end', 'center', 'space-around', 'space-between', 'space-evenly');
 
 export type Gutter = number | Partial<Record<Breakpoint, number>>;
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {

components/grid/style/index.less

@@ -43,6 +43,11 @@
   justify-content: space-around;
 }
 
+// x轴有间隔地均分
+.@{row-prefix-cls}-space-evenly {
+  justify-content: space-evenly;
+}
+
 // 顶部对齐
 .@{row-prefix-cls}-top {
   align-items: flex-start;

components/tree/index.en-US.md

@@ -38,6 +38,8 @@ Almost anything can be represented in a tree structure. Examples include directo
 | loadData | Load data asynchronously | function(node) | - |  |
 | loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] | \[] |  |
 | multiple | Allows selecting multiple treeNodes | boolean | false |  |
+| rootClassName | ClassName on the root element | string | - | 4.20.0 |
+| rootStyle | Style on the root element | CSSProperties | - | 4.20.0 |
 | selectable | Whether can be selected | boolean | true |  |
 | selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |  |
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false |  |

components/tree/index.zh-CN.md

@@ -39,6 +39,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | loadData | 异步加载数据 | function(node) | - |  |
 | loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] | \[] |  |
 | multiple | 支持点选多个节点（节点本身） | boolean | false |  |
+| rootClassName | 添加在 Tree 最外层的 className | string | - | 4.20.0 |
+| rootStyle | 添加在 Tree 最外层的 style | CSSProperties | - | 4.20.0 |
 | selectable | 是否可选中 | boolean | true |  |
 | selectedKeys | （受控）设置选中的树节点 | string\[] | - |  |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |

package.json

@@ -123,7 +123,7 @@
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
     "moment": "^2.25.3",
-    "rc-cascader": "~3.2.1",
+    "rc-cascader": "~3.4.1",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.7.0",
@@ -133,7 +133,7 @@
     "rc-image": "~5.3.0",
     "rc-input": "~0.0.1-alpha.5",
     "rc-input-number": "~7.3.0",
-    "rc-mentions": "~1.6.1",
+    "rc-mentions": "~1.7.0",
     "rc-menu": "~9.5.1",
     "rc-motion": "^2.4.4",
     "rc-notification": "~4.5.7",
@@ -146,12 +146,12 @@
     "rc-slider": "~10.0.0-alpha.4",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
-    "rc-table": "~7.23.0",
+    "rc-table": "~7.24.0",
-    "rc-tabs": "~11.10.0",
+    "rc-tabs": "~11.11.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.1.1",
-    "rc-tree": "~5.4.3",
+    "rc-tree": "~5.5.0",
-    "rc-tree-select": "~5.1.1",
+    "rc-tree-select": "~5.2.0",
     "rc-trigger": "^5.2.10",
     "rc-upload": "~4.3.0",
     "rc-util": "^5.19.3",