Merge pull request #48845 from ant-design/feature-merge-master

chore: merge master into feature
2024-12-04 21:18:01 +08:00 · 2024-05-10 12:35:02 +08:00 · 2024-05-10 12:35:02 +08:00 · bcbb7a401b
commit bcbb7a401b
parent 5098e6e209 20208bfb97
18 changed files with 1791 additions and 1345 deletions
--- a/.dumi/pages/index/components/Banner.tsx
+++ b/.dumi/pages/index/components/Banner.tsx
@ -1,183 +0,0 @@
-import * as React from 'react';
-import { Button, Flex, Typography } from 'antd';
-import { createStyles, css, useTheme } from 'antd-style';
-import classNames from 'classnames';
-import { Link, useLocation } from 'dumi';
-
-import useLocale from '../../../hooks/useLocale';
-import SiteContext from '../../../theme/slots/SiteContext';
-import * as utils from '../../../theme/utils';
-import GroupMaskLayer from './GroupMaskLayer';
-
-const locales = {
-  cn: {
-    slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～',
-    start: '开始使用',
-    designLanguage: '设计语言',
-  },
-  en: {
-    slogan:
-      'Help designers/developers building beautiful products more flexible and working with happiness',
-    start: 'Getting Started',
-    designLanguage: 'Design Language',
-  },
-};
-
-const useStyle = () => {
-  const { isMobile } = React.useContext(SiteContext);
-  return createStyles(({ token }) => ({
-    titleBase: css`
-      h1& {
-        font-family: AliPuHui, ${token.fontFamily};
-      }
-    `,
-    title: isMobile
-      ? css`
-          h1& {
-            margin-bottom: ${token.margin}px;
-            font-weight: normal;
-            font-size: ${token.fontSizeHeading1 + 2}px;
-            line-height: ${token.lineHeightHeading2};
-          }
-        `
-      : css`
-          h1& {
-            margin-bottom: ${token.marginMD}px;
-            font-weight: 900;
-            font-size: 68px;
-          }
-        `,
-    btnWrap: css`
-      margin-bottom: ${token.marginXL}px;
-    `,
-    layer: css`
-      text-align: center;
-      padding-top: ${token.marginFar - 16}px;
-      padding-bottom: ${token.marginFarSM}px;
-    `,
-    mobileBg: css`
-      width: 100%;
-    `,
-    videoWrap: css`
-      height: 320px;
-      background-color: #77c6ff;
-      display: flex;
-      flex-wrap: nowrap;
-      justify-content: center;
-    `,
-    video: css`
-      height: 100%;
-      object-fit: contain;
-    `,
-    bg: css`
-      flex: auto;
-      background-repeat: repeat-x;
-      background-size: auto 100%;
-    `,
-    bg1: css`
-      background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*6d50SboraPIAAAAAAAAAAAAAARQnAQ);
-      background-position: 100% 0;
-    `,
-    bg2: css`
-      background-image: url(https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*8ILtRrQlVDMAAAAAAAAAAAAAARQnAQ);
-      background-position: 0 0;
-      margin-inline-start: -1px;
-    `,
-    logoWrap: css`
-      position: relative;
-      background-color: #fff;
-    `,
-    bgImg: css`
-      position: absolute;
-      width: 240px;
-    `,
-  }))();
-};
-
-const Banner: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [locale] = useLocale(locales);
-  const { pathname, search } = useLocation();
-  const token = useTheme();
-  const { styles } = useStyle();
-  const { isMobile } = React.useContext(SiteContext);
-  const isZhCN = utils.isZhCN(pathname);
-  return (
-    <>
-      {/* Banner Placeholder Motion */}
-      {isMobile ? (
-        <img
-          className={styles.mobileBg}
-          src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JmlaR5oQn3MAAAAAAAAAAAAADrJ8AQ/original"
-          alt=""
-        />
-      ) : (
-        <div className={classNames(styles.videoWrap)}>
-          <div className={classNames(styles.bg, styles.bg1)} />
-          <video className={styles.video} autoPlay muted loop>
-            <source
-              type="video/webm"
-              src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"
-            />
-            <source
-              type="video/mp4"
-              src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/file/A*XYYNQJ3NbmMAAAAAAAAAAAAAARQnAQ"
-            />
-          </video>
-          <div className={classNames(styles.bg, styles.bg2)} />
-        </div>
-      )}
-      {/* Logo */}
-      <div className={styles.logoWrap}>
-        {/* Image Bottom Right */}
-        <img
-          className={classNames(styles.bgImg)}
-          style={{ right: 0, top: 240 }}
-          src="https://gw.alipayobjects.com/zos/bmw-prod/b3b8dc41-dce8-471f-9d81-9a0204f27d03.svg"
-          alt="Ant Design"
-        />
-        <GroupMaskLayer className={styles.layer}>
-          {/* Image Left Top */}
-          <img
-            className={classNames(styles.bgImg)}
-            style={{ left: isMobile ? -120 : 0, top: 0 }}
-            src="https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg"
-            alt="bg"
-          />
-          {/* Image Right Top */}
-          <img
-            className={classNames(styles.bgImg)}
-            style={{ right: isMobile ? 0 : 120, top: 0 }}
-            src="https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg"
-            alt="bg"
-          />
-          <Typography.Title level={1} className={classNames(styles.titleBase, styles.title)}>
-            Ant Design 5.0
-          </Typography.Title>
-          <Typography.Paragraph
-            style={{
-              fontSize: isMobile ? token.fontSizeHeading5 - 2 : token.fontSizeHeading5,
-              lineHeight: isMobile ? token.lineHeightSM : token.lineHeightHeading5,
-              marginBottom: token.marginMD * 2,
-              padding: isMobile ? `0 ${token.paddingLG + 2}px` : 0,
-            }}
-          >
-            <div>{locale.slogan}</div>
-          </Typography.Paragraph>
-          <Flex gap="middle" className={styles.btnWrap}>
-            <Link to={utils.getLocalizedPathname('/components/overview/', isZhCN, search)}>
-              <Button size="large" type="primary">
-                {locale.start}
-              </Button>
-            </Link>
-            <Link to={utils.getLocalizedPathname('/docs/spec/introduce/', isZhCN, search)}>
-              <Button size="large">{locale.designLanguage}</Button>
-            </Link>
-          </Flex>
-          {children}
-        </GroupMaskLayer>
-      </div>
-    </>
-  );
-};
-
-export default Banner;
--- a/.dumirc.ts
+++ b/.dumirc.ts
@ -40,7 +40,12 @@ export default defineConfig({
  },
  extraRehypePlugins: [rehypeAntd],
  extraRemarkPlugins: [remarkAntd],
-  metas: [{ name: 'theme-color', content: '#1677ff' }],
+  metas: [
+    { name: 'theme-color', content: '#1677ff' },
+    { name: 'build-time', content: Date.now().toString() },
+    // https://docs.github.com/en/actions/learn-github-actions/variables#default-environment-variables
+    { name: 'build-hash', content: process.env.GITHUB_SHA ?? 'unknown' },
+  ],
  analytics: {
    ga_v2: 'UA-72788897-1',
  },
--- a/components/_util/tests/wave.test.tsx
+++ b/components/_util/tests/wave.test.tsx
@ -80,6 +80,7 @@ describe('Wave component', () => {
  }

  it('work', async () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
    const { container, unmount } = render(
      <Wave>
        <button type="button">button</button>
@ -95,6 +96,8 @@ describe('Wave component', () => {

    expect(document.querySelector('.ant-wave')).toBeFalsy();

+    expect(errorSpy).not.toHaveBeenCalled();
+
    unmount();
  });

--- a/components/_util/wave/WaveEffect.tsx
+++ b/components/_util/wave/WaveEffect.tsx
@ -3,6 +3,7 @@ import classNames from 'classnames';
 import CSSMotion from 'rc-motion';
 import raf from 'rc-util/lib/raf';
 import { render, unmount } from 'rc-util/lib/React/render';
+import { composeRef } from 'rc-util/es/ref';

 import { TARGET_CLS } from './interface';
 import type { ShowWaveEffect } from './interface';
@ -20,7 +21,7 @@ export interface WaveEffectProps {

 const WaveEffect: React.FC<WaveEffectProps> = (props) => {
  const { className, target, component } = props;
-  const divRef = React.useRef<HTMLDivElement>(null);
+  const divRef = React.useRef<HTMLDivElement | null>(null);

  const [color, setWaveColor] = React.useState<string | null>(null);
  const [borderRadius, setBorderRadius] = React.useState<number[]>([]);
@ -125,9 +126,9 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {
        return false;
      }}
    >
-      {({ className: motionClassName }) => (
+      {({ className: motionClassName }, ref) => (
        <div
-          ref={divRef}
+          ref={composeRef(divRef, ref)}
          className={classNames(
            className,
            {
--- a/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/date-picker/tests/snapshots/demo-extend.test.ts.snap
--- a/components/date-picker/tests/snapshots/demo.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/demo.test.tsx.snap
@ -5834,87 +5834,200 @@ exports[`renders components/date-picker/demo/render-panel.tsx correctly 1`] = `

 exports[`renders components/date-picker/demo/select-in-range.tsx correctly 1`] = `
 <div
-  class="ant-picker ant-picker-range ant-picker-outlined"
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
 >
  <div
-    class="ant-picker-input"
+    class="ant-space-item"
  >
-    <input
-      aria-invalid="false"
-      autocomplete="off"
-      date-range="start"
-      placeholder="Start date"
-      size="12"
-      value=""
-    />
-  </div>
-  <div
-    class="ant-picker-range-separator"
-  >
-    <span
-      aria-label="to"
-      class="ant-picker-separator"
+    <h5
+      class="ant-typography"
    >
-      <span
-        aria-label="swap-right"
-        class="anticon anticon-swap-right"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="swap-right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="0 0 1024 1024"
-          width="1em"
-        >
-          <path
-            d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
-          />
-        </svg>
-      </span>
-    </span>
+      7 days range
+    </h5>
  </div>
  <div
-    class="ant-picker-input"
+    class="ant-space-item"
  >
-    <input
-      aria-invalid="false"
-      autocomplete="off"
-      date-range="end"
-      placeholder="End date"
-      size="12"
-      value=""
-    />
-  </div>
-  <div
-    class="ant-picker-active-bar"
-    style="position:absolute;width:0;left:0"
-  />
-  <span
-    class="ant-picker-suffix"
-  >
-    <span
-      aria-label="calendar"
-      class="anticon anticon-calendar"
-      role="img"
+    <div
+      class="ant-picker ant-picker-range ant-picker-outlined"
    >
-      <svg
-        aria-hidden="true"
-        data-icon="calendar"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <div
+        class="ant-picker-input"
      >
-        <path
-          d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          date-range="start"
+          placeholder="Start date"
+          size="12"
+          value=""
        />
-      </svg>
-    </span>
-  </span>
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          date-range="end"
+          placeholder="End date"
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="position:absolute;width:0;left:0"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <h5
+      class="ant-typography"
+    >
+      6 months range
+    </h5>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <div
+      class="ant-picker ant-picker-range ant-picker-outlined"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          date-range="start"
+          placeholder="Start month"
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-range-separator"
+      >
+        <span
+          aria-label="to"
+          class="ant-picker-separator"
+        >
+          <span
+            aria-label="swap-right"
+            class="anticon anticon-swap-right"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="swap-right"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="0 0 1024 1024"
+              width="1em"
+            >
+              <path
+                d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          aria-invalid="false"
+          autocomplete="off"
+          date-range="end"
+          placeholder="End month"
+          size="12"
+          value=""
+        />
+      </div>
+      <div
+        class="ant-picker-active-bar"
+        style="position:absolute;width:0;left:0"
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
 </div>
 `;

--- a/components/date-picker/demo/select-in-range.tsx
+++ b/components/date-picker/demo/select-in-range.tsx
@ -1,24 +1,37 @@
-import React, { useState } from 'react';
-import { DatePicker } from 'antd';
+import React from 'react';
+import { DatePicker, Space, Typography } from 'antd';
 import type { DatePickerProps } from 'antd';
-import type { Dayjs } from 'dayjs';

 const { RangePicker } = DatePicker;

-type RangeValue = [Dayjs | null, Dayjs | null] | null;
+// Disabled 7 days from the selected date
+const disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from }) => {
+  if (from) {
+    return Math.abs(current.diff(from, 'days')) >= 7;
+  }

-const App: React.FC = () => {
-  const [value, setValue] = useState<RangeValue>(null);
-
-  const disabledDate: DatePickerProps['disabledDate'] = (current, { from }) => {
-    if (from) {
-      return Math.abs(current.diff(from, 'days')) >= 7;
-    }
-
-    return false;
-  };
-
-  return <RangePicker value={value} disabledDate={disabledDate} onChange={setValue} />;
+  return false;
 };

+// Disabled 6 months from the selected date
+const disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from }) => {
+  if (from) {
+    const curMonth = current.year() * 12 + current.month();
+    const fromMonth = from.year() * 12 + from.month();
+    return Math.abs(fromMonth - curMonth) >= 6;
+  }
+
+  return false;
+};
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Typography.Title level={5}>7 days range</Typography.Title>
+    <RangePicker disabledDate={disabled7DaysDate} />
+
+    <Typography.Title level={5}>6 months range</Typography.Title>
+    <RangePicker disabledDate={disabled6MonthsDate} picker="month" />
+  </Space>
+);
+
 export default App;
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -29,7 +29,7 @@ By clicking the input box, you can select a date from a popup calendar.
 <code src="./demo/disabled.tsx">Disabled</code>
 <code src="./demo/disabled-date.tsx">Disabled Date & Time</code>
 <code src="./demo/allow-empty.tsx">Allow Empty</code>
-<code src="./demo/select-in-range.tsx">Select range dates in 7 days</code>
+<code src="./demo/select-in-range.tsx">Select range dates</code>
 <code src="./demo/preset-ranges.tsx">Preset Ranges</code>
 <code src="./demo/extra-footer.tsx">Extra Footer</code>
 <code src="./demo/size.tsx">Three Sizes</code>
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -30,7 +30,7 @@ demo:
 <code src="./demo/disabled.tsx">禁用</code>
 <code src="./demo/disabled-date.tsx">不可选择日期和时间</code>
 <code src="./demo/allow-empty.tsx">允许留空</code>
-<code src="./demo/select-in-range.tsx">选择不超过七天的范围</code>
+<code src="./demo/select-in-range.tsx">选择不超过一定的范围</code>
 <code src="./demo/preset-ranges.tsx">预设范围</code>
 <code src="./demo/extra-footer.tsx">额外的页脚</code>
 <code src="./demo/size.tsx">三种大小</code>
--- a/components/drawer/DrawerPanel.tsx
+++ b/components/drawer/DrawerPanel.tsx
@ -157,18 +157,7 @@ const DrawerPanel: React.FC<DrawerPanelProps> = (props) => {
  }, [footer, footerStyle, prefixCls]);

  if (spinProps?.spinning) {
-    return (
-      <Spin
-        spinning={false}
-        style={{
-          height: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-        {...spinProps}
-      />
-    );
+    return <Spin {...spinProps} />;
  }

  return (
--- a/components/drawer/tests/snapshots/Drawer.test.tsx.snap
+++ b/components/drawer/tests/snapshots/Drawer.test.tsx.snap
@ -27,7 +27,6 @@ exports[`Drawer Drawer loading have a spinner 1`] = `
        aria-busy="true"
        aria-live="polite"
        class="ant-spin ant-spin-spinning"
-        style="height: 100%; display: flex; justify-content: center; align-items: center;"
      >
        <span
          class="ant-spin-dot ant-spin-dot-spin"
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -2817,7 +2817,6 @@ Array [
          aria-busy="true"
          aria-live="polite"
          class="ant-spin ant-spin-spinning"
-          style="height: 100%; display: flex; justify-content: center; align-items: center;"
        >
          <span
            class="ant-spin-dot ant-spin-dot-spin"
--- a/components/drawer/demo/loading.tsx
+++ b/components/drawer/demo/loading.tsx
@ -1,32 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import type { DrawerProps } from 'antd';
 import { Button, Drawer } from 'antd';

 const App: React.FC = () => {
-  const [open, setOpen] = useState(false);
-  const [loading, setLoading] = useState<DrawerProps['loading']>(true);
-  let id: NodeJS.Timer;
+  const [open, setOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState<DrawerProps['loading']>(true);
+  const timerRef = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const clearTimer = () => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+  };

  const showDrawer = () => {
    setOpen(true);
-  };
-
-  const onClose = () => {
-    setOpen(false);
-    clearTimeout(Number(id));
-  };
-
-  useEffect(() => {
    setLoading(true);
-  }, []);
+    timerRef.current = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };

-  useEffect(() => {
-    if (open) {
-      id = setTimeout(() => {
-        setLoading(false);
-      }, 1000);
-    }
-  }, [open]);
+  React.useEffect(() => clearTimer, []);

  return (
    <>
@ -34,15 +29,17 @@ const App: React.FC = () => {
        Open
      </Button>
      <Drawer
+        destroyOnClose
        title="Basic Drawer"
        placement="right"
        closable={false}
-        onClose={onClose}
        open={open}
        loading={loading}
-        afterOpenChange={(visible) => !visible && setLoading(true)}
+        onClose={() => setOpen(false)}
      >
-        <Button onClick={() => setLoading(true)}>set Loading true</Button>
+        <Button type="primary" style={{ marginBottom: 16 }} onClick={() => setLoading(true)}>
+          set Loading true
+        </Button>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -22,7 +22,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 <!-- prettier-ignore -->
 <code src="./demo/basic-right.tsx">Basic</code>
 <code src="./demo/placement.tsx">Custom Placement</code>
-<code src="./demo/loading.tsx">Loading</code>
+<code src="./demo/loading.tsx" version="5.17.0">Loading</code>
 <code src="./demo/extra.tsx">Extra Actions</code>
 <code src="./demo/render-in-current.tsx">Render in current dom</code>
 <code src="./demo/form-in-drawer.tsx">Submit form in drawer</code>
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -22,7 +22,7 @@ demo:
 <!-- prettier-ignore -->
 <code src="./demo/basic-right.tsx">基础抽屉</code>
 <code src="./demo/placement.tsx">自定义位置</code>
-<code src="./demo/loading.tsx">加载中</code>
+<code src="./demo/loading.tsx" version="5.17.0">加载中</code>
 <code src="./demo/extra.tsx">额外操作</code>
 <code src="./demo/render-in-current.tsx">渲染在当前 DOM</code>
 <code src="./demo/form-in-drawer.tsx">抽屉表单</code>
--- a/components/drawer/style/index.ts
+++ b/components/drawer/style/index.ts
@ -28,6 +28,7 @@ export interface DrawerToken extends FullToken<'Drawer'> {}
 // =============================== Base ===============================
 const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
  const {
+    antCls,
    borderRadiusSM,
    componentCls,
    zIndexPopup,
@ -147,6 +148,13 @@ const genDrawerStyle: GenerateStyle<DrawerToken> = (token) => {
        overflow: 'auto',
        background: colorBgElevated,
        pointerEvents: 'auto',
+        [`${antCls}-spin`]: {
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
      },

      // Header
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -103,7 +103,7 @@ demo:
 | cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` |  |
 | centered | 垂直居中展示 Modal | boolean | false |  |
 | className | 容器类名 | string | - |  |
-| closable | 是否显示右上角的关闭按钮 | boolean | true | 4.9.0 |
+| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
 | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | (params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode \| React.ReactNode | - | 5.9.0 |
--- a/package.json
+++ b/package.json
@ -136,7 +136,7 @@
    "rc-dialog": "~9.4.0",
    "rc-drawer": "~7.1.0",
    "rc-dropdown": "~4.2.0",
-    "rc-field-form": "~2.0.0",
+    "rc-field-form": "~2.0.1",
    "rc-image": "~7.7.0",
    "rc-input": "~1.4.5",
    "rc-input-number": "~9.0.0",
@ -150,7 +150,7 @@
    "rc-rate": "~2.12.0",
    "rc-resize-observer": "^1.4.0",
    "rc-segmented": "~2.3.0",
-    "rc-select": "~14.13.2",
+    "rc-select": "~14.13.3",
    "rc-slider": "~10.6.2",
    "rc-steps": "~6.0.1",
    "rc-switch": "~4.1.0",