chore: auto merge branches (#41292)

chore: merge feature into master
2 years ago · de28d09854
14 changed files with 141 additions and 43 deletions
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -38,7 +38,7 @@ const GlobalDemoStyles: React.FC = () => {
          }

          .code-box-demo {
-            overflow: scroll;
+            overflow: auto;
            background-color: ${token.colorBgContainer};
            border-radius: ${token.borderRadius}px ${token.borderRadius}px 0 0;
          }
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -105,6 +105,33 @@ type AnchorItem = {
  children?: AnchorItem[];
 };

+const AvatarPlaceholder = ({ num = 3 }: { num?: number }) => (
+  <>
+    {Array.from({ length: num }).map((_, i) => (
+      <Skeleton.Avatar size="small" active key={i} style={{ marginLeft: i === 0 ? 0 : -8 }} />
+    ))}
+  </>
+);
+
+const AuthorAvatar = ({ name, avatar }: { name: string; avatar: string }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  useLayoutEffect(() => {
+    const img = new Image();
+    img.src = avatar;
+    img.onload = () => setLoading(false);
+    img.onerror = () => setError(true);
+  }, []);
+
+  if (error) return null;
+  if (loading) return <Skeleton.Avatar size="small" active />;
+  return (
+    <Avatar size="small" src={avatar} alt={name}>
+      {name}
+    </Avatar>
+  );
+};
+
 const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
  const meta = useRouteMeta();
  const tab = useTabMeta();
@ -150,13 +177,31 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {

  const isRTL = direction === 'rtl';

-  const avatarPlaceholder = (
-    <>
-      <Skeleton.Avatar size="small" active />
-      <Skeleton.Avatar size="small" active style={{ marginLeft: -8 }} />
-      <Skeleton.Avatar size="small" active style={{ marginLeft: -8 }} />
-    </>
-  );
+  // support custom author info in frontmatter
+  // e.g.
+  // ---
+  // author:
+  //   - name: qixian
+  //     avatar: https://avatars.githubusercontent.com/u/11746742?v=4
+  //   - name: yutingzhao1991
+  //     avatar: https://avatars.githubusercontent.com/u/5378891?v=4
+  // ---
+  const mergedAuthorInfos = useMemo(() => {
+    const { author } = meta.frontmatter;
+    if (!author) {
+      return [];
+    }
+    if (typeof author === 'string') {
+      return author.split(',').map((item) => ({
+        name: item,
+        avatar: `https://github.com/${item}.png`,
+      }));
+    }
+    if (Array.isArray(author)) {
+      return author;
+    }
+    return [];
+  }, [meta.frontmatter.author]);

  return (
    <DemoContext.Provider value={contextValue}>
@ -204,19 +249,26 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
          ) : null}
          {/* 添加作者、时间等信息 */}
          {meta.frontmatter.date || meta.frontmatter.author ? (
-            <Typography.Paragraph style={{ opacity: 0.65 }}>
+            <Typography.Paragraph>
              <Space>
                {meta.frontmatter.date && (
-                  <span>
+                  <span style={{ opacity: 0.65 }}>
                    <CalendarOutlined /> {DayJS(meta.frontmatter.date).format('YYYY-MM-DD')}
                  </span>
                )}
-                {meta.frontmatter.author &&
-                  (meta.frontmatter.author as string)?.split(',')?.map((author) => (
-                    <Typography.Link href={`https://github.com/${author}`} key={author}>
-                      @{author}
-                    </Typography.Link>
-                  ))}
+                {mergedAuthorInfos.map((info) => (
+                  <a
+                    href={`https://github.com/${info.name}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    key={info.name}
+                  >
+                    <Space size={3}>
+                      <AuthorAvatar name={info.name} avatar={info.avatar} />
+                      <span style={{ opacity: 0.65 }}>@{info.name}</span>
+                    </Space>
+                  </a>
+                ))}
              </Space>
            </Typography.Paragraph>
          ) : null}
@ -227,10 +279,11 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
              repo="ant-design"
              owner="ant-design"
              css={styles.contributorsList}
+              cache
              fileName={meta.frontmatter.filename}
              renderItem={(item, loading) =>
                loading || !item ? (
-                  avatarPlaceholder
+                  <AvatarPlaceholder />
                ) : (
                  <Tooltip
                    mouseEnterDelay={0.3}
--- a/.dumi/tsconfig.json
+++ b/.dumi/tsconfig.json
@ -1,5 +1,4 @@
 {
-  "extends": "../.dumi/tmp/tsconfig.json",
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
--- a/.github/workflows/mock-project-build.yml
+++ b/.github/workflows/mock-project-build.yml
@ -2,16 +2,28 @@
 name: Mock Project Build

 on:
+  workflow_dispatch:
  schedule:
-    - cron: "*/30 * * * *"
+    - cron: '*/30 * * * *'

 jobs:
  pr-check-ci:
    runs-on: ubuntu-latest
    name: Build Project
    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
      - uses: actions/setup-node@v3
        with:
          node-version: 16
+
      - name: Run Script
        run: bash ./scripts/ci-mock-project-build.sh
+
+      - uses: actions-cool/ci-notice@v1
+        if: ${{ failure() }}
+        with:
+          notice-types: 'dingding'
+          dingding-token: ${{ secrets.DINGDING_BOT_COLLABORATOR_TOKEN }}
+          notice-title: 'CI Mock Project Build Failed'
--- a/components/alert/tests/index.test.tsx
+++ b/components/alert/tests/index.test.tsx
@ -1,9 +1,9 @@
-import React from 'react';
 import userEvent from '@testing-library/user-event';
+import React from 'react';
 import Alert from '..';
 import accessibilityTest from '../../../tests/shared/accessibilityTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { render, act, screen } from '../../../tests/utils';
+import { act, render, screen } from '../../../tests/utils';
 import Button from '../../button';
 import Popconfirm from '../../popconfirm';
 import Tooltip from '../../tooltip';
@ -105,6 +105,10 @@ describe('Alert', () => {

    await userEvent.hover(screen.getByRole('alert'));

+    act(() => {
+      jest.runAllTimers();
+    });
+
    expect(screen.getByRole('tooltip')).toBeInTheDocument();
  });

@ -119,6 +123,10 @@ describe('Alert', () => {
    );
    await userEvent.click(screen.getByRole('alert'));

+    act(() => {
+      jest.runAllTimers();
+    });
+
    expect(screen.getByRole('tooltip')).toBeInTheDocument();
  });

--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -84,6 +84,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | dateRender | Custom rendering function for date cells | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - |  |
+| format | To set the date format, support multi-format matching when it is an array, display the first one shall prevail. refer to [dayjs#format](https://day.js.org/docs/en/display/format). for example: [Custom Format](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
 | popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
 | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
@ -121,7 +122,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` |  |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD` |  |
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#api) |  |
@ -138,7 +139,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` |  |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY` |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
@ -151,7 +152,7 @@ Added in `4.1.0`.
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` |  |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-\QQ` |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
@ -162,7 +163,7 @@ Added in `4.1.0`.
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` |  |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM` |  |
 | monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
@ -174,7 +175,7 @@ Added in `4.1.0`.
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` |  |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-wo` |  |
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | value | To set date | [dayjs](https://day.js.org/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
@ -189,7 +190,7 @@ Added in `4.1.0`.
 | defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - |  |
-| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` |  |
+| format | To set the date format. refer to [dayjs#format](https://day.js.org/docs/en/display/format) | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` |  |
 | presets | The preset ranges for quick selection | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` |  |
@ -199,6 +200,17 @@ Added in `4.1.0`.
 | onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |

+#### formatType
+
+```typescript
+import type { Dayjs } from 'dayjs';
+
+type Generic = string;
+type GenericFn = (value: Dayjs) => string;
+
+export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
+```
+
 ## FAQ

 ### When set mode to DatePicker/RangePicker, cannot select year or month anymore?
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -85,6 +85,7 @@ import locale from 'antd/locale/zh_CN';
 | dateRender | 自定义日期单元格的内容 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - |  |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。示例：[自定义格式](#components-date-picker-demo-format) | [formatType](#formattype) | [rc-picker](https://github.com/react-component/picker/blob/f512f18ed59d6791280d1c3d7d37abbb9867eb0b/src/utils/uiUtil.ts#L155-L177) |  |
 | popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
@ -122,7 +123,7 @@ import locale from 'antd/locale/zh_CN';
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [dayjs](https://day.js.org/) | - |  |
 | disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` |  |
+| format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-MM-DD` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker-cn#api) |  |
@ -139,7 +140,7 @@ import locale from 'antd/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY` |  |
+| format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | value | 日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
@ -152,7 +153,7 @@ import locale from 'antd/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-\QQ` |  |
+| format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-\QQ` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | value | 日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
@ -163,7 +164,7 @@ import locale from 'antd/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-MM` |  |
+| format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-MM` |  |
 | monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | value | 日期 | [dayjs](https://day.js.org/) | - |  |
@ -175,7 +176,7 @@ import locale from 'antd/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
-| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-wo` |  |
+| format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-wo` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | value | 日期 | [dayjs](https://day.js.org/) | - |  |
 | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
@ -190,7 +191,7 @@ import locale from 'antd/locale/zh_CN';
 | defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
 | disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - |  |
-| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
+| format | 展示的日期格式，配置参考 [dayjs#format](https://day.js.org/docs/zh-CN/display/format#%E6%94%AF%E6%8C%81%E7%9A%84%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%8D%A0%E4%BD%8D%E7%AC%A6%E5%88%97%E8%A1%A8)。 | [formatType](#formattype) | `YYYY-MM-DD HH:mm:ss` |  |
 | presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
@ -200,6 +201,17 @@ import locale from 'antd/locale/zh_CN';
 | onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |

+#### formatType
+
+```typescript
+import type { Dayjs } from 'dayjs';
+
+type Generic = string;
+type GenericFn = (value: Dayjs) => string;
+
+export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
+```
+
 ## FAQ

 ### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -435,6 +435,7 @@ Form only update the Field which changed to avoid full refresh perf issue. Thus
 | Name       | Description              | Type                     |
 | ---------- | ------------------------ | ------------------------ |
 | errors     | Error messages           | string\[]                |
+| warnings   | Warning messages         | string\[]                |
 | name       | Field name path          | [NamePath](#namepath)\[] |
 | touched    | Whether is operated      | boolean                  |
 | validating | Whether is in validating | boolean                  |
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -434,6 +434,7 @@ Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新
 | 名称       | 说明             | 类型                     |
 | ---------- | ---------------- | ------------------------ |
 | errors     | 错误信息         | string\[]                |
+| warnings   | 警告信息         | string\[]                |
 | name       | 字段名称         | [NamePath](#namepath)\[] |
 | touched    | 是否被用户操作过 | boolean                  |
 | validating | 是否正在校验     | boolean                  |
--- a/components/input/tests/snapshots/textarea.test.tsx.snap
+++ b/components/input/tests/snapshots/textarea.test.tsx.snap
@ -43,7 +43,7 @@ exports[`TextArea allowClear should change type when click 1`] = `

 exports[`TextArea allowClear should change type when click 2`] = `
 <span
-  class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper"
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-focused ant-input-textarea-affix-wrapper"
 >
  <textarea
    class="ant-input"
--- a/components/popconfirm/tests/snapshots/index.test.tsx.snap
+++ b/components/popconfirm/tests/snapshots/index.test.tsx.snap
@ -6,4 +6,4 @@ exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div cla

 exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">code</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;

-exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-arrow" style="position: absolute; left: 0px; top: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
+exports[`Popconfirm shows content for render functions 1`] = `"<div class="ant-popover-arrow" style="position: absolute; bottom: 0px; left: 0px;"></div><div class="ant-popover-content"><div class="ant-popover-inner" role="tooltip"><div class="ant-popover-inner-content"><div class="ant-popconfirm-inner-content"><div class="ant-popconfirm-message"><span class="ant-popconfirm-message-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span><div class="ant-popconfirm-message-title">some-title</div></div><div class="ant-popconfirm-buttons"><button type="button" class="ant-btn ant-btn-default ant-btn-sm"><span>Cancel</span></button><button type="button" class="ant-btn ant-btn-primary ant-btn-sm"><span>OK</span></button></div></div></div></div></div>"`;
--- a/package.json
+++ b/package.json
@ -115,7 +115,7 @@
    "@ctrl/tinycolor": "^3.6.0",
    "@rc-component/mutate-observer": "^1.0.0",
    "@rc-component/tour": "~1.8.0",
-    "@rc-component/trigger": "^1.5.5",
+    "@rc-component/trigger": "^1.5.9",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.2.0",
    "dayjs": "^1.11.1",
@ -146,7 +146,7 @@
    "rc-switch": "~4.0.0",
    "rc-table": "~7.31.0",
    "rc-tabs": "~12.5.6",
-    "rc-textarea": "~1.0.0",
+    "rc-textarea": "~1.1.0",
    "rc-tooltip": "~6.0.0",
    "rc-tree": "~5.7.0",
    "rc-tree-select": "~5.7.0",
@ -167,7 +167,7 @@
    "@emotion/css": "^11.10.5",
    "@emotion/react": "^11.10.4",
    "@emotion/server": "^11.4.0",
-    "@qixian.cs/github-contributors-list": "^1.0.3",
+    "@qixian.cs/github-contributors-list": "^1.1.0",
    "@size-limit/file": "^8.1.0",
    "@stackblitz/sdk": "^1.3.0",
    "@testing-library/dom": "^9.0.0",
@ -285,7 +285,7 @@
    "ts-node": "^10.8.2",
    "typedoc": "^0.23.21",
    "typescript": "~4.9.3",
-    "vanilla-jsoneditor": "^0.15.1",
+    "vanilla-jsoneditor": "^0.16.0",
    "webpack-bundle-analyzer": "^4.1.0",
    "xhr-mock": "^2.4.1",
    "yaml-front-matter": "^4.0.0"
--- a/scripts/ci-mock-project-build.sh
+++ b/scripts/ci-mock-project-build.sh
@ -4,11 +4,11 @@
 rm -rf ~tmpProj/

 # clone project
-git clone https://github.com/ant-design/ant-design-pro.git ~tmpProj --depth=1
+git clone https://github.com/ant-design/create-next-app-antd.git ~tmpProj --depth=1

 # install
 cd ~tmpProj
-tnpm i
+yarn

 # build
-npm run build
+yarn run build
--- a/tests/shared/imageTest.tsx
+++ b/tests/shared/imageTest.tsx
@ -40,7 +40,7 @@ export default function imageTest(component: React.ReactElement) {

        const element = (
          <ConfigProvider theme={{ algorithm }}>
-            <App>
+            <App style={{ background: algorithm === theme.darkAlgorithm ? '#000' : '' }}>
              <StyleProvider cache={cache}>{component}</StyleProvider>
            </App>
          </ConfigProvider>