chore: auto merge branchs (#29733)

chore: merge master into feature

components/alert/demo/error-boundary.md

@@ -1,8 +1,8 @@
 ---
 order: 8
 title:
-  zh-CN: ErrorBoundary
-  en-US: React 错误处理
+  zh-CN: React 错误处理
+  en-US: ErrorBoundary
 ---
 
 ## zh-CN

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -153,7 +153,7 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
         aria-haspopup="listbox"
         aria-owns="undefined_list"
         autocomplete="off"
-        class="ant-input ant-select-selection-search-input"
+        class="ant-input ant-select-selection-search-input custom"
         placeholder="input here"
         role="combobox"
         style="height:50px"

components/auto-complete/__tests__/index.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import AutoComplete from '..';
+import Input from '../../input';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
@@ -78,4 +79,13 @@ describe('AutoComplete', () => {
     // eslint-disable-next-line no-console
     console.warn.mockRestore();
   });
+
+  it('should not override custom input className', () => {
+    const wrapper = mount(
+      <AutoComplete>
+        <Input className="custom" />
+      </AutoComplete>,
+    );
+    expect(wrapper.find('input').hasClass('custom')).toBe(true);
+  });
 });

components/grid/row.tsx

@@ -103,13 +103,15 @@ const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   const horizontalGutter = gutters[0] > 0 ? gutters[0] / -2 : undefined;
   const verticalGutter = gutters[1] > 0 ? gutters[1] / -2 : undefined;
 
-  rowStyle.marginLeft = horizontalGutter;
-  rowStyle.marginRight = horizontalGutter;
+  if (horizontalGutter) {
+    rowStyle.marginLeft = horizontalGutter;
+    rowStyle.marginRight = horizontalGutter;
+  }
 
   if (supportFlexGap) {
     // Set gap direct if flex gap support
     [, rowStyle.rowGap] = gutters;
-  } else {
+  } else if (verticalGutter) {
     rowStyle.marginTop = verticalGutter;
     rowStyle.marginBottom = verticalGutter;
   }

components/modal/demo/footer.md

@@ -62,6 +62,15 @@ class App extends React.Component {
             <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}>
               Submit
             </Button>,
+            <Button
+              key="link"
+              href="https://google.com"
+              type="primary"
+              loading={loading}
+              onClick={this.handleOk}
+            >
+              Search on Google
+            </Button>,
           ]}
         >
           <p>Some contents...</p>

components/modal/style/confirm.less

@@ -49,7 +49,7 @@
     float: right;
     margin-top: 24px;
 
-    button + button {
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
       margin-bottom: 0;
       margin-left: 8px;
     }

components/modal/style/modal.less

@@ -93,7 +93,7 @@
       @modal-footer-border-color-split;
     border-radius: 0 0 @border-radius-base @border-radius-base;
 
-    button + button {
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
       margin-bottom: 0;
       margin-left: 8px;
     }

components/modal/style/rtl.less

@@ -23,7 +23,7 @@
     .@{dialog-wrap-rtl-cls} & {
       text-align: left;
     }
