chore: auto merge branches (#36482)

chore: Next merge master
2024-12-12 15:19:58 +08:00 · 2022-07-12 11:29:35 +00:00 · 2022-07-12 11:29:35 +00:00 · 2a335c6544
commit 2a335c6544
parent 98994ab692 1cbc37f7bc
35 changed files with 2155 additions and 96 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,22 @@ timeline: true

 ---

+## 4.21.6
+
+`2022-07-11`
+
+- 🐞 Fix Skeleton active lost border-radius in Safari. [#36445](https://github.com/ant-design/ant-design/pull/36445)
+- 🐞 Fix Breadcrumb separators disappearing when used as last element in a List. [#36448](https://github.com/ant-design/ant-design/pull/36448) [@LeonKattendick](https://github.com/LeonKattendick)
+- 🐞 Fixed Upload removing file status color is wrong. [#36439](https://github.com/ant-design/ant-design/pull/36439)
+- 🐞 Fix DatePicker style issue when using `status`. [#35685](https://github.com/ant-design/ant-design/pull/35685) [@simplejason](https://github.com/simplejason)
+- Table
+  - 🐞 Fix Table scroll shadow style. [#36420](https://github.com/ant-design/ant-design/pull/36420) [@shunyue1320](https://github.com/shunyue1320)
+  - 🐞 Fix Table hover render performance issue. [#36383](https://github.com/ant-design/ant-design/pull/36383)
+- 💄 Adjust Modal header close icon style. [#36309](https://github.com/ant-design/ant-design/pull/36309) [@cw1997](https://github.com/cw1997)
+- 🐞 Fix Form.ErrorList shaking when validating too fast. [#36358](https://github.com/ant-design/ant-design/pull/36358)
+- 💄 Radio shadow color should be transparency to fit none-white background. [#36335](https://github.com/ant-design/ant-design/pull/36335)
+- 🐞 Fix Table border style issue when `title` configured. [#36384](https://github.com/ant-design/ant-design/pull/36384) [@Unuuuuu](https://github.com/Unuuuuu)
+
 ## 4.21.5

 `2022-07-03`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,22 @@ timeline: true

 ---

+## 4.21.6
+
+`2022-07-11`
+
+- 🐞 修复 Skeleton 在 Safari 下开启 active 时圆角丢失的问题。[#36445](https://github.com/ant-design/ant-design/pull/36445)
+- 🐞 修复 Breadcrumb 作为 List 最后一个元素时，分割线丢失的问题。[#36448](https://github.com/ant-design/ant-design/pull/36448) [@LeonKattendick](https://github.com/LeonKattendick)
+- 🐞 修复 Upload 移除文件时状态色会变化的问题。[#36439](https://github.com/ant-design/ant-design/pull/36439)
+- 🐞 修复 DatePicker 配置 `status` 时的样式问题。[#35685](https://github.com/ant-design/ant-design/pull/35685) [@simplejason](https://github.com/simplejason)
+- Table
+  - 🐞 修复 Table 横向滚动的阴影样式问题。[#36420](https://github.com/ant-design/ant-design/pull/36420) [@shunyue1320](https://github.com/shunyue1320)
+  - 🐞 修复 Table 鼠标悬浮时的性能问题。[#36383](https://github.com/ant-design/ant-design/pull/36383)
+- 💄 微调 Modal 标题上关闭按钮尺寸。[#36309](https://github.com/ant-design/ant-design/pull/36309) [@cw1997](https://github.com/cw1997)
+- 🐞 修复 Form.ErrorList 在校验状态很快的时候视觉抖动问题。[#36358](https://github.com/ant-design/ant-design/pull/36358)
+- 💄 修复 Radio 聚焦时的阴影样式在非白底背景下的问题。[#36335](https://github.com/ant-design/ant-design/pull/36335)
+- 🐞 修复 Table 配置有 `title` 时的圆角样式。[#36384](https://github.com/ant-design/ant-design/pull/36384) [@Unuuuuu](https://github.com/Unuuuuu)
+
 ## 4.21.5

 `2022-07-03`
--- a/components/breadcrumb/style/index.tsx
+++ b/components/breadcrumb/style/index.tsx
@ -52,7 +52,7 @@ const genBreadcrumbStyle: GenerateStyle<BreadcrumbToken, CSSObject> = token => {
        },
      },

-      [`li:last-child ${componentCls}-separator`]: {
+      [`li:last-child > ${componentCls}-separator`]: {
        display: 'none',
      },

--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -50,6 +50,14 @@ When data is in the form of dates, such as schedules, timetables, prices calenda

 ## FAQ

- # [How to use Calendar with customize date library](/docs/react/use-custom-date-library#Calendar)
- [How to use Calendar with customize date library like dayjs](/docs/react/replace-moment#Calendar)
- [How to set locale for date-related components](/components/date-picker/#Localization)
+### How to use Calendar with customize date library?
+
+See [Use custom date library](/docs/react/use-custom-date-library#Calendar)
+
+### How to set locale for date-related components?
+
+See [How to set locale for date-related components](/components/date-picker/#Localization)
+
+### Date-related components locale is not working?
+
+See FAQ [Date-related-components-locale-is-not-working?](/docs/react/faq#Date-related-components-locale-is-not-working?)
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -51,6 +51,14 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg

 ## FAQ

- # [如何在 Calendar 中使用自定义日期库](/docs/react/use-custom-date-library#Calendar)
- [如何在 Calendar 中使用自定义日期库（如 dayjs ）](/docs/react/replace-moment#Calendar)
- [如何给日期类组件配置国际化](/components/date-picker/#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)
+### 如何在 Calendar 中使用自定义日期库
+
+参考 [使用自定义日期库](/docs/react/use-custom-date-library#Calendar)。
+
+### 如何给日期类组件配置国际化？
+
+参考 [如何给日期类组件配置国际化](/components/date-picker/#%E5%9B%BD%E9%99%85%E5%8C%96%E9%85%8D%E7%BD%AE)。
+
+### 为什么时间类组件的国际化 locale 设置不生效？
+
+参考 FAQ [为什么时间类组件的国际化 locale 设置不生效？](/docs/react/faq#为什么时间类组件的国际化-locale-设置不生效？)。
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -73,15 +73,9 @@ ConfigProvider.config({

 See [<Adding new language>](/docs/react/i18n#Adding-newplanguage).

-#### Does the locale problem still exist in DatePicker even if ConfigProvider `locale` is used?
+#### Date-related components locale is not working?

-Please make sure you set dayjs locale or that you don't have two different versions of dayjs.
-
-```js
-import 'dayjs/locale/zh-cn';
-
-dayjs.locale('zh-cn');
-```
+See FAQ [Date-related-components-locale-is-not-working?](/docs/react/faq#Date-related-components-locale-is-not-working?)

 #### Modal throw error when setting `getPopupContainer`?

--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -74,15 +74,9 @@ ConfigProvider.config({

 参考[《增加语言包》](/docs/react/i18n#%E5%A2%9E%E5%8A%A0%E8%AF%AD%E8%A8%80%E5%8C%85)。

-#### 为什么我使用了 ConfigProvider `locale`，时间类组件的国际化还有问题？
+#### 为什么时间类组件的国际化 locale 设置不生效？

-请检查是否正确设置了 dayjs 语言包，或者是否有两个版本的 dayjs 共存。
-
-```js
-import 'dayjs/locale/zh-cn';
-
-dayjs.locale('zh-cn');
-```
+参考 FAQ [为什么时间类组件的国际化 locale 设置不生效？](/docs/react/faq#为什么时间类组件的国际化-locale-设置不生效？)。

 #### 配置 `getPopupContainer` 导致 Modal 报错？

--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -187,6 +187,10 @@ Please refer [replace dayjs](/docs/react/use-custom-date-library#DatePicker)

 DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](/components/config-provider) prop instead.

+#### Date-related components locale is not working?
+
+See FAQ [Date-related-components-locale-is-not-working?](/docs/react/faq#Date-related-components-locale-is-not-working?)
+
 ### How to modify start day of week?

 Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update dayjs `locale` config:
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -184,9 +184,9 @@ import locale from 'antd/es/locale/zh_CN';

 请参考[《替换 Day.js》](/docs/react/use-custom-date-library#DatePicker)

-### 为何全局修改 dayjs.locale 不生效？
+### 为什么时间类组件的国际化 locale 设置不生效？

-v4 中，DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `locale` 属性来单独设置，也可以通过 [ConfigProvider `locale`](/components/config-provider) 属性来配置。
+参考 FAQ [为什么时间类组件的国际化 locale 设置不生效？](/docs/react/faq#为什么时间类组件的国际化-locale-设置不生效？)。

 ### 如何修改周的起始日？

--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
@ -792,6 +792,10 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
            }),
          ),
        },
+
+        [`${componentCls}-active-bar`]: {
+          background: token.colorError,
+        },
      },

      '&-status-warning&': {
@ -809,6 +813,10 @@ const genPickerStatusStyle: GenerateStyle<PickerToken> = token => {
            }),
          ),
        },
+
+        [`${componentCls}-active-bar`]: {
+          background: token.colorWarning,
+        },
      },
    },
  };
--- a/components/form/demo/useWatch.md
+++ b/components/form/demo/useWatch.md
@ -8,7 +8,7 @@ title:

 ## zh-CN

-`useWatch` 允许你监听字段变化，同时仅当改字段变化时重新渲染。API 文档请[查阅此处](#Form.useWatch)。
+`useWatch` 允许你监听字段变化，同时仅当该字段变化时重新渲染。API 文档请[查阅此处](#Form.useWatch)。

 ## en-US

--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -20,6 +20,7 @@ High performance Form component with data scope management. Including data colle
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true |  |
+| disabled | Set form component disable, only available for antd components | boolean | false |
 | component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form |  |
 | fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - |  |
 | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - |  |
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -21,6 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true |  |
+| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false |
 | component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form |  |
 | fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - |  |
 | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#FormInstance) | - |  |
@ -86,7 +87,7 @@ const validateMessages = {
 | initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
 | label | `label` 标签的文本 | ReactNode | - |  |
 | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` |  |
-| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
+| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
 | messageVariables | 默认验证字段的信息 | Record&lt;string, string> | - | 4.7.0 |
 | name | 字段名，支持数组 | [NamePath](#NamePath) | - |  |
 | normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - |  |
--- a/components/skeleton/Image.tsx
+++ b/components/skeleton/Image.tsx
@ -2,21 +2,27 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { SkeletonElementProps } from './Element';
-
 import useStyle from './style';

-export interface SkeletonImageProps
-  extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {}
+export interface SkeletonImageProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {}

 const path =
  'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';

 const SkeletonImage = (props: SkeletonImageProps) => {
-  const { prefixCls: customizePrefixCls, className, style } = props;
+  const { prefixCls: customizePrefixCls, className, style, active } = props;
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
  const [wrapSSR, hashId] = useStyle(prefixCls);
-  const cls = classNames(prefixCls, `${prefixCls}-element`, className, hashId);
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-element`,
+    {
+      [`${prefixCls}-active`]: active,
+    },
+    className,
+    hashId,
+  );

  return wrapSSR(
    <div className={cls}>
--- a/components/skeleton/Node.tsx
+++ b/components/skeleton/Node.tsx
@ -0,0 +1,37 @@
+import DotChartOutlined from '@ant-design/icons/DotChartOutlined';
+import classNames from 'classnames';
+import * as React from 'react';
+import { ConfigContext } from '../config-provider';
+import type { SkeletonElementProps } from './Element';
+
+export interface SkeletonNodeProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
+  fullSize?: boolean;
+  children?: React.ReactNode;
+}
+
+const SkeletonNode: React.FC<SkeletonNodeProps> = props => {
+  const { prefixCls: customizePrefixCls, className, style, active } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+
+  const cls = classNames(
+    prefixCls,
+    `${prefixCls}-element`,
+    {
+      [`${prefixCls}-active`]: active,
+    },
+    className,
+  );
+
+  const content = props.children ?? <DotChartOutlined />;
+
+  return (
+    <div className={cls}>
+      <div className={classNames(`${prefixCls}-image`, className)} style={style}>
+        {content}
+      </div>
+    </div>
+  );
+};
+
+export default SkeletonNode;
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@ -4,6 +4,7 @@ import { ConfigContext } from '../config-provider';
 import type { AvatarProps } from './Avatar';
 import SkeletonAvatar from './Avatar';
 import SkeletonButton from './Button';
+import SkeletonNode from './Node';
 import Element from './Element';
 import SkeletonImage from './Image';
 import SkeletonInput from './Input';
@ -181,5 +182,6 @@ Skeleton.Button = SkeletonButton;
 Skeleton.Avatar = SkeletonAvatar;
 Skeleton.Input = SkeletonInput;
 Skeleton.Image = SkeletonImage;
+Skeleton.Node = SkeletonNode;

 export default Skeleton;
--- a/components/skeleton/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/skeleton/tests/snapshots/demo-extend.test.ts.snap
@ -162,6 +162,13 @@ Array [
  </div>,
  <br />,
  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
      <div
        class="ant-skeleton ant-skeleton-element"
      >
@ -179,6 +186,40 @@ Array [
            />
          </svg>
        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-skeleton ant-skeleton-element"
+      >
+        <div
+          class="ant-skeleton-image"
+        >
+          <span
+            aria-label="dot-chart"
+            class="anticon anticon-dot-chart"
+            role="img"
+            style="font-size:40px;color:#bfbfbf"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="dot-chart"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal"
--- a/components/skeleton/tests/snapshots/demo.test.js.snap
+++ b/components/skeleton/tests/snapshots/demo.test.js.snap
@ -162,6 +162,13 @@ Array [
  </div>,
  <br />,
  <br />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
      <div
        class="ant-skeleton ant-skeleton-element"
      >
@ -179,6 +186,40 @@ Array [
            />
          </svg>
        </div>
+      </div>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <div
+        class="ant-skeleton ant-skeleton-element"
+      >
+        <div
+          class="ant-skeleton-image"
+        >
+          <span
+            aria-label="dot-chart"
+            class="anticon anticon-dot-chart"
+            role="img"
+            style="font-size:40px;color:#bfbfbf"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="dot-chart"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </div>
+      </div>
+    </div>
  </div>,
  <div
    class="ant-divider ant-divider-horizontal"
--- a/components/skeleton/tests/snapshots/index.test.js.snap
+++ b/components/skeleton/tests/snapshots/index.test.js.snap
@ -320,6 +320,50 @@ exports[`Skeleton button element size 3`] = `
 </div>
 `;

+exports[`Skeleton custom node element should render normal 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-element"
+>
+  <div
+    class="ant-skeleton-image"
+  >
+    <span
+      aria-label="dot-chart"
+      class="anticon anticon-dot-chart"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="dot-chart"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
+        />
+      </svg>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`Skeleton custom node element should render normal 2`] = `
+<div
+  class="ant-skeleton ant-skeleton-element"
+>
+  <div
+    class="ant-skeleton-image"
+  >
+    <span>
+      Custom Content Node
+    </span>
+  </div>
+</div>
+`;
+
 exports[`Skeleton image element should render normal 1`] = `
 <div
  class="ant-skeleton ant-skeleton-element"
--- a/components/skeleton/tests/index.test.js
+++ b/components/skeleton/tests/index.test.js
@ -15,6 +15,7 @@ describe('Skeleton', () => {
  const genSkeletonAvatar = props => mount(<Skeleton.Avatar {...props} />);
  const genSkeletonInput = props => mount(<Skeleton.Input {...props} />);
  const genSkeletonImage = props => mount(<Skeleton.Image {...props} />);
+  const genSkeletonNode = props => mount(<Skeleton.Node {...props} />);

  mountTest(Skeleton);
  rtlTest(Skeleton);
@ -163,6 +164,15 @@ describe('Skeleton', () => {
    });
  });

+  describe('custom node element', () => {
+    it('should render normal', () => {
+      const wrapper = genSkeletonNode();
+      expect(wrapper.render()).toMatchSnapshot();
+      const wrapperNode = genSkeletonNode({ children: <span>Custom Content Node</span> });
+      expect(wrapperNode.render()).toMatchSnapshot();
+    });
+  });
+
  it('should support style', () => {
    const wrapper = genSkeleton({ style: { background: 'blue' } });
    expect(wrapper.render()).toMatchSnapshot();
--- a/components/skeleton/demo/element.md
+++ b/components/skeleton/demo/element.md
@ -1,21 +1,22 @@
 ---
 order: 2.1
 title:
-  zh-CN: 按钮/头像/输入框/图像
-  en-US: Button/Avatar/Input/Image
+  zh-CN: 按钮/头像/输入框/图像/自定义节点
+  en-US: Button/Avatar/Input/Image/Node
 ---

 ## zh-CN

-骨架按钮、头像、输入框和图像。
+骨架按钮、头像、输入框、图像和自定义节点。

 ## en-US

-Skeleton Button, Avatar, Input and Image.
+Skeleton Button, Avatar, Input, Image and Node.

 ```tsx
 import type { RadioChangeEvent } from 'antd';
 import { Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';
+import { DotChartOutlined } from '@ant-design/icons';
 import React, { useState } from 'react';

 type SizeType = 'default' | 'small' | 'large';
@ -64,7 +65,12 @@ const App: React.FC = () => {
      <Skeleton.Input active={active} size={size} block={block} />
      <br />
      <br />
-      <Skeleton.Image />
+      <Space>
+        <Skeleton.Image active={active} />
+        <Skeleton.Node active={active}>
+          <DotChartOutlined style={{ fontSize: 40, color: '#bfbfbf' }} />
+        </Skeleton.Node>
+      </Space>
      <Divider />
      <Form layout="inline" style={{ margin: '16px 0' }}>
        <Form.Item label="Active">
--- a/components/skeleton/style/index.tsx
+++ b/components/skeleton/style/index.tsx
@ -46,6 +46,10 @@ const genSkeletonElementAvatarSize = (size: number): CSSObject => ({

 const genSkeletonColor = (token: SkeletonToken): CSSObject => ({
  position: 'relative',
+  // fix https://github.com/ant-design/ant-design/issues/36444
+  // https://monshin.github.io/202109/css/safari-border-radius-overflow-hidden/
+  /* stylelint-disable-next-line property-no-vendor-prefix,value-no-vendor-prefix */
+  zIndex: 0,
  overflow: 'hidden',
  background: 'transparent',
  '&::after': {
@ -320,23 +324,14 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
    },
    // With active animation
    [`${componentCls}${componentCls}-active`]: {
-      [`${componentCls}-content`]: {
-        [`${skeletonTitleCls}, ${skeletonParagraphCls} > li`]: {
-          ...genSkeletonColor(token),
-        },
-      },
-      [`${skeletonAvatarCls}`]: {
-        ...genSkeletonColor(token),
-      },
-
-      [`${skeletonButtonCls}`]: {
-        ...genSkeletonColor(token),
-      },
-
-      [`${skeletonInputCls}`]: {
-        ...genSkeletonColor(token),
-      },
-      [`${skeletonImageCls}`]: {
+      [`
+        ${skeletonTitleCls},
+        ${skeletonParagraphCls} > li,
+        ${skeletonAvatarCls},
+        ${skeletonButtonCls},
+        ${skeletonInputCls},
+        ${skeletonImageCls}
+      `]: {
        ...genSkeletonColor(token),
      },
    },
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@ -109,7 +109,7 @@ Basic text writing, including headings, body text, lists, and more.
 | maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
 | tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
 | onStart | Called when enter editable state | function | - |  |
-| onChange | Called when input at textarea | function(event) | - |  |
+| onChange | Called when input at textarea | function(value: string) | - |  |
 | onCancel | Called when type ESC to exit editable state | function | - |  |
 | onEnd | Called when type ENTER to exit editable state | function | - | 4.14.0 |
 | triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] |  |
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@ -110,7 +110,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 | maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
 | tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
 | onCancel | 按 ESC 退出编辑状态时触发 | function | - |  |
-| onChange | 文本域编辑时触发 | function(event) | - |  |
+| onChange | 文本域编辑时触发 | function(value: string) | - |  |
 | onEnd | 按 ENTER 结束编辑状态时触发 | function | - | 4.14.0 |
 | onStart | 进入编辑中状态时触发 | function | - |  |
 | triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array&lt;`icon`\|`text`> | \[`icon`] |  |
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@ -264,15 +264,8 @@ const InternalUpload: React.ForwardRefRenderFunction<unknown, UploadProps> = (pr
      const removedFileList = removeFileItem(file, mergedFileList);

      if (removedFileList) {
-        currentFile = { ...file, status: 'removed' };
-        mergedFileList?.forEach(item => {
-          const matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
-          if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
-            item.status = 'removed';
-          }
-        });
+        currentFile = { ...file };
        upload.current?.abort(currentFile);
-
        onInternalChange(currentFile, removedFileList);
      }
    });
--- a/components/upload/tests/snapshots/uploadlist.test.js.snap
+++ b/components/upload/tests/snapshots/uploadlist.test.js.snap
@ -110,7 +110,7 @@ exports[`Upload List itemRender 1`] = `
      class="custom-item-render"
    >
      <span>
-        uid:-1 name: xxx.png status: removed url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png  1/2
+        uid:-1 name: xxx.png status: done url: https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png  1/2
      </span>
      <span
        class="custom-item-render-action-remove"
@ -136,7 +136,7 @@ exports[`Upload List itemRender 1`] = `
      class="custom-item-render"
    >
      <span>
-        uid:-2 name: yyy.png status: removed url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png  2/2
+        uid:-2 name: yyy.png status: done url: https://zos.alipayobjects.com/rmsportal/IQKRngzUuFzJzGzRJXUs.png  2/2
      </span>
      <span
        class="custom-item-render-action-remove"
--- a/components/upload/tests/upload.test.js
+++ b/components/upload/tests/upload.test.js
@ -505,6 +505,9 @@ describe('Upload', () => {
      <Upload fileList={[file]} onChange={onChange} onRemove={onRemove} />,
    );
    fireEvent.click(container.querySelector('div.ant-upload-list-item .anticon-delete'));
+    expect(container.querySelector('.ant-upload-list-item').className).toContain(
+      'ant-upload-list-item-uploading',
+    );

    // uploadStart is a batch work which we need wait for react act
    await act(async () => {
@ -517,8 +520,13 @@ describe('Upload', () => {
      await removePromise(true);
    });

+    // https://github.com/ant-design/ant-design/issues/36286
+    expect(container.querySelector('.ant-upload-list-item').className).toContain(
+      'ant-upload-list-item-uploading',
+    );
+
    expect(onChange).toHaveBeenCalled();
-    expect(file.status).toBe('removed');
+    expect(file.status).toBe('uploading');
  });

  it('should not stop download when return use onDownload', done => {
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@ -57,7 +57,7 @@ Extends File with additional props.
 | crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 |
 | name | File name | string | - | - |
 | percent | Upload progress percent | number | - | - |
-| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` | - | - |
 | thumbUrl | Thumb image url | string | - | - |
 | uid | unique id. Will auto generate when not provided | string | - | - |
 | url | Download url | string | - | - |
@ -82,7 +82,7 @@ When uploading state change, it returns:
   {
      uid: 'uid',      // unique identifier, negative is recommend, to prevent interference with internal generated id
      name: 'xx.png',   // file name
-      status: 'done', // options：uploading, done, error, removed. Intercepted file by beforeUpload don't have status field.
+      status: 'done', // options：uploading, done, error. Intercepted file by beforeUpload don't have status field.
      response: '{"status": "success"}', // response from server
      linkProps: '{"download": "image"}', // additional html props of file link
      xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@ -58,7 +58,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 | crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 |
 | name | 文件名 | string | - | - |
 | percent | 上传进度 | number | - | - |
-| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - |
+| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` | - | - |
 | thumbUrl | 缩略图地址 | string | - | - |
 | uid | 唯一标识符，不设置时会自动生成 | string | - | - |
 | url | 下载地址 | string | - | - |
@ -83,7 +83,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
   {
      uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
      name: 'xx.png'   // 文件名
-      status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性
+      status: 'done', // 状态有：uploading done error，beforeUpload 拦截的文件没有 status 属性
      response: '{"status": "success"}', // 服务端响应内容
      linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
   }
--- a/components/upload/interface.tsx
+++ b/components/upload/interface.tsx
@ -10,7 +10,7 @@ export interface RcFile extends OriRcFile {
  readonly lastModifiedDate: Date;
 }

-export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed';
+export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading';

 export interface HttpRequestHeader {
  [key: string]: string;
--- a/components/version/token.tsx
+++ b/components/version/token.tsx
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@ -95,6 +95,24 @@ Yes, you can [import `antd` with script tag](https://ant.design/docs/react/intro

 If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)

+## Date-related components locale is not working?
+
+Please check whether import dayjs locale correctly.
+
+```jsx
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+```
+
+Please check whether there is two version of dayjs installed.
+
+```jsx
+npm ls dayjs
+```
+
+If you are using a mismatched version of dayjs with [antd's dayjs](https://github.com/ant-design/ant-design/blob/7dfc80504a36cf8952cd732a1d0c137a16d56fd4/package.json#L125) in your project. That would be a problem cause locale not working.
+
 ## How do I fix dynamic styles while using a Content Security Policy (CSP)?

 You can configure `nonce` by [ConfigProvider](/components/config-provider/#Content-Security-Policy).
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@ -115,6 +115,24 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更，

 如果日期组件的国际化仍未生效，请配置 `dayjs.locale('zh-cn')` 并**检查你本地的 `dayjs` 版本和 `antd` 依赖的 `dayjs` 版本是否一致**。

+## 为什么时间类组件的国际化 locale 设置不生效？
+
+请检查是否正确设置了 dayjs 语言包。
+
+```js
+import 'dayjs/locale/zh-cn';
+
+dayjs.locale('zh-cn');
+```
+
+如果还有问题，请检查是否有两个版本的 dayjs 共存？
+
+```jsx
+npm ls dayjs
+```
+
+一般来说，如果项目中依赖的 dayjs 版本和 [antd 依赖的 dayjs 版本](https://github.com/ant-design/ant-design/blob/7dfc80504a36cf8952cd732a1d0c137a16d56fd4/package.json#L125) 无法兼容（semver 无法匹配，比如项目中的 dayjs 版本写死且较低），则会导致使用两个不同版本的 dayjs 实例，这样也会导致国际化失效。
+
 ## 开启了 Content Security Policy (CSP) 如何处理动态样式？

 你可以通过 [ConfigProvider](/components/config-provider/#Content-Security-Policy) 来配置 `nonce` 属性。
--- a/docs/spec/research-navigation.zh-CN.md
+++ b/docs/spec/research-navigation.zh-CN.md
@ -226,7 +226,7 @@ title: 导航

 <img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*QcmiTLXUH1oAAAAAAAAAAABkARQnAQ">

-反映当前页面在网站结构中的位置，在少于三个层级是无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。
+反映当前页面在网站结构中的位置，在少于三个层级时无需展示，此时的全局导航能直接呈现位置。用户可通过面包屑返回上级页面。

 #### 返回按钮

--- a/package.json
+++ b/package.json
@ -129,7 +129,7 @@
    "rc-image": "~5.7.0",
    "rc-input": "~0.0.1-alpha.5",
    "rc-input-number": "~7.3.0",
-    "rc-mentions": "~1.8.0",
+    "rc-mentions": "~1.9.0",
    "rc-menu": "~9.6.0",
    "rc-motion": "^2.5.1",
    "rc-notification": "~5.0.0-alpha.9",