chore: Feature merge master

.github/workflows/sync.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Sync packages
-        uses: LexSwed/npm-package-sync
+        uses: LexSwed/npm-package-sync@master
         with:
           registry-to: 'https://npm.pkg.github.com'
           token-to: ${{ secrets.GITHUB_TOKEN }}

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

@@ -52,7 +52,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | space | set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
 | virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
-| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 |
+| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 |
 
 ## FAQ
 

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

@@ -53,7 +53,7 @@ return (
 | direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
 | space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
 | virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
 
 ## FAQ
 

components/input-number/style/rtl.less

@@ -21,7 +21,7 @@
 
   &-input {
     .@{input-number-prefix-cls}-rtl & {
-      direction: rtl;
+      direction: ltr;
       text-align: right;
     }
   }

components/message/demo/custom-style.md

@@ -21,7 +21,7 @@ const success = () => {
     content: 'This is a prompt message with custom className and style',
     className: 'custom-class',
     style: {
-      marginTop: '50%',
+      marginTop: '20vh',
     },
   });
 };

components/notification/demo/custom-style.md

@@ -21,9 +21,9 @@ const openNotification = () => {
     message: 'Notification Title',
     description:
       'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+    className: 'custom-class',
     style: {
       width: 600,
-      marginLeft: 335 - 600,
     },
   });
 };

components/notification/style/index.less

@@ -12,7 +12,6 @@
 
   position: fixed;
   z-index: @zindex-notification;
-  width: @notification-width;
   max-width: ~'calc(100vw - 32px)';
   margin-right: 24px;
 
