feat: DatePicker support presets (#38249)

* chore: basic style * chore: all of token spread * chore: default presets style * docs: update presets * chore: fix style * chore: fix ts * test: Update snapshot * test: Update snapshot * test: Update snapshot * test: update snapshot * chore: bump bundle size * test: update snapshot * chore: update picker style * chore: rm useless content
2025-01-18 22:36:31 +08:00 · 2022-10-28 16:44:19 +08:00 · 2022-10-28 16:44:19 +08:00 · 752d671acb
commit 752d671acb
parent 87b1a32aca
37 changed files with 313310 additions and 310975 deletions
--- a/components/anchor/style/index.tsx
+++ b/components/anchor/style/index.tsx
@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { resetComponent } from '../../style';
+import { resetComponent, textEllipsis } from '../../style';

 export interface ComponentToken {}

@ -75,13 +75,11 @@ const genSharedAnchorStyle: GenerateStyle<AnchorToken> = (token): CSSObject => {
          paddingInline: `${token.anchorPaddingInline}px 0`,

          '&-title': {
+            ...textEllipsis,
            position: 'relative',
            display: 'block',
            marginBlockEnd: token.anchorTitleBlock,
-            overflow: 'hidden',
            color: token.colorText,
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
            transition: `all ${token.motionDurationSlow}`,

            '&:only-child': {
--- a/components/card/style/index.tsx
+++ b/components/card/style/index.tsx
@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';

 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { clearFix, resetComponent } from '../../style';
+import { clearFix, resetComponent, textEllipsis } from '../../style';

 export interface ComponentToken {}

@ -55,9 +55,7 @@ const genCardHeadStyle: GenerateStyle<CardToken> = (token): CSSObject => {
      display: 'inline-block',
      flex: 1,
      padding: `${cardHeadPadding}px 0`,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
+      ...textEllipsis,

      [`
          > ${componentCls}-typography,
@ -183,12 +181,10 @@ const genCardMetaStyle: GenerateStyle<CardToken> = (token): CSSObject => ({
  },

  '&-title': {
-    overflow: 'hidden',
    color: token.colorTextHeading,
    fontWeight: token.fontWeightStrong,
    fontSize: token.fontSizeLG,
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
+    ...textEllipsis,
  },

  '&-description': {
--- a/components/cascader/style/index.tsx
+++ b/components/cascader/style/index.tsx
@ -1,6 +1,7 @@
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook } from '../../theme';
+import { textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';

 export interface ComponentToken {
@ -91,14 +92,12 @@ const genBaseStyle: GenerateStyle<CascaderToken> = token => {
              },

              '&-item': {
+                ...textEllipsis,
                display: 'flex',
                flexWrap: 'nowrap',
                alignItems: 'center',
                padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
-                overflow: 'hidden',
                lineHeight: token.lineHeight,
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
                cursor: 'pointer',
                transition: `all ${token.motionDurationFast}`,
                borderRadius: token.radiusSM,
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -29499,6 +29499,9 @@ HTMLCollection [
    >
      <div
        class="config-picker-panel-container"
+      >
+        <div
+          class="config-picker-panel-layout"
        >
          <div
            class="config-picker-panel config-picker-panel-focused"
@ -30855,6 +30858,7 @@ HTMLCollection [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -30958,6 +30962,9 @@ HTMLCollection [
    >
      <div
        class="config-picker-panel-container"
+      >
+        <div
+          class="config-picker-panel-layout"
        >
          <div
            class="config-picker-panel config-picker-panel-focused"
@ -32314,6 +32321,7 @@ HTMLCollection [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -32369,6 +32377,9 @@ HTMLCollection [
    >
      <div
        class="config-picker-panel-container"
+      >
+        <div
+          class="config-picker-panel-layout"
        >
          <div
            class="config-picker-panel config-picker-panel-focused"
@ -33725,6 +33736,7 @@ HTMLCollection [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -33780,6 +33792,9 @@ HTMLCollection [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -35136,6 +35151,7 @@ HTMLCollection [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -35191,6 +35207,9 @@ HTMLCollection [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -36547,6 +36566,7 @@ HTMLCollection [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -36602,6 +36622,9 @@ HTMLCollection [
    >
      <div
        class="prefix-TimePicker-panel-container"
+      >
+        <div
+          class="prefix-TimePicker-panel-layout"
        >
          <div
            class="prefix-TimePicker-panel prefix-TimePicker-panel-focused"
@ -37958,6 +37981,7 @@ HTMLCollection [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
--- a/components/date-picker/PickerTag.tsx
+++ b/components/date-picker/PickerTag.tsx
@ -1,7 +0,0 @@
-import * as React from 'react';
-import type { TagProps } from '../tag';
-import Tag from '../tag';
-
-export default function PickerTag(props: TagProps) {
-  return <Tag color="blue" {...props} />;
-}
--- a/components/date-picker/tests/snapshots/DatePicker.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/DatePicker.test.tsx.snap
@ -48,6 +48,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -595,6 +598,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -671,6 +675,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -1217,6 +1224,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
--- a/components/date-picker/tests/snapshots/RangePicker.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/RangePicker.test.tsx.snap
@ -161,6 +161,22 @@ Array [
          class="ant-picker-panel-container"
          style="margin-left: 0px;"
        >
+          <div
+            class="ant-picker-panel-layout"
+          >
+            <div
+              class="ant-picker-presets"
+            >
+              <ul>
+                <li>
+                  Today
+                </li>
+                <li>
+                  This Month
+                </li>
+              </ul>
+            </div>
+            <div>
              <div
                class="ant-picker-panels"
              >
@ -1237,31 +1253,7 @@ Array [
                  </div>
                </div>
              </div>
-          <div
-            class="ant-picker-footer"
-          >
-            <ul
-              class="ant-picker-ranges"
-            >
-              <li
-                class="ant-picker-preset"
-              >
-                <span
-                  class="ant-tag ant-tag-blue"
-                >
-                  Today
-                </span>
-              </li>
-              <li
-                class="ant-picker-preset"
-              >
-                <span
-                  class="ant-tag ant-tag-blue"
-                >
-                  This Month
-                </span>
-              </li>
-            </ul>
+            </div>
          </div>
        </div>
      </div>
--- 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.ts.snap
+++ b/components/date-picker/tests/snapshots/demo.test.ts.snap
@ -2563,6 +2563,50 @@ exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`]
 <div
  class="ant-space ant-space-vertical"
 >
+  <div
+    class="ant-space-item"
+    style="margin-bottom:12px"
+  >
+    <div
+      class="ant-picker"
+    >
+      <div
+        class="ant-picker-input"
+      >
+        <input
+          autocomplete="off"
+          placeholder="Select date"
+          readonly=""
+          size="12"
+          title=""
+          value=""
+        />
+        <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>
  <div
    class="ant-space-item"
    style="margin-bottom:12px"
--- a/components/date-picker/tests/snapshots/other.test.tsx.snap
+++ b/components/date-picker/tests/snapshots/other.test.tsx.snap
@ -8,6 +8,9 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
  >
    <div
      class="ant-picker-panel-container"
+    >
+      <div
+        class="ant-picker-panel-layout"
      >
        <div
          class="ant-picker-panel ant-picker-panel-focused"
@ -190,6 +193,7 @@ exports[`MonthPicker and WeekPicker render MonthPicker 1`] = `
        </div>
      </div>
    </div>
+  </div>
 </div>
 `;

@ -201,6 +205,9 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
  >
    <div
      class="ant-picker-panel-container"
+    >
+      <div
+        class="ant-picker-panel-layout"
      >
        <div
          class="ant-picker-panel ant-picker-panel-focused"
@ -783,6 +790,7 @@ exports[`MonthPicker and WeekPicker render WeekPicker 1`] = `
        </div>
      </div>
    </div>
+  </div>
 </div>
 `;

--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@ -14,14 +14,21 @@ title:
 We can set preset ranges to RangePicker to improve user experience.

 ```tsx
-import { DatePicker, Space } from 'antd';
-import type { RangePickerProps } from 'antd/es/date-picker';
-import dayjs from 'dayjs';
 import React from 'react';
+import { DatePicker, Space } from 'antd';
+import dayjs from 'dayjs';
+import type { Dayjs } from 'dayjs';

 const { RangePicker } = DatePicker;

-const onChange: RangePickerProps['onChange'] = (dates, dateStrings) => {
+const onChange = (date: Dayjs) => {
+  if (date) {
+    console.log('Date: ', date);
+  } else {
+    console.log('Clear');
+  }
+};
+const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
  if (dates) {
    console.log('From: ', dates[0], ', to: ', dates[1]);
    console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
@ -30,23 +37,32 @@ const onChange: RangePickerProps['onChange'] = (dates, dateStrings) => {
  }
 };

+const rangePresets: {
+  label: string;
+  value: [Dayjs, Dayjs];
+}[] = [
+  { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
+  { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
+  { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
+  { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
+];
+
 const App: React.FC = () => (
  <Space direction="vertical" size={12}>
-    <RangePicker
-      ranges={{
-        Today: [dayjs(), dayjs()],
-        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
-      }}
+    <DatePicker
+      presets={[
+        { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+        { label: 'Last Week', value: dayjs().add(-7, 'd') },
+        { label: 'Last Month', value: dayjs().add(-1, 'month') },
+      ]}
      onChange={onChange}
    />
+    <RangePicker presets={rangePresets} onChange={onRangeChange} />
    <RangePicker
-      ranges={{
-        Today: [dayjs(), dayjs()],
-        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
-      }}
+      presets={rangePresets}
      showTime
      format="YYYY/MM/DD HH:mm:ss"
-      onChange={onChange}
+      onChange={onRangeChange}
    />
  </Space>
 );
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@ -16,11 +16,10 @@ import type { TimePickerLocale } from '../../time-picker';
 import type { InputStatus } from '../../_util/statusUtils';
 import { tuple } from '../../_util/type';
 import PickerButton from '../PickerButton';
-import PickerTag from '../PickerTag';
 import generateRangePicker from './generateRangePicker';
 import generateSinglePicker from './generateSinglePicker';

-export const Components = { button: PickerButton, rangeItem: PickerTag };
+export const Components = { button: PickerButton };

 function toArray<T>(list: T | T[]): T[] {
  if (!list) {
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -71,6 +71,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | placeholder | The placeholder of date input | string \| \[string,string] | - |  |
 | placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | To customize the style of the popup calendar | CSSProperties | {} |  |
+| presets | The preset ranges for quick selection | { label: React.ReactNode, value: [dayjs](https://day.js.org/) }[] | - |  |
 | prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
 | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
@ -164,7 +165,7 @@ Added in `4.1.0`.
 | 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` |  |
-| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - |  |
+| 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 />` |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -73,6 +73,7 @@ import locale from 'antd/locale/zh_CN';
 | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | 额外的弹出日历样式 | CSSProperties | {} |  |
 | prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
+| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/) }[] | - |  |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | style | 自定义输入框样式 | CSSProperties | {} |  |
@ -165,7 +166,7 @@ import locale from 'antd/locale/zh_CN';
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
 | disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - |  |
 | format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
-| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - |  |
+| presets | 预设时间范围快捷选择 | { label: React.ReactNode, value: [dayjs](https://day.js.org/)\[] }[] | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |  |
--- a/components/date-picker/style/index.tsx
+++ b/components/date-picker/style/index.tsx
--- a/components/descriptions/style/index.tsx
+++ b/components/descriptions/style/index.tsx
@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { resetComponent } from '../../style';
+import { resetComponent, textEllipsis } from '../../style';

 interface DescriptionsToken extends FullToken<'Descriptions'> {
  descriptionsTitleMarginBottom: number;
@ -87,14 +87,12 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token: Descripti
        marginBottom: descriptionsTitleMarginBottom,
      },
      [`${componentCls}-title`]: {
+        ...textEllipsis,
        flex: 'auto',
-        overflow: 'hidden',
        color: token.colorText,
        fontWeight: token.fontWeightStrong,
        fontSize: token.fontSizeLG,
        lineHeight: token.lineHeightLG,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
      },
      [`${componentCls}-extra`]: {
        marginInlineStart: 'auto',
--- a/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
+++ b/components/drawer/tests/snapshots/demo-extend.test.tsx.snap
@ -1354,6 +1354,10 @@ Array [
                                    class="ant-picker-panel-container"
                                    style="margin-left:0"
                                  >
+                                    <div
+                                      class="ant-picker-panel-layout"
+                                    >
+                                      <div>
                                        <div
                                          class="ant-picker-panels"
                                        >
@ -2441,6 +2445,8 @@ Array [
                      </div>
                    </div>
                  </div>
+                </div>
+              </div>
              <div
                class="ant-row"
                style="margin-left:-8px;margin-right:-8px"
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -3084,6 +3084,9 @@ Array [
                >
                  <div
                    class="ant-picker-panel-container"
+                  >
+                    <div
+                      class="ant-picker-panel-layout"
                    >
                      <div
                        class="ant-picker-panel ant-picker-panel-focused"
@ -3636,6 +3639,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
    <div
      class="ant-form-item"
    >
@ -3761,6 +3765,10 @@ Array [
                      class="ant-picker-panel-container"
                      style="margin-left:0"
                    >
+                      <div
+                        class="ant-picker-panel-layout"
+                      >
+                        <div>
                          <div
                            class="ant-picker-panels"
                          >
@ -4846,6 +4854,8 @@ Array [
            </div>
          </div>
        </div>
+      </div>
+    </div>
    <div
      class="ant-form-item"
    >
@ -10182,6 +10192,9 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -10734,6 +10747,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -11007,6 +11021,9 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -11559,6 +11576,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -11633,6 +11651,9 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -13537,6 +13558,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -13611,6 +13633,9 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -13799,6 +13824,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -13925,6 +13951,10 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                    class="ant-picker-panel-container"
                    style="margin-left:0"
                  >
+                    <div
+                      class="ant-picker-panel-layout"
+                    >
+                      <div>
                        <div
                          class="ant-picker-panels"
                        >
@ -15010,6 +15040,8 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
          </div>
        </div>
      </div>
+    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -15136,6 +15168,10 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                    class="ant-picker-panel-container"
                    style="margin-left:0"
                  >
+                    <div
+                      class="ant-picker-panel-layout"
+                    >
+                      <div>
                        <div
                          class="ant-picker-panels"
                        >
@ -17035,6 +17071,8 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
          </div>
        </div>
      </div>
+    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -17112,6 +17150,9 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -18475,6 +18516,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item"
  >
@ -20732,6 +20774,9 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -21284,6 +21329,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-warning"
  >
@ -21382,6 +21428,9 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
              >
                <div
                  class="ant-picker-panel-container"
+                >
+                  <div
+                    class="ant-picker-panel-layout"
                  >
                    <div
                      class="ant-picker-panel ant-picker-panel-focused"
@ -22745,6 +22794,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
  >
@ -22892,6 +22942,10 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                    class="ant-picker-panel-container"
                    style="margin-left:0"
                  >
+                    <div
+                      class="ant-picker-panel-layout"
+                    >
+                      <div>
                        <div
                          class="ant-picker-panels"
                        >
@ -23977,6 +24031,8 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
          </div>
        </div>
      </div>
+    </div>
+  </div>
  <div
    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-error"
  >
@ -24603,6 +24659,9 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                        >
                          <div
                            class="ant-picker-panel-container"
+                          >
+                            <div
+                              class="ant-picker-panel-layout"
                            >
                              <div
                                class="ant-picker-panel ant-picker-panel-focused"
@ -25155,6 +25214,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                  </div>
                </div>
              </div>
+            </div>
            <span
              style="display:inline-block;width:24px;line-height:32px;text-align:center"
            >
@ -25222,6 +25282,9 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
                        >
                          <div
                            class="ant-picker-panel-container"
+                          >
+                            <div
+                              class="ant-picker-panel-layout"
                            >
                              <div
                                class="ant-picker-panel ant-picker-panel-focused"
@ -25779,6 +25842,7 @@ exports[`renders ./components/form/demo/validate-static.md extend context correc
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-form-item ant-form-item-has-feedback ant-form-item-has-success"
  >
--- a/components/image/style/index.tsx
+++ b/components/image/style/index.tsx
@ -4,7 +4,7 @@ import { genModalMaskStyle } from '../../modal/style';
 import { initZoomMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { resetComponent } from '../../style';
+import { resetComponent, textEllipsis } from '../../style';

 export interface ComponentToken {
  zIndexPopup: number;
@ -41,10 +41,8 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => {
    transition: `opacity ${motionDurationSlow}`,

    [`.${prefixCls}-mask-info`]: {
+      ...textEllipsis,
      padding: `0 ${paddingXXS}px`,
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
      [iconCls]: {
        marginInlineEnd: marginXXS,
      },
--- a/components/input/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/input/tests/snapshots/demo-extend.test.ts.snap
@ -854,6 +854,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -1400,6 +1403,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-picker"
@ -1451,6 +1455,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -2808,6 +2815,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-select ant-select-single ant-select-show-arrow"
@ -3372,6 +3380,10 @@ Array [
          class="ant-picker-panel-container"
          style="margin-left:0"
        >
+          <div
+            class="ant-picker-panel-layout"
+          >
+            <div>
              <div
                class="ant-picker-panels"
              >
@ -4451,6 +4463,8 @@ Array [
            </div>
          </div>
        </div>
+      </div>
+    </div>
  </div>,
  <div
    class="ant-picker"
@ -4498,6 +4512,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -4680,6 +4697,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-radio-group ant-radio-group-outline"
@ -6080,6 +6098,9 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
      >
        <div
          class="ant-picker-panel-container"
+        >
+          <div
+            class="ant-picker-panel-layout"
          >
            <div
              class="ant-picker-panel ant-picker-panel-focused"
@ -6627,6 +6648,7 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
          </div>
        </div>
      </div>
+    </div>
  </span>
  <br />
  <span
@ -6737,6 +6759,10 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
            class="ant-picker-panel-container"
            style="margin-left:0"
          >
+            <div
+              class="ant-picker-panel-layout"
+            >
+              <div>
                <div
                  class="ant-picker-panels"
                >
@ -7817,6 +7843,8 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
            </div>
          </div>
        </div>
+      </div>
+    </div>
  </span>
  <br />
  <span
--- a/components/locale-provider/tests/snapshots/index.test.tsx.snap
+++ b/components/locale-provider/tests/snapshots/index.test.tsx.snap
--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@ -9,7 +9,7 @@ import {
 } from '../../input/style';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook } from '../../theme';
-import { resetComponent } from '../../style';
+import { resetComponent, textEllipsis } from '../../style';

 export interface ComponentToken {
  zIndexPopup: number;
@ -161,16 +161,14 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
          outline: 'none',

          '&-item': {
+            ...textEllipsis,
            position: 'relative',
            display: 'block',
            minWidth: token.controlItemWidth,
            padding: `${itemPaddingVertical}px ${controlPaddingHorizontal}px`,
-            overflow: 'hidden',
            color: colorText,
            fontWeight: 'normal',
            lineHeight,
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
            cursor: 'pointer',
            transition: `background ${motionDurationSlow} ease`,

--- a/components/menu/style/vertical.tsx
+++ b/components/menu/style/vertical.tsx
@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { textEllipsis } from '../../style';
 import type { MenuToken } from '.';
 import type { GenerateStyle } from '../../theme';

@ -217,10 +218,8 @@ const getVerticalStyle: GenerateStyle<MenuToken> = token => {
        },

        [`${componentCls}-item-group-title`]: {
+          ...textEllipsis,
          paddingInline: paddingXS,
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
        },
      },
    },
--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { resetComponent } from '../../style';
+import { resetComponent, textEllipsis } from '../../style';

 export interface ComponentToken {}

@ -36,9 +36,7 @@ function getSegmentedItemSelectedStyle(token: SegmentedToken): CSSObject {
 const segmentedTextEllipsisCss: CSSObject = {
  overflow: 'hidden',
  // handle text ellipsis
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  wordBreak: 'keep-all',
+  ...textEllipsis,
 };

 // ============================== Styles ==============================
--- a/components/select/style/dropdown.tsx
+++ b/components/select/style/dropdown.tsx
@ -9,7 +9,7 @@ import {
  slideUpOut,
 } from '../../style/motion';
 import type { GenerateStyle } from '../../theme';
-import { resetComponent } from '../../style';
+import { resetComponent, textEllipsis } from '../../style';

 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = token => {
  const { controlPaddingHorizontal } = token;
@ -111,9 +111,7 @@ const genSingleStyle: GenerateStyle<SelectToken> = token => {

            '&-content': {
              flex: 'auto',
-              overflow: 'hidden',
-              whiteSpace: 'nowrap',
-              textOverflow: 'ellipsis',
+              ...textEllipsis,
            },

            '&-state': {
--- a/components/select/style/index.tsx
+++ b/components/select/style/index.tsx
@ -4,7 +4,7 @@ import { genComponentStyleHook, mergeToken } from '../../theme';
 import genDropdownStyle from './dropdown';
 import genMultipleStyle from './multiple';
 import genSingleStyle from './single';
-import { resetComponent, resetIcon } from '../../style';
+import { resetComponent, resetIcon, textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';

 export interface ComponentToken {
@ -144,19 +144,15 @@ const genBaseStyle: GenerateStyle<SelectToken> = token => {
      // ======================== Selection ========================
      [`${componentCls}-selection-item`]: {
        flex: 1,
-        overflow: 'hidden',
        fontWeight: 'normal',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
+        ...textEllipsis,
      },

      // ======================= Placeholder =======================
      [`${componentCls}-selection-placeholder`]: {
+        ...textEllipsis,
        flex: 1,
-        overflow: 'hidden',
        color: token.colorTextPlaceholder,
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
        pointerEvents: 'none',
      },

--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@ -1229,6 +1229,9 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
      >
        <div
          class="ant-picker-panel-container"
+        >
+          <div
+            class="ant-picker-panel-layout"
          >
            <div
              class="ant-picker-panel ant-picker-panel-focused"
@ -1777,6 +1780,7 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
        </div>
      </div>
    </div>
+  </div>
  <br />
  <div
    class="ant-space-compact ant-space-compact-block"
@ -1880,6 +1884,10 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
            class="ant-picker-panel-container"
            style="margin-left:0"
          >
+            <div
+              class="ant-picker-panel-layout"
+            >
+              <div>
                <div
                  class="ant-picker-panels"
                >
@ -2960,6 +2968,8 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
            </div>
          </div>
        </div>
+      </div>
+    </div>
    <input
      class="ant-input ant-input-compact-item"
      style="width:30%"
@ -3084,6 +3094,10 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
            class="ant-picker-panel-container"
            style="margin-left:0"
          >
+            <div
+              class="ant-picker-panel-layout"
+            >
+              <div>
                <div
                  class="ant-picker-panels"
                >
@ -4165,6 +4179,8 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
          </div>
        </div>
      </div>
+    </div>
+  </div>
  <br />
  <div
    class="ant-space-compact ant-space-compact-block"
@ -4931,6 +4947,9 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
      >
        <div
          class="ant-picker-panel-container"
+        >
+          <div
+            class="ant-picker-panel-layout"
          >
            <div
              class="ant-picker-panel ant-picker-panel-focused"
@ -6289,6 +6308,7 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
          </div>
        </div>
      </div>
+    </div>
    <div
      class="ant-select ant-cascader ant-select-compact-item ant-select-compact-last-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
      style="width:70%"
@ -6543,6 +6563,10 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
            class="ant-picker-panel-container"
            style="margin-left:0"
          >
+            <div
+              class="ant-picker-panel-layout"
+            >
+              <div>
                <div
                  class="ant-picker-panels"
                >
@ -7896,6 +7920,8 @@ exports[`renders ./components/space/demo/compact.md extend context correctly 1`]
            </div>
          </div>
        </div>
+      </div>
+    </div>
    <div
      class="ant-select ant-tree-select ant-select-compact-item ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
      style="width:60%"
@ -10823,6 +10849,9 @@ Array [
        >
          <div
            class="ant-picker-panel-container"
+          >
+            <div
+              class="ant-picker-panel-layout"
            >
              <div
                class="ant-picker-panel ant-picker-panel-focused"
@ -12181,6 +12210,7 @@ Array [
            </div>
          </div>
        </div>
+      </div>
      <button
        class="ant-btn ant-btn-primary ant-btn-compact-item"
        type="button"
--- a/components/steps/style/nav.ts
+++ b/components/steps/style/nav.ts
@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { textEllipsis } from '../../style';
 import type { StepsToken } from '.';
 import type { GenerateStyle } from '../../theme';

@ -42,9 +43,7 @@ const genStepsNavStyle: GenerateStyle<StepsToken, CSSObject> = token => {
          [`${componentCls}-item-title`]: {
            maxWidth: '100%',
            paddingInlineEnd: 0,
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
+            ...textEllipsis,

            '&::after': {
              display: 'none',
--- a/components/style/index.tsx
+++ b/components/style/index.tsx
@ -5,6 +5,12 @@ import type { DerivativeToken } from '../theme';
 export { operationUnit } from './operationUnit';
 export { roundedArrow } from './roundedArrow';

+export const textEllipsis: CSSObject = {
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+};
+
 export const resetComponent = (token: DerivativeToken): CSSObject => ({
  boxSizing: 'border-box',
  margin: 0,
--- a/components/table/style/ellipsis.tsx
+++ b/components/table/style/ellipsis.tsx
@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { textEllipsis } from '../../style';
 import type { GenerateStyle } from '../../theme';
 import type { TableToken } from './index';

@ -7,9 +8,7 @@ const genEllipsisStyle: GenerateStyle<TableToken, CSSObject> = token => {
  return {
    [`${componentCls}-wrapper`]: {
      [`${componentCls}-cell-ellipsis`]: {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
+        ...textEllipsis,
        wordBreak: 'keep-all',

        // Fixed first or last should special process
--- a/components/tabs/style/index.tsx
+++ b/components/tabs/style/index.tsx
@ -1,7 +1,7 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { genFocusStyle, resetComponent } from '../../style';
+import { genFocusStyle, resetComponent, textEllipsis } from '../../style';
 import genMotionStyle from './motion';

 export interface ComponentToken {
@ -173,18 +173,16 @@ const genDropdownStyle: GenerateStyle<TabsToken> = (token: TabsToken): CSSObject
        boxShadow: token.boxShadow,

        '&-item': {
+          ...textEllipsis,
          display: 'flex',
          alignItems: 'center',
          minWidth: token.tabsDropdownWidth,
          margin: 0,
          padding: `${token.paddingXXS}px ${token.paddingSM}px`,
-          overflow: 'hidden',
          color: token.colorText,
          fontWeight: 'normal',
          fontSize: token.fontSize,
          lineHeight: token.lineHeight,
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
          cursor: 'pointer',
          transition: `all ${token.motionDurationSlow}`,

--- a/components/time-picker/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/time-picker/tests/snapshots/demo-extend.test.ts.snap
@ -51,6 +51,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -1323,6 +1326,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-picker"
@ -1374,6 +1378,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -2646,6 +2653,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-picker"
@ -2696,6 +2704,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -3423,6 +3434,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -3478,6 +3490,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -4847,6 +4862,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -4902,6 +4918,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -6258,6 +6277,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -6313,6 +6333,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -7670,6 +7693,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-picker ant-picker-range ant-picker-borderless"
@ -7772,6 +7796,10 @@ Array [
          class="ant-picker-panel-container"
          style="margin-left:0"
        >
+          <div
+            class="ant-picker-panel-layout"
+          >
+            <div>
              <div
                class="ant-picker-panels"
              >
@ -9124,6 +9152,8 @@ Array [
            </div>
          </div>
        </div>
+      </div>
+    </div>
  </div>,
 ]
 `;
@ -9179,6 +9209,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -10535,6 +10568,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -10591,6 +10625,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -11947,6 +11984,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -12026,6 +12064,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -12837,6 +12878,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -12892,6 +12934,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -13259,6 +13304,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -13366,6 +13412,10 @@ Array [
          class="ant-picker-panel-container"
          style="margin-left:0"
        >
+          <div
+            class="ant-picker-panel-layout"
+          >
+            <div>
              <div
                class="ant-picker-panels"
              >
@ -14718,6 +14768,8 @@ Array [
            </div>
          </div>
        </div>
+      </div>
+    </div>
  </div>,
 ]
 `;
@ -14776,6 +14828,9 @@ exports[`renders ./components/time-picker/demo/render-panel.md extend context co
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -16134,6 +16189,7 @@ exports[`renders ./components/time-picker/demo/render-panel.md extend context co
        </div>
      </div>
    </div>
+  </div>
 </div>
 `;

@ -16212,6 +16268,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -17568,6 +17627,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-picker"
@ -17642,6 +17702,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -18998,6 +19061,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
  <div
    class="ant-picker ant-picker-small"
@ -19072,6 +19136,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -20428,6 +20495,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -20489,6 +20557,9 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
      >
        <div
          class="ant-picker-panel-container"
+        >
+          <div
+            class="ant-picker-panel-layout"
          >
            <div
              class="ant-picker-panel ant-picker-panel-focused"
@ -21848,6 +21919,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-space-item"
    style="margin-bottom:8px"
@ -21901,6 +21973,9 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
      >
        <div
          class="ant-picker-panel-container"
+        >
+          <div
+            class="ant-picker-panel-layout"
          >
            <div
              class="ant-picker-panel ant-picker-panel-focused"
@ -23260,6 +23335,7 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
        </div>
      </div>
    </div>
+  </div>
  <div
    class="ant-space-item"
    style="margin-bottom:8px"
@ -23365,6 +23441,10 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
            class="ant-picker-panel-container"
            style="margin-left:0"
          >
+            <div
+              class="ant-picker-panel-layout"
+            >
+              <div>
                <div
                  class="ant-picker-panels"
                >
@ -24719,6 +24799,8 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
          </div>
        </div>
      </div>
+    </div>
+  </div>
  <div
    class="ant-space-item"
  >
@ -24823,6 +24905,10 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
            class="ant-picker-panel-container"
            style="margin-left:0"
          >
+            <div
+              class="ant-picker-panel-layout"
+            >
+              <div>
                <div
                  class="ant-picker-panels"
                >
@ -26177,6 +26263,8 @@ exports[`renders ./components/time-picker/demo/status.md extend context correctl
          </div>
        </div>
      </div>
+    </div>
+  </div>
 </div>
 `;

@ -26228,6 +26316,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -27584,6 +27675,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
@ -27639,6 +27731,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -28996,6 +29091,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
--- a/components/time-picker/tests/snapshots/index.test.tsx.snap
+++ b/components/time-picker/tests/snapshots/index.test.tsx.snap
@ -120,6 +120,9 @@ Array [
    >
      <div
        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel-layout"
        >
          <div
            class="ant-picker-panel ant-picker-panel-focused"
@ -1476,6 +1479,7 @@ Array [
          </div>
        </div>
      </div>
+    </div>
  </div>,
 ]
 `;
--- a/components/transfer/style/index.tsx
+++ b/components/transfer/style/index.tsx
@ -2,7 +2,7 @@ import type { CSSObject } from '@ant-design/cssinjs';

 import type { FullToken, GenerateStyle } from '../../theme';
 import { genComponentStyleHook, mergeToken } from '../../theme';
-import { resetComponent, resetIcon } from '../../style';
+import { resetComponent, resetIcon, textEllipsis } from '../../style';

 export interface ComponentToken {
  listWidth: number;
@ -149,11 +149,9 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
      },

      '&-title': {
+        ...textEllipsis,
        flex: 'auto',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
        textAlign: 'end',
-        textOverflow: 'ellipsis',
      },

      '&-dropdown': {
@ -206,10 +204,8 @@ const genTransferListStyle: GenerateStyle<TransferToken> = (token: TransferToken
        },

        '&-text': {
+          ...textEllipsis,
          flex: 'auto',
-          overflow: 'hidden',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
        },

        '&-remove': {
--- a/components/upload/style/list.tsx
+++ b/components/upload/style/list.tsx
@ -1,6 +1,6 @@
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme';
-import { clearFix } from '../../style';
+import { clearFix, textEllipsis } from '../../style';

 const genListStyle: GenerateStyle<UploadToken> = token => {
  const { componentCls, antCls, iconCls, fontSizeBase, lineHeight } = token;
@ -29,11 +29,9 @@ const genListStyle: GenerateStyle<UploadToken> = token => {
          },

          [`${itemCls}-name`]: {
+            ...textEllipsis,
            padding: `0 ${token.paddingXS}px`,
-            overflow: 'hidden',
            lineHeight,
-            whiteSpace: 'nowrap',
-            textOverflow: 'ellipsis',
            flex: 'auto',
            transition: `all ${token.motionDurationSlow}`,
          },
--- a/components/upload/style/picture.tsx
+++ b/components/upload/style/picture.tsx
@ -1,7 +1,7 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import type { UploadToken } from '.';
 import type { GenerateStyle } from '../../theme';
-import { clearFix } from '../../style';
+import { clearFix, textEllipsis } from '../../style';

 const genPictureStyle: GenerateStyle<UploadToken> = token => {
  const { componentCls, iconCls, uploadThumbnailSize, uploadProgressOffset } = token;
@ -24,14 +24,12 @@ const genPictureStyle: GenerateStyle<UploadToken> = token => {
          },

          [`${itemCls}-thumbnail`]: {
+            ...textEllipsis,
            width: uploadThumbnailSize,
            height: uploadThumbnailSize,
            lineHeight: `${uploadThumbnailSize + token.paddingSM}px`,
            textAlign: 'center',
            flex: 'none',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',

            [iconCls]: {
              fontSize: token.fontSizeHeading2,
--- a/package.json
+++ b/package.json
@ -134,7 +134,7 @@
    "rc-motion": "^2.6.1",
    "rc-notification": "~5.0.0-alpha.9",
    "rc-pagination": "~3.1.17",
-    "rc-picker": "~2.6.11",
+    "rc-picker": "~3.0.0-4",
    "rc-progress": "~3.3.2",
    "rc-rate": "~2.9.0",
    "rc-resize-observer": "^1.2.0",
@ -308,13 +308,13 @@
  "size-limit": [
    {
      "path": "./dist/antd.min.js",
-      "limit": "373.5 kB"
+      "limit": "375 kB"
    }
  ],
  "bundlesize": [
    {
      "path": "./dist/antd.min.js",
-      "maxSize": "374.5 kB"
+      "maxSize": "375 kB"
    }
  ],
  "tnpm": {