-    button + button {
+    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
       .@{dialog-wrap-rtl-cls} & {
         margin-right: 8px;
         margin-left: 0;
@@ -54,7 +54,7 @@
       .@{dialog-wrap-rtl-cls} & {
         float: left;
       }
-      button + button {
+      .@{ant-prefix}-btn + .@{ant-prefix}-btn {
         .@{dialog-wrap-rtl-cls} & {
           margin-right: 8px;
           margin-left: 0;

components/table/demo/drag-sorting.md

@@ -45,7 +45,8 @@ const DragableBodyRow = ({ index, moveRow, className, style, ...restProps }) =>
   );
   const [, drag] = useDrag(
     () => ({
-      item: { type, index },
+      type,
+      item: { index },
       collect: monitor => ({
         isDragging: monitor.isDragging(),
       }),

components/table/index.en-US.md

@@ -113,37 +113,38 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
 
 One of the Table `columns` prop for describing the table's columns, Column has the same API.
 
-| Property | Description | Type | Default | Version |  |
-| --- | --- | --- | --- | --- | --- |
-| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` |  |  |
-| className | The className of this column | string | - |  |  |
-| colSpan | Span of this column's title | number | - |  |  |
-| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - |  |  |
-| defaultFilteredValue | Default filtered values | string\[] | - |  |  |
-| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |  |
-| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |  |
-| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - |  |  |
-| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |  |
-| filtered | Whether the `dataSource` is filtered | boolean | false |  |  |
-| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |  |
-| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |  |
-| filterMultiple | Whether multiple filters can be selected | boolean | true |  |  |
-| filters | Filter menu config | object\[] | - |  |  |
-| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false |  |  |
-| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |  |  |
-| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |  |
-| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |  |
-| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |  |
-| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true |  |  |
-| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |  |  |
-| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - |  |  |
-| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - |  |  |
-| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - |  |  |
-| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - |  |  |
-| onCell | Set props on per cell | function(record, rowIndex) | - |  |  |
-| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - |  |  |
-| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |  |  |
-| onHeaderCell | Set props on per header cell | function(column) | - |  |  |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` |  |
+| className | The className of this column | string | - |  |
+| colSpan | Span of this column's title | number | - |  |
+| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - |  |
+| defaultFilteredValue | Default filtered values | string\[] | - |  |
+| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |
+| editable | Whether column can be edited | boolean | false |  |
+| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
+| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - |  |
+| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |
+| filtered | Whether the `dataSource` is filtered | boolean | false |  |
+| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |
+| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |
+| filterMultiple | Whether multiple filters can be selected | boolean | true |  |
+| filters | Filter menu config | object\[] | - |  |
+| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false |  |
+| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |  |
+| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |
+| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
+| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
+| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true |  |
+| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |  |
+| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - |  |
+| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - |  |
+| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - |  |
+| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - |  |
+| onCell | Set props on per cell | function(record, rowIndex) | - |  |
+| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - |  |
+| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |  |
+| onHeaderCell | Set props on per header cell | function(column) | - |  |
 
 ### ColumnGroup
 

components/table/index.zh-CN.md

@@ -128,6 +128,7 @@ const columns = [
 | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - |  |
 | defaultFilteredValue | 默认筛选值 | string\[] | - |  |
 | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - |  |
+| editable | 是否可编辑 | boolean | false |  |
 | ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - |  |
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |  |

components/upload/Upload.tsx

@@ -51,6 +51,7 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
 
   const [mergedFileList, setMergedFileList] = useMergedState(defaultFileList || [], {
     value: fileList,
+    postState: list => list ?? [],
   });
 
   const [dragState, setDragState] = React.useState<string>('drop');

components/upload/UploadList/ListItem.tsx

@@ -238,7 +238,11 @@ const ListItem = React.forwardRef(
         <div className={`${prefixCls}-list-item-info`}>{iconAndPreview}</div>
         {actions}
         {showProgress && (
-          <CSSMotion motionName={`${rootPrefixCls}-fade`} visible={file.status === 'uploading'}>
+          <CSSMotion
+            motionName={`${rootPrefixCls}-fade`}
+            visible={file.status === 'uploading'}
+            motionDeadline={2000}
+          >
             {({ className: motionClassName }) => {
               // show loading icon if upload progress listener is disabled
               const loadingProgress =

components/upload/UploadList/index.tsx

@@ -178,6 +178,7 @@ const InternalUploadList: React.ForwardRefRenderFunction<unknown, UploadListProp
   // const transitionName = list.length === 0 ? '' : `${prefixCls}-${animationDirection}`;
 
   let motionConfig: Omit<CSSMotionListProps, 'onVisibleChanged'> = {
+    motionDeadline: 2000,
     motionName: `${prefixCls}-${animationDirection}`,
     keys: motionKeyList,
     motionAppear,

components/upload/__tests__/upload.test.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import produce from 'immer';
+import { cloneDeep } from 'lodash';
 import Upload from '..';
 import Form from '../../form';
 import { T, wrapFile, getFileItem, removeFileItem } from '../utils';
@@ -786,4 +787,37 @@ describe('Upload', () => {
 
     expect(fileList[0].uid).toBeTruthy();
   });
+
+  it('Proxy should support deepClone', async () => {
+    const onChange = jest.fn();
+
+    const wrapper = mount(
+      <Upload onChange={onChange}>
+        <button type="button">upload</button>
+      </Upload>,
+    );
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        files: [
+          new File(['foo'], 'foo.png', {
+            type: 'image/png',
+          }),
+        ],
+      },
+    });
+
+    await sleep();
+
+    const { file } = onChange.mock.calls[0][0];
+    const clone = cloneDeep(file);
+
+    expect(Object.getOwnPropertyDescriptor(file, 'name')).toEqual(
+      expect.objectContaining({ value: 'foo.png' }),
+    );
+
+    ['uid', 'name', 'lastModified', 'lastModifiedDate', 'size', 'type'].forEach(key => {
+      expect(key in clone).toBeTruthy();
+    });
+  });
 });

components/upload/__tests__/uploadlist.test.js

@@ -1186,4 +1186,12 @@ describe('Upload List', () => {
 
     wrapper.unmount();
   });
+
+  it('Not crash when fileList is null', () => {
+    const defaultWrapper = mount(<Upload defaultFileList={null} />);
+    defaultWrapper.unmount();
+
+    const wrapper = mount(<Upload fileList={null} />);
+    wrapper.unmount();
+  });
 });

components/upload/demo/drag-sorting.md

@@ -47,7 +47,8 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
   );
   const [, drag] = useDrag(
     () => ({
-      item: { type, index },
+      type,
+      item: { index },
       collect: monitor => ({
         isDragging: monitor.isDragging(),
       }),
@@ -55,11 +56,7 @@ const DragableUploadListItem = ({ originNode, moveRow, file, fileList }) => {
     [],
   );
   drop(drag(ref));
-  const errorNode = (
-    <Tooltip title="Upload Error" getPopupContainer={() => document.body}>
-      {originNode.props.children}
-    </Tooltip>
-  );
+  const errorNode = <Tooltip title="Upload Error">{originNode.props.children}</Tooltip>;
   return (
     <div
       ref={ref}
@@ -155,7 +152,6 @@ ReactDOM.render(<DragSortingUpload />, mountNode);
 #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-downward {
   border-bottom-color: #1890ff;
 }
-
 #components-upload-demo-drag-sorting .ant-upload-draggable-list-item.drop-over-upward {
   border-top-color: #1890ff;
 }

components/upload/utils.tsx

@@ -4,12 +4,14 @@ export function T() {
   return true;
 }
 
+type WrapFile = RcFile | UploadFile;
+
 /**
  * Wrap file with Proxy to provides more info. Will fallback to object if Proxy not support.
  *
  * Origin comment: Fix IE file.status problem via coping a new Object
  */
-export function wrapFile(file: RcFile | UploadFile): UploadFile {
+export function wrapFile(file: WrapFile): UploadFile {
   const filledProps = {
     lastModified: file.lastModified,
     lastModifiedDate: file.lastModifiedDate,
@@ -24,12 +26,16 @@ export function wrapFile(file: RcFile | UploadFile): UploadFile {
   if (typeof Proxy !== 'undefined') {
     const data = new Map<string | symbol, any>(Object.entries(filledProps));
 
+    const getValue = (key: string | symbol) => {
+      if (data.has(key)) {
+        return data.get(key);
+      }
+      return (file as any)[key];
+    };
+
     return new Proxy(file, {
-      get(target, key) {
-        if (data.has(key)) {
-          return data.get(key);
-        }
-        return (target as any)[key];
+      get(_, key) {
+        return getValue(key);
       },
       set(_, key, value) {
         data.set(key, value);
@@ -42,11 +48,39 @@ export function wrapFile(file: RcFile | UploadFile): UploadFile {
         const keys = [...Object.keys(target), ...data.keys()];
         return [...new Set(keys)];
       },
-      getOwnPropertyDescriptor() {
-        return {
-          enumerable: true,
-          configurable: true,
-        };
+
+      /**
+       * Lodash cloneDeep will use `Object.create(Object.getPrototypeOf(file))` which do not map to
+       * the correct context. We need do a sub class to make skip fetch the context and still
+       * instance of File. ref: https://github.com/ant-design/ant-design/issues/29646
+       */
+      getPrototypeOf() {
+        class ProxyFile extends File {}
+
+        const fileProtoKeys = Object.keys(File.prototype);
+
+        [...fileProtoKeys, 'size', 'type'].forEach(key => {
+          Object.defineProperty(ProxyFile.prototype, key, {
+            // Get will never reach but we provide fallback here
+            /* istanbul ignore next */
+            get: () => getValue(key),
+          });
+        });
+
+        return ProxyFile.prototype;
+      },
+      getOwnPropertyDescriptor(target, prop) {
+        if (data.has(prop)) {
+          return {
+            value: data.get(prop),
+            writable: true,
+            enumerable: true,
+            configurable: true,
+          };
+        }
+
+        const descriptor = Object.getOwnPropertyDescriptor(target, prop);
+        return descriptor;
       },
     });
   }

docs/react/faq.en-US.md

@@ -21,7 +21,7 @@ Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3
 
 ### How do I prevent `Select Dropdown DatePicker TimePicker Popover Popconfirm` scrolling with the page?
 
-Use `<Select getPopupContainer={trigger => trigger.parentElement}>` ([API reference](https://ant.design/components/select-cn/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>` ([API reference](https://ant.design/components/config-provider-cn/#API))
+Use `<Select getPopupContainer={trigger => trigger.parentElement}>` ([API reference](/components/select/#Select-props)) to render a component inside the scroll area. If you need to config this globally in your application, try `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>` ([API reference](/components/config-provider/#API))
 
 And make sure that parentElement is `position: relative` or `position: absolute`.
 

docs/react/faq.zh-CN.md

@@ -15,13 +15,13 @@ title: FAQ
 
 该问题在 `3.11.0` 后已经解决。如果你仍在使用旧版本，你可以通过 `<Select getPopupContainer={trigger => trigger.parentElement}>` 来在 Popover 中渲染组件，或者使用其他的 `getXxxxContainer` 参数。
 
-https://ant.design/components/select/#Select-props
+可以参考 [Select 属性](/components/select/#Select-props)
 
 相关 issue：[#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
 
 ### `Select Dropdown DatePicker TimePicker Popover Popconfirm` 会跟随滚动条上下移动？
 
-使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`（[API 文档](https://ant.design/components/select-cn/#Select-props)）来将组件渲染到滚动区域内，或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题，可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`（[API 文档](https://ant.design/components/config-provider-cn/#API)）
+使用 `<Select getPopupContainer={trigger => trigger.parentElement}>`（[API 文档](/components/select/#Select-props)）来将组件渲染到滚动区域内，或者使用其他的 `getXxxxContainer` 参数。如果需要全局解决这个问题，可以使用 `<ConfigProvider getPopupContainer={trigger => trigger.parentElement}>`（[API 文档](/components/config-provider/#API)）
 
 并且保证 parentElement 是 `position: relative` 或 `position: absolute`。
 
@@ -41,19 +41,19 @@ https://ant.design/components/select/#Select-props
 
 ### 当我动态改变 `defaultValue` 的时候它并没有生效。
 
-`Input`/`Select` 等的 `defaultXxxx`（例如 `defaultValue`）只有在第一次渲染的时候有效，这是 React 的规范，请阅读 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。
+`Input`/`Select` 等的 `defaultXxxx`（例如 `defaultValue`）只有在第一次渲染的时候有效，这是 React 的规范，请阅读 [React 的文档](https://zh-hans.reactjs.org/docs/forms.html#controlled-components)。
 
 ### 为什么修改组件传入的对象或数组属性组件不会更新？
 
-antd 内部会对 props 进行浅比较实现性能优化。当状态变更，你总是应该传递一个新的对象。具体请参考 [React 的文档](https://reactjs.org/docs/thinking-in-react.html)
+antd 内部会对 props 进行浅比较实现性能优化。当状态变更，你总是应该传递一个新的对象。具体请参考 [React 的文档](https://zh-hans.reactjs.org/docs/thinking-in-react.html)
 
 ### 当我设置了 `Input`/`Select` 等的 `value` 时它就无法修改了。
 
-尝试使用 `onChange` 来改变 `value`，请参考 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。
+尝试使用 `onChange` 来改变 `value`，请参考 [React 的文档](https://zh-hans.reactjs.org/docs/forms.html#controlled-components)。
 
 ### 多个组件放一排时没有垂直对齐怎么办？
 
-尝试使用 [Space](https://ant.design/components/space-cn/) 组件来使他们对齐。
+尝试使用 [Space](/components/space/) 组件来使他们对齐。
 
 ### antd 覆盖了我的全局样式！
 
@@ -130,7 +130,7 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，
 
 message/notification/Modal.confirm 等静态方法不同于 `<Button />` 的渲染方式，是单独渲染在 `ReactDOM.render` 生成的 DOM 树节点上，无法共享 ConfigProvider 提供的 context 信息。你有两种解决方式：
 
-1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal-cn/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
+1. 使用官方提供的 [message.useMessage](/components/message-cn/#components-message-demo-hooks)、[notification.useNotification](/components/notification/#%E4%B8%BA%E4%BB%80%E4%B9%88-notification-%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux-%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-%E7%9A%84-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 和 [Modal.useModal](/components/modal/#%E4%B8%BA%E4%BB%80%E4%B9%88-Modal-%E6%96%B9%E6%B3%95%E4%B8%8D%E8%83%BD%E8%8E%B7%E5%8F%96-context%E3%80%81redux%E3%80%81%E7%9A%84%E5%86%85%E5%AE%B9%E5%92%8C-ConfigProvider-locale/prefixCls-%E9%85%8D%E7%BD%AE%EF%BC%9F) 来调用这些方法。
 
 2. 使用 `ConfigProvider.config` 方法全局设置 `prefixCls`。
 

docs/react/recommendation.en-US.md

@@ -10,7 +10,7 @@ title: Third-Party Libraries
 | Visualization and charts | [AntV Data Visualization](https://antv.vision/en) [🔥 AntV Charting Library](https://g2plot.antv.vision/en) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) |
 | React Hooks Library | [ahooks](https://github.com/alibaba/hooks) |
 | Router | [react-router](https://github.com/ReactTraining/react-router) |
-| Layout | [@rebass/grid](https://github.com/rebassjs/grid) [react-blocks](http://whoisandy.github.io/react-blocks/) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) |
+| Layout |[react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) |
 | Drag and drop | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) |
 | Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) |
 | Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) |

docs/react/recommendation.zh-CN.md

@@ -10,7 +10,7 @@ title: 社区精选组件
 | 可视化图表 | [AntV 数据可视化解决方案](https://antv.vision/zh) [🔥 AntV 图表库](https://g2plot.antv.vision/zh) [BizCharts](https://github.com/alibaba/BizCharts) [recharts](https://github.com/recharts/recharts/) [viser](https://viserjs.github.io/) |
 | React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
 | 路由 | [react-router](https://github.com/ReactTraining/react-router) |
-| 布局 | [@rebass/grid](https://github.com/rebassjs/grid) [react-blocks](https://github.com/whoisandy/react-blocks) [react-flexbox-grid](https://github.com/roylee0704/react-flexbox-grid) |
+| 布局 |[react-grid-layout](https://github.com/react-grid-layout/react-grid-layout) [react-grid-system](https://github.com/sealninja/react-grid-system) [rc-dock](https://github.com/ticlo/rc-dock) |
 | 拖拽 | [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) [react-dnd](https://github.com/gaearon/react-dnd) [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc) |
 | 代码编辑器 | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) |
 | 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) |

package.json

@@ -136,7 +136,7 @@
     "rc-progress": "~3.1.0",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.0.0",
-    "rc-select": "~12.1.0",
+    "rc-select": "~12.1.6",
     "rc-slider": "~9.7.1",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
@@ -244,8 +244,8 @@
     "react": "^17.0.1",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^13.0.0",
-    "react-dnd-html5-backend": "^12.1.0",
+    "react-dnd": "^14.0.1",
+    "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-github-button": "^0.1.11",