@@ -35,11 +34,19 @@
   &-hook-holder,
   &-notice {
     position: relative;
+    width: @notification-width;
     margin-bottom: @notification-margin-bottom;
+    margin-left: auto;
     overflow: hidden;
     background: @notification-bg;
     border-radius: @border-radius-base;
     box-shadow: @shadow-2;
+
+    .@{notification-prefix-cls}-topLeft &,
+    .@{notification-prefix-cls}-bottomLeft & {
+      margin-right: auto;
+      margin-left: 0;
+    }
   }
 
   &-hook-holder > &-notice {

components/page-header/style/index.less

@@ -102,8 +102,8 @@
 
   &-footer {
     margin-top: @margin-md;
-    .@{ant-prefix}-tabs-nav {
-      &::before {
+    .@{ant-prefix}-tabs {
+      > .@{ant-prefix}-tabs-nav::before {
         border: none;
       }
 

components/select/index.en-US.md

@@ -31,7 +31,7 @@ Select component to select value from options.
 | defaultValue | Initial selected option. | string\|string\[]<br />number\|number\[]<br />LabeledValue\|LabeledValue[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownClassName | className of dropdown menu | string | - |  |
-| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true |  |
+| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | style of dropdown menu | CSSProperties | - |  |
 | 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 or function(inputValue, option) | true |  |
@@ -48,7 +48,7 @@ Select component to select value from options.
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` |  |
 | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | placeholder | Placeholder of select | string\|ReactNode | - |  |
-| showArrow | Whether to show the drop-down arrow | boolean | true |  |
+| showArrow | Whether to show the drop-down arrow | boolean | true for single select, false for multiple select |  |
 | showSearch | Whether show search input in single mode. | boolean | false |  |
 | size | Size of Select input. | `large` \| `middle` \| `small` |  |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |

components/select/index.zh-CN.md

@@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | defaultValue | 指定默认选中的条目 | string\|string\[]<br />number\|number\[]<br />LabeledValue\|LabeledValue[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |
@@ -49,7 +49,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` |  |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |  |
 | placeholder | 选择框默认文字 | string | - |  |
-| showArrow | 是否显示下拉小箭头 | boolean | true |  |
+| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false |  |
 | showSearch | 使单选模式可搜索 | boolean | false |  |
 | size | 选择框大小 | `large` \| `middle` \| `small` | - |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |

components/switch/style/index.less

@@ -2,7 +2,7 @@
 @import '../../style/mixins/index';
 
 @switch-prefix-cls: ~'@{ant-prefix}-switch';
-@switch-duration: 0.36s;
+@switch-duration: 0.2s;
 
 @switch-pin-size: @switch-height - 4px;
 @switch-sm-pin-size: @switch-sm-height - 4px;
@@ -71,7 +71,7 @@
     left: @switch-padding;
     width: @switch-pin-size;
     height: @switch-pin-size;
-    transition: all @switch-duration @ease-in-out-circ;
+    transition: all @switch-duration ease-in-out;
 
     &::before {
       position: absolute;
@@ -82,7 +82,7 @@
       background-color: @switch-bg;
       border-radius: @switch-pin-size / 2;
       box-shadow: 0 2px 4px 0 @switch-shadow-color;
-      transition: all @switch-duration @ease-in-out-circ;
+      transition: all @switch-duration ease-in-out;
       content: '';
     }
   }

components/table/style/rtl.less

@@ -43,8 +43,8 @@
   &-tbody {
     > tr {
       // ========================= Nest Table ===========================
-      .@{table-prefix-cls} {
-        &.@{table-prefix-cls}-rtl {
+      .@{table-prefix-cls}-wrapper:only-child {
+        .@{table-prefix-cls}-rtl {
           margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
         }
       }
@@ -96,6 +96,14 @@
     }
   }
 
+  &-thead tr th.@{table-prefix-cls}-column-has-sorters {
+    .@{table-prefix-cls}-filter-column-title {
+      .@{table-prefix-cls}-rtl & {
+        padding: 0 0 0 2.3em;
+      }
+    }
+  }
+
   &-filter-trigger-container {
     .@{table-wrapepr-rtl-cls} & {
       right: auto;

components/tree-select/index.en-US.md

@@ -23,7 +23,7 @@ Tree selection control.
 | defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - |  |
 | disabled | Disabled or not | boolean | false |  |
 | dropdownClassName | className of dropdown menu | string | - |  |
-| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true |  |
+| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | To set the style of the dropdown menu | CSSProperties | - |  |
 | filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function |  |

components/tree-select/index.zh-CN.md

@@ -24,7 +24,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | defaultValue | 指定默认选中的条目 | string/string\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的样式 | object | - |  |
 | filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function |  |

components/tree/index.tsx

@@ -1,6 +1,6 @@
 import Tree from './Tree';
 
-export { DataNode } from 'rc-tree/lib/interface';
+export { EventDataNode, DataNode } from 'rc-tree/lib/interface';
 
 export {
   TreeProps,

package.json

@@ -133,7 +133,7 @@
     "rc-resize-observer": "^0.2.3",
     "rc-select": "~11.0.0",
     "rc-slider": "~9.3.0",
-    "rc-steps": "~4.0.0",
+    "rc-steps": "~4.0.1",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.8.0",
     "rc-tabs": "~11.4.1",
@@ -192,7 +192,7 @@
     "enzyme-adapter-react-16": "^1.14.0",
     "enzyme-to-json": "^3.3.5",
     "esbuild-webpack-plugin": "^1.0.0",
-    "eslint": "~7.2.0",
+    "eslint": "^7.3.1",
     "eslint-config-airbnb": "^18.0.0",
     "eslint-config-prettier": "^6.0.0",
     "eslint-plugin-babel": "^5.3.0",

site/theme/template/Content/ComponentDoc.jsx

@@ -9,6 +9,10 @@ import Demo from './Demo';
 import EditButton from './EditButton';
 import { ping, getMetaDescription } from '../utils';
 
+const ComponentInMarkdown = React.memo(({ content, utils }) =>
+  utils.toReactComponent(['section', { className: 'markdown' }].concat(getChildren(content))),
+);
+
 class ComponentDoc extends React.Component {
   state = {
     expandAll: false,
@@ -163,9 +167,7 @@ class ComponentDoc extends React.Component {
               filename={filename}
             />
           </h1>
-          {utils.toReactComponent(
-            ['section', { className: 'markdown' }].concat(getChildren(content)),
-          )}
+          <ComponentInMarkdown utils={utils} content={content} />
           <h2>
             <FormattedMessage id="app.component.examples" />
             <span className="all-code-box-controls">

site/theme/template/IconDisplay/index.tsx

@@ -28,7 +28,7 @@ interface IconDisplayState {
   searchKey: string;
 }
 
-class IconDisplay extends React.Component<IconDisplayProps, IconDisplayState> {
+class IconDisplay extends React.PureComponent<IconDisplayProps, IconDisplayState> {
   static categories: Categories = categories;
 
   static newIconNames: string[] = [];