chore: auto merge branches (#40244)

chore: feature merge master
2024-12-02 03:59:01 +08:00 · 2023-01-16 03:37:15 +00:00 · 2023-01-16 03:37:15 +00:00 · ede5121d5f
commit ede5121d5f
parent a56bd50f36 28d1157d6b
37 changed files with 139 additions and 80 deletions
--- a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
@ -115,7 +115,7 @@ export default () => {
  return (
    <div css={[styles.affixTabs, fixedId && styles.affixTabsFixed]} ref={containerRef}>
      <Tabs
-        activeKey={fixedId || undefined}
+        activeKey={fixedId}
        onChange={(key) => {
          scrollToId(key);
        }}
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,23 @@ timeline: true

 ---

+## 5.1.5
+
+`2023-1-15`
+
+- 🐞 Fix Checkbox that label not aligned with checkbox. [#40208](https://github.com/ant-design/ant-design/pull/40208)
+- 🐞 Fix Button wave effect sometime makes layout shaking. [#40192](https://github.com/ant-design/ant-design/pull/40192)
+- 🐞 Fix Select crash problem. [#40158](https://github.com/ant-design/ant-design/pull/40158) [@helloqian12138](https://github.com/helloqian12138)
+- 🐞 Fix Timeline custom color displaying wrong classname &amp; alignment overflow. [#39394](https://github.com/ant-design/ant-design/pull/39394) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Breadcrumb last item color. [#40119](https://github.com/ant-design/ant-design/pull/40119) [@messaooudi](https://github.com/messaooudi)
+- 💄 Fix Table sticky table header shadow style. [#40171](https://github.com/ant-design/ant-design/pull/40171) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 Fix Segmented item hover radius style. [#40175](https://github.com/ant-design/ant-design/pull/40175) [#40179](https://github.com/ant-design/ant-design/pull/40179)
+- TypeScript
+  - 🤖 Fix Tabs `onEdit` Callback parameter type problem. [#39926](https://github.com/ant-design/ant-design/pull/39926) [@RSS1102](https://github.com/RSS1102)
+- RTL
+  - 💄 Fix DatePicker's next &amp; prev icons in RTL mode. [#40238](https://github.com/ant-design/ant-design/pull/40238) [@ds1371dani](https://github.com/ds1371dani)
+  - 💄 Fix Badge RTL style when wrap a block element. [#40125](https://github.com/ant-design/ant-design/pull/40125)
+
 ## 5.1.4

 `2023-1-9`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,23 @@ timeline: true

 ---

+## 5.1.5
+
+`2023-1-15`
+
+- 🐞 修复 Checkbox 组件 label 不对齐的问题。 [#40208](https://github.com/ant-design/ant-design/pull/40208)
+- 🐞 修复 Button 水波纹效果有时会使得布局抖动的问题。[#40192](https://github.com/ant-design/ant-design/pull/40192)
+- 🐞 修复 Select 组件会卡住的问题。[#40158](https://github.com/ant-design/ant-design/pull/40158) [@helloqian12138](https://github.com/helloqian12138)
+- 🐞 修复 Timeline 组件自定义颜色显示错误类名和对齐溢出的问题。[#39394](https://github.com/ant-design/ant-design/pull/39394) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Breadcrumb 最后一项颜色。[#40119](https://github.com/ant-design/ant-design/pull/40119) [@messaooudi](https://github.com/messaooudi)
+- 💄 修复 Table 固定表头阴影样式错误。[#40171](https://github.com/ant-design/ant-design/pull/40171) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 修复 Segmented hover 时圆角和选中圆角不一致的问题。[#40175](https://github.com/ant-design/ant-design/pull/40175) [#40179](https://github.com/ant-design/ant-design/pull/40179)
+- TypeScript
+  - 🤖 修复 Tabs 组件 `onEdit` 类型问题。[#39926](https://github.com/ant-design/ant-design/pull/39926) [@RSS1102](https://github.com/RSS1102)
+- RTL
+  - 💄 优化 DatePicker 在 RTL 模式下 next 和 prev 图标。[#40238](https://github.com/ant-design/ant-design/pull/40238) [@ds1371dani](https://github.com/ds1371dani)
+  - 💄 修复 Badge 作用在块级元素上时 RTL 样式不生效的问题。[#40125](https://github.com/ant-design/ant-design/pull/40125)
+
 ## 5.1.4

 `2023-1-9`
--- a/components/tests/blog.test.ts
+++ b/components/tests/blog.test.ts
@ -0,0 +1,27 @@
+const fs = require('fs');
+
+const path = require('path');
+
+const blogList = [
+  'check-conduct',
+  'css-in-js',
+  'getContainer',
+  'modal-hook-order',
+  'render-times',
+  'testing-migrate',
+  'to-be-collaborator',
+].map((blogName) => path.join(__dirname, `../../docs/blog/${blogName}.en-US.md`));
+
+describe('blog', () => {
+  it('should not include Chinese in en-US blog', () => {
+    blogList.forEach((blog) => {
+      fs.readFile(blog, (err: NodeJS.ErrnoException | null, data: Buffer) => {
+        if (err) {
+          return;
+        }
+        const includeChinese = /[\u4E00-\u9FA5]/.test(data.toString());
+        expect(includeChinese).toBe(false);
+      });
+    });
+  });
+});
--- a/components/_util/motion.ts
+++ b/components/_util/motion.ts
@ -29,7 +29,7 @@ const SelectPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as

 export type SelectCommonPlacement = typeof SelectPlacements[number];

-const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
+const getTransitionDirection = (placement?: SelectCommonPlacement) => {
  if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
    return `slide-down`;
  }
--- a/components/_util/styleChecker.ts
+++ b/components/_util/styleChecker.ts
@ -5,7 +5,7 @@ export const canUseDocElement = () => canUseDom() && window.document.documentEle

 export { isStyleSupport };

-let flexGapSupported: boolean | undefined;
+let flexGapSupported: boolean;
 export const detectFlexGapSupported = () => {
  if (!canUseDocElement()) {
    return false;
--- a/components/affix/utils.ts
+++ b/components/affix/utils.ts
@ -56,7 +56,7 @@ export function addObserveTarget<T>(target: HTMLElement | Window | null, affix?:
    return;
  }

-  let entity: ObserverEntity | undefined = observerEntities.find((item) => item.target === target);
+  let entity = observerEntities.find((item) => item.target === target);

  if (entity) {
    entity.affixList.push(affix);
--- a/components/anchor/demo/targetOffset.tsx
+++ b/components/anchor/demo/targetOffset.tsx
@ -3,7 +3,7 @@ import { Anchor, Row, Col } from 'antd';

 const App: React.FC = () => {
  const topRef = React.useRef<HTMLDivElement>(null);
-  const [targetOffset, setTargetOffset] = useState<number | undefined>(undefined);
+  const [targetOffset, setTargetOffset] = useState<number>();

  useEffect(() => {
    setTargetOffset(topRef.current?.clientHeight);
--- a/components/calendar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo-extend.test.ts.snap
@ -1584,7 +1584,7 @@ exports[`renders ./components/calendar/demo/basic.tsx extend context correctly 1

 exports[`renders ./components/calendar/demo/card.tsx extend context correctly 1`] = `
 <div
-  class="site-calendar-demo-card"
+  style="width:300px;border:1px solid #f0f0f0;border-radius:8px"
 >
  <div
    class="ant-picker-calendar ant-picker-calendar-mini"
@ -3170,7 +3170,7 @@ exports[`renders ./components/calendar/demo/card.tsx extend context correctly 1`

 exports[`renders ./components/calendar/demo/customize-header.tsx extend context correctly 1`] = `
 <div
-  class="site-calendar-customize-header-wrapper"
+  style="width:300px;border:1px solid #f0f0f0;border-radius:8px"
 >
  <div
    class="ant-picker-calendar ant-picker-calendar-mini"
--- a/components/calendar/tests/snapshots/demo.test.ts.snap
+++ b/components/calendar/tests/snapshots/demo.test.ts.snap
@ -944,7 +944,7 @@ exports[`renders ./components/calendar/demo/basic.tsx correctly 1`] = `

 exports[`renders ./components/calendar/demo/card.tsx correctly 1`] = `
 <div
-  class="site-calendar-demo-card"
+  style="width:300px;border:1px solid #f0f0f0;border-radius:8px"
 >
  <div
    class="ant-picker-calendar ant-picker-calendar-mini"
@ -1890,7 +1890,7 @@ exports[`renders ./components/calendar/demo/card.tsx correctly 1`] = `

 exports[`renders ./components/calendar/demo/customize-header.tsx correctly 1`] = `
 <div
-  class="site-calendar-customize-header-wrapper"
+  style="width:300px;border:1px solid #f0f0f0;border-radius:8px"
 >
  <div
    class="ant-picker-calendar ant-picker-calendar-mini"
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@ -5,17 +5,3 @@
 ## en-US

 Nested inside a container element for rendering in limited space.
-
-```css
-.site-calendar-demo-card {
-  width: 300px;
-  border: 1px solid #f0f0f0;
-  border-radius: 8px;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-calendar-demo-card {
-    border: 1px solid #303030;
-  }
-</style>
--- a/components/calendar/demo/card.tsx
+++ b/components/calendar/demo/card.tsx
@ -1,15 +1,23 @@
 import React from 'react';
-import { Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
+import { Calendar, theme } from 'antd';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';

 const App: React.FC = () => {
+  const { token } = theme.useToken();
+
  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

+  const wrapperStyle = {
+    width: 300,
+    border: `1px solid ${token.colorBorderSecondary}`,
+    borderRadius: token.borderRadiusLG,
+  };
+
  return (
-    <div className="site-calendar-demo-card">
+    <div style={wrapperStyle}>
      <Calendar fullscreen={false} onPanelChange={onPanelChange} />
    </div>
  );
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@ -5,17 +5,3 @@
 ## en-US

 Customize Calendar header content.
-
-```css
-.site-calendar-customize-header-wrapper {
-  width: 300px;
-  border: 1px solid #f0f0f0;
-  border-radius: 2px;
-}
-```
-
-<style>
-  [data-theme="dark"] .site-calendar-customize-header-wrapper {
-    border: 1px solid #303030;
-  }
-</style>
--- a/components/calendar/demo/customize-header.tsx
+++ b/components/calendar/demo/customize-header.tsx
@ -1,20 +1,28 @@
 import React from 'react';
-import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
-import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
+import type { Dayjs } from 'dayjs';
 import dayLocaleData from 'dayjs/plugin/localeData';
+import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';

 dayjs.extend(dayLocaleData);

 const App: React.FC = () => {
+  const { token } = theme.useToken();
+
  const onPanelChange = (value: Dayjs, mode: CalendarMode) => {
    console.log(value.format('YYYY-MM-DD'), mode);
  };

+  const wrapperStyle = {
+    width: 300,
+    border: `1px solid ${token.colorBorderSecondary}`,
+    borderRadius: token.borderRadiusLG,
+  };
+
  return (
-    <div className="site-calendar-customize-header-wrapper">
+    <div style={wrapperStyle}>
      <Calendar
        fullscreen={false}
        headerRender={({ value, type, onChange, onTypeChange }) => {
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -45,7 +45,7 @@ export type FilledFieldNamesType = Required<FieldNamesType>;

 const { SHOW_CHILD, SHOW_PARENT } = RcCascader;

-function highlightKeyword(str: string, lowerKeyword: string, prefixCls: string | undefined) {
+function highlightKeyword(str: string, lowerKeyword: string, prefixCls?: string) {
  const cells = str
    .toLowerCase()
    .split(lowerKeyword)
--- a/components/checkbox/style/index.ts
+++ b/components/checkbox/style/index.ts
@ -44,7 +44,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {

        display: 'inline-flex',
        alignItems: 'baseline',
-        lineHeight: 'unset',
        cursor: 'pointer',

        // Fix checkbox & radio in flex align #30260
--- a/components/collapse/tests/index.test.tsx
+++ b/components/collapse/tests/index.test.tsx
@ -122,9 +122,9 @@ describe('Collapse', () => {
      .spyOn(window, 'requestAnimationFrame')
      .mockImplementation((cb) => setTimeout(cb, 16.66));

-    let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key | undefined>>;
-    const Test = () => {
-      const [activeKey, setActiveKey] = React.useState();
+    let setActiveKeyOuter: React.Dispatch<React.SetStateAction<React.Key>>;
+    const Test: React.FC = () => {
+      const [activeKey, setActiveKey] = React.useState<React.Key>();
      setActiveKeyOuter = setActiveKey;
      return (
        <div hidden>
--- a/components/config-provider/DisabledContext.tsx
+++ b/components/config-provider/DisabledContext.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';

-export type DisabledType = true | false | undefined;
+export type DisabledType = boolean | undefined;

 const DisabledContext = React.createContext<DisabledType>(false);

--- a/components/config-provider/cssVariables.ts
+++ b/components/config-provider/cssVariables.ts
@ -12,10 +12,7 @@ const dynamicStyleMark = `-ant-${Date.now()}-${Math.random()}`;
 export function getStyle(globalPrefixCls: string, theme: Theme) {
  const variables: Record<string, string> = {};

-  const formatColor = (
-    color: TinyColor,
-    updater?: (cloneColor: TinyColor) => TinyColor | undefined,
-  ) => {
+  const formatColor = (color: TinyColor, updater?: (cloneColor: TinyColor) => TinyColor) => {
    let clone = color.clone();
    clone = updater?.(clone) || clone;
    return clone.toRgbString();
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@ -352,12 +352,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {

          [`${componentCls}-prev-icon,
              ${componentCls}-super-prev-icon`]: {
-            transform: 'rotate(135deg)',
+            transform: 'rotate(45deg)',
          },

          [`${componentCls}-next-icon,
              ${componentCls}-super-next-icon`]: {
-            transform: 'rotate(-45deg)',
+            transform: 'rotate(-135deg)',
          },
        },
      },
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@ -74,7 +74,7 @@ function getRows(children: React.ReactNode, column: number) {
  let rowRestCol = column;

  childNodes.forEach((node, index) => {
-    const span: number | undefined = node.props?.span;
+    const span: number = node.props?.span;
    const mergedSpan = span || 1;

    // Additional handle last one
--- a/components/form/util.ts
+++ b/components/form/util.ts
@ -14,7 +14,9 @@ export function toArray<T>(candidate?: T | T[] | false): T[] {
 }

 export function getFieldId(namePath: InternalNamePath, formName?: string): string | undefined {
-  if (!namePath.length) return undefined;
+  if (!namePath.length) {
+    return undefined;
+  }

  const mergedId = namePath.join('_');

--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -12,7 +12,7 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAA
 ## 何时使用

 - 需要展示图片时使用。
- 加载大图时显示 loading 或加载失败时容错处理。
+- 加载显示大图或加载失败时容错处理。

 ## 代码演示

--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@ -160,7 +160,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
      prefixCls={prefixCls}
      autoComplete={input?.autoComplete}
      {...rest}
-      disabled={mergedDisabled || undefined}
+      disabled={mergedDisabled}
      onBlur={handleBlur}
      onFocus={handleFocus}
      suffix={suffixNode}
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@ -84,9 +84,9 @@ interface GlobalHolderRef {
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
  const [prefixCls, setPrefixCls] = React.useState<string>();
  const [container, setContainer] = React.useState<HTMLElement>();
-  const [maxCount, setMaxCount] = React.useState<number | undefined>();
-  const [rtl, setRTL] = React.useState<boolean | undefined>();
-  const [top, setTop] = React.useState<number | undefined>();
+  const [maxCount, setMaxCount] = React.useState<number>();
+  const [rtl, setRTL] = React.useState<boolean>();
+  const [top, setTop] = React.useState<number>();

  const [api, holder] = useInternalMessage({
    prefixCls,
--- a/components/notification/index.tsx
+++ b/components/notification/index.tsx
@ -59,10 +59,10 @@ interface GlobalHolderRef {
 const GlobalHolder = React.forwardRef<GlobalHolderRef, {}>((_, ref) => {
  const [prefixCls, setPrefixCls] = React.useState<string>();
  const [container, setContainer] = React.useState<HTMLElement>();
-  const [maxCount, setMaxCount] = React.useState<number | undefined>();
-  const [rtl, setRTL] = React.useState<boolean | undefined>();
-  const [top, setTop] = React.useState<number | undefined>();
-  const [bottom, setBottom] = React.useState<number | undefined>();
+  const [maxCount, setMaxCount] = React.useState<number>();
+  const [rtl, setRTL] = React.useState<boolean>();
+  const [top, setTop] = React.useState<number>();
+  const [bottom, setBottom] = React.useState<number>();

  const [api, holder] = useInternalNotification({
    prefixCls,
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@ -31,7 +31,7 @@ export interface SkeletonProps {
  round?: boolean;
 }

-function getComponentProps<T>(prop: T | boolean | undefined): T | {} {
+function getComponentProps<T>(prop?: T | boolean): T | {} {
  if (prop && typeof prop === 'object') {
    return prop;
  }
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@ -226,7 +226,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
  }, [visible]);

  // ======================= Submit ========================
-  const internalTriggerFilter = (keys: Key[] | undefined | null) => {
+  const internalTriggerFilter = (keys?: Key[]) => {
    const mergedKeys = keys && keys.length ? keys : null;
    if (mergedKeys === null && (!filterState || !filterState.filteredKeys)) {
      return null;
--- a/components/tabs/demo/custom-add-trigger.tsx
+++ b/components/tabs/demo/custom-add-trigger.tsx
@ -1,6 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { Button, Tabs } from 'antd';

+type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
+
 const defaultPanes = new Array(2).fill(null).map((_, index) => {
  const id = String(index + 1);
  return { label: `Tab ${id}`, children: `Content of Tab Pane ${index + 1}`, key: id };
@ -21,7 +23,7 @@ const App: React.FC = () => {
    setActiveKey(newActiveKey);
  };

-  const remove = (targetKey: string) => {
+  const remove = (targetKey: TargetKey) => {
    const targetIndex = items.findIndex((pane) => pane.key === targetKey);
    const newPanes = items.filter((pane) => pane.key !== targetKey);
    if (newPanes.length && targetKey === activeKey) {
@ -31,7 +33,7 @@ const App: React.FC = () => {
    setItems(newPanes);
  };

-  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
+  const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {
    if (action === 'add') {
      add();
    } else {
--- a/components/tabs/demo/editable-card.tsx
+++ b/components/tabs/demo/editable-card.tsx
@ -1,6 +1,8 @@
 import React, { useRef, useState } from 'react';
 import { Tabs } from 'antd';

+type TargetKey = React.MouseEvent | React.KeyboardEvent | string;
+
 const initialItems = [
  { label: 'Tab 1', children: 'Content of Tab 1', key: '1' },
  { label: 'Tab 2', children: 'Content of Tab 2', key: '2' },
@ -29,7 +31,7 @@ const App: React.FC = () => {
    setActiveKey(newActiveKey);
  };

-  const remove = (targetKey: string) => {
+  const remove = (targetKey: TargetKey) => {
    let newActiveKey = activeKey;
    let lastIndex = -1;
    items.forEach((item, i) => {
@ -49,7 +51,10 @@ const App: React.FC = () => {
    setActiveKey(newActiveKey);
  };

-  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
+  const onEdit = (
+    targetKey: React.MouseEvent | React.KeyboardEvent | string,
+    action: 'add' | 'remove',
+  ) => {
    if (action === 'add') {
      add();
    } else {
--- a/components/tree-select/demo/basic.tsx
+++ b/components/tree-select/demo/basic.tsx
@ -34,7 +34,7 @@ const treeData = [
  },
 ];
 const App: React.FC = () => {
-  const [value, setValue] = useState<string | undefined>(undefined);
+  const [value, setValue] = useState<string>();

  const onChange = (newValue: string) => {
    setValue(newValue);
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@ -85,7 +85,9 @@ function wrapperDecorations(
  let currentContent = content;

  function wrap(needed: boolean | undefined, tag: string) {
-    if (!needed) return;
+    if (!needed) {
+      return;
+    }

    currentContent = React.createElement(tag, {}, currentContent);
  }
--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@ -35,7 +35,7 @@ export interface ListItemProps {
    customIcon: React.ReactNode,
    callback: () => void,
    prefixCls: string,
-    title?: string | undefined,
+    title?: string,
  ) => React.ReactNode;
  itemRender?: ItemRender;
  onPreview: (file: UploadFile, e: React.SyntheticEvent<HTMLElement>) => void;
--- a/docs/react/contributing.en-US.md
+++ b/docs/react/contributing.en-US.md
@ -50,7 +50,6 @@ The core team is monitoring for pull requests. We will review your pull request

 1. Fork the repository and create your branch from the [correct branch](#branch-organization).
 1. Run `npm install` in the repository root.
-   > For Windows 10 development environment, if you run into error `gyp err! find vs msvs_version not set from command line or npm config`, please install [the latest Python v3](https://www.python.org/downloads/) and **Desktop development with C++** through [Visual Studio Installer](https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2019#step-3---install-the-visual-studio-installer) before running `npm install`
 1. If you've fixed a bug or added code that should be tested, add tests!
 1. Ensure the test suite passes (npm run test). Tip: `npm test -- --watch TestName` is helpful in development.
 1. Run `npm test -- -u` to update the [jest snapshots](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) and commit these changes as well (if there are any updates).
@ -79,3 +78,7 @@ After cloning antd, run `npm install` to fetch its dependencies. Then, you can r
 ## Being a collaborator

 If you are an active contributor and are willing to work with Ant Design Team in our opensource workflow, you can [apply to be a outside collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator).
+
+You can also refer to the following contribution guide to become an antd contributor:
+
+- [How to Grow as a Collaborator](/docs/blog/to-be-collaborator)
--- a/docs/react/contributing.zh-CN.md
+++ b/docs/react/contributing.zh-CN.md
@ -50,7 +50,6 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并

 1. 基于 [正确的分支](#分支管理) 做修改。
 1. 在项目根目录下运行了 `npm install`。
-   > 在 Windows 10 开发环境下，如果出现 `gyp err! find vs msvs_version not set from command line or npm config`错误, 请在运行 `npm install` 前安装 [最新版 Python v3](https://www.python.org/downloads/)， 并通过 [Visual Studio Installer](https://docs.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2019#step-3---install-the-visual-studio-installer) 安装 **Desktop development with C++**。
 1. 如果你修复了一个 bug 或者新增了一个功能，请确保写了相应的测试，这很重要。
 1. 确认所有的测试都是通过的 `npm run test`。 小贴士：开发过程中可以用 `npm test -- --watch TestName` 来运行指定的测试。
 1. 运行 `npm test -- -u` 来更新 [jest snapshot](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest) 并且把这些更新也提交上来（如果有的话）。
@ -80,7 +79,8 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并

 如果你贡献度足够活跃，希望和 Ant Design 团队一起参与维护工作，你可以[申请成为社区协作者](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)。

-你还可以参考下面两篇社区成员写的贡献指南，一步一步成为 antd 的贡献者吧：
+你还可以参考下面三篇社区成员写的贡献指南，一步一步成为 antd 的贡献者吧：

 - [记录向：如何快速的成为 Ant Design 的 contributor](https://zhuanlan.zhihu.com/p/123367842) [@Rustin-Liu](https://github.com/Rustin-Liu)
 - [从 0 开始，成为 Ant-Design Contributor](https://zhuanlan.zhihu.com/p/143895612) [@fireairforce](https://github.com/fireairforce)
+- [如何成长为 Collaborator](/docs/blog/to-be-collaborator-cn)
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "5.1.4",
+  "version": "5.1.5",
  "description": "An enterprise-class UI design language and React components implementation",
  "title": "Ant Design",
  "keywords": [
@ -155,7 +155,7 @@
    "throttle-debounce": "^5.0.0"
  },
  "devDependencies": {
-    "@ant-design/tools": "^17.0.0-alpha.7",
+    "@ant-design/tools": "^17.0.0",
    "@babel/eslint-plugin": "^7.19.1",
    "@emotion/babel-preset-css-prop": "^11.10.0",
    "@emotion/css": "^11.10.5",
--- a/tests/utils.tsx
+++ b/tests/utils.tsx
@ -6,7 +6,7 @@ import { render, act } from '@testing-library/react';
 import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
 import { _rs as onEsResize } from 'rc-resize-observer/es/utils/observerUtil';

-export function assertsExist<T>(item: T | null | undefined): asserts item is T {
+export function assertsExist<T>(item?: T): asserts item is T {
  expect(item).not.toBeUndefined();
  expect(item).not.toBeNull();
 }