Merge remote-tracking branch 'upstream/master' into fix-cascader-props

2025-08-06 16:06:28 +08:00 · 2024-07-02 22:31:39 +08:00 · 2024-07-02 22:31:39 +08:00 · 8a9750ee93
commit 8a9750ee93
parent 91199fefc3 89b7ef6ada
13 changed files with 199 additions and 17 deletions
--- a/.dumi/pages/index/components/Theme/RadiusPicker.tsx
+++ b/.dumi/pages/index/components/Theme/RadiusPicker.tsx
@ -15,7 +15,7 @@ const RadiusPicker: React.FC<RadiusPickerProps> = ({ id, value, onChange }) => (
      style={{ width: 120 }}
      min={0}
      formatter={(val) => `${val}px`}
-      parser={(str) => (str ? parseFloat(str) : (str as any))}
+      parser={(str) => str?.replace('px', '') as unknown as number}
      id={id}
    />
    <Slider
--- a/.dumi/pages/theme-editor/index.tsx
+++ b/.dumi/pages/theme-editor/index.tsx
@ -1,5 +1,5 @@
 import React, { Suspense, useEffect } from 'react';
-import { Button, message, Skeleton } from 'antd';
+import { Button, App, Skeleton } from 'antd';
 import { enUS, zhCN } from 'antd-token-previewer';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
@ -36,7 +36,7 @@ const locales = {
 const ANT_DESIGN_V5_THEME_EDITOR_THEME = 'ant-design-v5-theme-editor-theme';

 const CustomTheme: React.FC = () => {
-  const [messageApi, contextHolder] = message.useMessage();
+  const { message } = App.useApp();
  const [locale, lang] = useLocale(locales);

  const [theme, setTheme] = React.useState<ThemeConfig>({});
@ -51,7 +51,7 @@ const CustomTheme: React.FC = () => {

  const handleSave = () => {
    localStorage.setItem(ANT_DESIGN_V5_THEME_EDITOR_THEME, JSON.stringify(theme));
-    messageApi.success(locale.saveSuccessfully);
+    message.success(locale.saveSuccessfully);
  };

  return (
@ -60,7 +60,6 @@ const CustomTheme: React.FC = () => {
        <title>{`${locale.title} - Ant Design`}</title>
        <meta property="og:title" content={`${locale.title} - Ant Design`} />
      </Helmet>
-      {contextHolder}
      <Suspense fallback={<Skeleton style={{ margin: 24 }} />}>
        <ThemeEditor
          advanced
--- a/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
+++ b/.dumi/theme/builtins/IconSearch/CopyableIcon.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import * as AntdIcons from '@ant-design/icons';
-import { Badge, message } from 'antd';
+import { Badge, App } from 'antd';
 import { createStyles } from 'antd-style';
 import classNames from 'classnames';
 import CopyToClipboard from 'react-copy-to-clipboard';
@ -69,6 +69,7 @@ export interface CopyableIconProps {
 }

 const CopyableIcon: React.FC<CopyableIconProps> = (props) => {
+  const { message } = App.useApp();
  const { name, isNew, justCopied, theme, onCopied } = props;
  const { styles } = useStyle();
  const onCopy = (text: string, result: boolean) => {
--- a/.dumi/theme/common/Color/ColorBlock.tsx
+++ b/.dumi/theme/common/Color/ColorBlock.tsx
@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { message } from 'antd';
+import { App } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';

 interface ColorBlockProps {
@ -9,6 +9,7 @@ interface ColorBlockProps {
 }

 const ColorBlock: React.FC<ColorBlockProps> = (props) => {
+  const { message } = App.useApp();
  const { color, index, dark } = props;
  const textStyle = useMemo<React.CSSProperties>(() => {
    const colorMap = { default: ['#fff', 'unset'], dark: ['#314659', '#fff'] };
--- a/.dumi/theme/common/Color/Palette.tsx
+++ b/.dumi/theme/common/Color/Palette.tsx
@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { presetDarkPalettes } from '@ant-design/colors';
-import { message } from 'antd';
+import { App } from 'antd';
 import CopyToClipboard from 'react-copy-to-clipboard';

 const rgbToHex = (rgbString: string): string => {
@ -36,9 +36,10 @@ const Palette: React.FC<PaletteProps> = (props) => {
  } = props;
  const [hexColors, setHexColors] = React.useState<Record<PropertyKey, string>>({});
  const colorNodesRef = React.useRef<Record<PropertyKey, HTMLDivElement>>({});
+  const { message } = App.useApp();

  useEffect(() => {
-    const colors = {};
+    const colors: Record<string, string> = {};
    Object.keys(colorNodesRef.current || {}).forEach((key) => {
      const computedColor = getComputedStyle(colorNodesRef.current[key])['background-color'];
      if (computedColor.includes('rgba')) {
@ -70,7 +71,9 @@ const Palette: React.FC<PaletteProps> = (props) => {
        <div
          key={i}
          ref={(node) => {
-            colorNodesRef.current[`${name}-${i}`] = node;
+            if (node) {
+              colorNodesRef.current[`${name}-${i}`] = node;
+            }
          }}
          className={`main-color-item palette-${name}-${i}`}
          style={{
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -16,6 +16,38 @@ tag: vVERSION

 ---

+## 5.19.0
+
+`2024-07-01`
+
+- 🆕 ConfigProvider now supports global configuration for `variant`. [#49535](https://github.com/ant-design/ant-design/pull/49535) [@MadCcc](https://github.com/MadCcc)
+- QRCode
+  - QRCode uses `rc-qrcode` instead of `qrcode.react`. [#49454](https://github.com/ant-design/ant-design/pull/49454) [@kiner-tang](https://github.com/kiner-tang)
+  - QRCode adding support for click events and `iconSize` configuration. [#49240](https://github.com/ant-design/ant-design/pull/49240) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Select component's `filterSort` property now includes `searchValue` parameter. [#49352](https://github.com/ant-design/ant-design/pull/49352) [@MadCcc](https://github.com/MadCcc)
+- 🆕 Pagination adds `simple` property, supports read-only mode, and introduces `align` property. [#49562](https://github.com/ant-design/ant-design/pull/49562) [@coding-ice](https://github.com/coding-ice)
+- 🐞 Enhanced Anchor's `affix` property for more configuration options. [#49295](https://github.com/ant-design/ant-design/pull/49295) [@gin-lsl](https://github.com/gin-lsl)
+- DatePicker
+  - 🐞 Fixed missing arrow in DatePicker/TimePicker RangePicker with `placement` set to `topRight` or `bottomRight`.[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 Fixed missing accessible text for DatePicker switch button, style issue in RTL mode for `DatePicker.RangePicker`, and crash when entering wrong end value in year selection of DatePicker.RangePicker.[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 Fixed DatePicker.RangePicker resetting selected dates when entering dates via keyboard. [#49333](https://github.com/ant-design/ant-design/pull/49333)
+- 🐞 Button fixed `disabled` property not working when used as `Dropdown` `trigger`. [#47363](https://github.com/ant-design/ant-design/pull/47363)
+- 🐞 InputNumber now warns when using `type=number` with `changeOnWheel`. [#49648](https://github.com/ant-design/ant-design/pull/49648) [@wanpan11](https://github.com/wanpan11)
+- Table
+  - 🐞 Table fixed issue with `locale.emptyText` showing default value when set to a non-`undefined` value. [#49599](https://github.com/ant-design/ant-design/pull/49599) [@照明胧](https://github.com/mmmml-zhao)
+  - 🐞 Fixed Table filter panel not working after customizing global Empty style. [#49548](https://github.com/ant-design/ant-design/pull/49548) [@duqigit](https://github.com/duqigit)
+- 🐞 Upload fixed rendering performance issue when listing many files in list mode. [#49598](https://github.com/ant-design/ant-design/pull/49598) [@tlkv](https://github.com/tlkv)
+- 💄 Added initial styles for `SubMenu` node in Menu. [#49643](https://github.com/ant-design/ant-design/pull/49643) [@wanpan11](https://github.com/wanpan11)
+- 💄 Improved active style for Slider handle. [#49630](https://github.com/ant-design/ant-design/pull/49630)
+- 💄 Optimized `variant=borderless` style for DatePicker, TimePicker, Select, TreeSelect, Input, InputNumber, Mentions, now distinguishable when setting `status` property. [#49608](https://github.com/ant-design/ant-design/pull/49608)
+- 🐞 Fixed Typography `ellipsis` not working when parent has `nowrap` style. [#49667](https://github.com/ant-design/ant-design/pull/49667)
+- TypeScript:
+  - 🤖 ConfigProvider Improved TypeScript definition for `renderEmpty` method. [#49602](https://github.com/ant-design/ant-design/pull/49602) [@Wxh16144](https://github.com/Wxh16144)
+- 🌐 Locales
+  - 🇹🇭 Added missing Thai translations for `Transfer.deselectAll`, `Text.collapse`, `QRCode.scanned`, `ColorPicker.presetEmpty`. [#49588](https://github.com/ant-design/ant-design/pull/49588) by [@Tantatorn-dev](https://github.com/Tantatorn-dev)
+  - 🇳🇱 Fixed nl_NL localization issues for Tour. [#49612](https://github.com/ant-design/ant-design/pull/49612) by [@Hannnnnnnnnnnnnnnn](https://github.com/Hannnnnnnnnnnnnnnn)
+  - 🇹🇷 Adjusted Turkish language text for `DatePicker`. [#49333](https://github.com/ant-design/ant-design/pull/49333)
+
 ## 5.18.3

 `2024-06-19`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,39 @@ tag: vVERSION

 ---

+## 5.19.0
+
+`2024-07-01`
+
+- 🆕 ConfigProvider 现支持全局配置 `variant`。[#49535](https://github.com/ant-design/ant-design/pull/49535) [@MadCcc](https://github.com/MadCcc)
+- 🆕 QRCode
+  - QRCode 使用 `rc-qrcode` 替代了 `qrcode.react`。[#49454](https://github.com/ant-design/ant-design/pull/49454) [@kiner-tang](https://github.com/kiner-tang)
+  - QRCode 新增支持点击事件和 `iconSize` 宽高配置。[#49240](https://github.com/ant-design/ant-design/pull/49240) [@thinkasany](https://github.com/thinkasany)
+- 🆕 Select 组件的 `filterSort` 属性现新增获取 `searchValue` 的参数。[#49352](https://github.com/ant-design/ant-design/pull/49352) [@MadCcc](https://github.com/MadCcc)
+- 🆕 Pagination 支持 `simple={{ readOnly }}` 属性和 `align` 属性。[#49562](https://github.com/ant-design/ant-design/pull/49562) [@coding-ice](https://github.com/coding-ice)
+- 💄 优化了 Slider 滑块的激活样式。[#49630](https://github.com/ant-design/ant-design/pull/49630)
+- 🐞 增强了 Anchor 的 `affix` 属性，支持更多配置项。[#49295](https://github.com/ant-design/ant-design/pull/49295) [@gin-lsl](https://github.com/gin-lsl)
+- DatePicker
+  - 🐞 修复了 DatePicker/TimePicker 的 RangePicker 在 `placement` 设置为 `topRight` 或 `bottomRight` 时箭头丢失的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 修复了 DatePicker 切换按钮缺失可访问性文本的问题，修复了 `DatePicker.RangePicker` 在 RTL 模式下的样式问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 修复了 DatePicker.RangePicker 年选择器输入结束值错误导致报错的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+  - 🐞 修复了 DatePicker.RangePicker 键盘输入日期时已选日期重置的问题。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+- 🐞 Button 修复了用作 Dropdown `trigger` 时 `disabled` 属性不生效的问题。[#47363](https://github.com/ant-design/ant-design/pull/47363)
+- 🐞 InputNumber 在同时使用 `type=number` 和 `changeOnWheel` 时现在会给出警告提示。[#49648](https://github.com/ant-design/ant-design/pull/49648) [@wanpan11](https://github.com/wanpan11)
+- 🐞 修复 Dropdown 次级菜单 reset 样式丢失的问题。[#49643](https://github.com/ant-design/ant-design/pull/49643) [@wanpan11](https://github.com/wanpan11)
+- 💄 优化了 DatePicker、TimePicker、Select、TreeSelect、Input、InputNumber、Mentions 的 `variant="borderless"` 样式，现在在设置 `status` 属性时也能够被区分。[#49608](https://github.com/ant-design/ant-design/pull/49608)
+- Table
+  - 🐞 Table 修复了 `locale.emptyText` 设置为非 `undefined` 值时仍会显示默认值的问题。[#49599](https://github.com/ant-design/ant-design/pull/49599) [@照明胧](https://github.com/mmmml-zhao)
+  - 🐞 Table 自定义全局组件的 Empty 样式后，Table的过滤面板没生效的问题。[#49548](https://github.com/ant-design/ant-design/pull/49548) [@duqigit](https://github.com/duqigit)
+- 🐞 Upload 修复了在列表模式下文件过多时出现的渲染性能问题。[#49598](https://github.com/ant-design/ant-design/pull/49598) [@tlkv](https://github.com/tlkv)
+- 🐞 Typography 修复在父元素存在 `nowrap` 样式时，`ellipsis` 不生效的问题。[#49667](https://github.com/ant-design/ant-design/pull/49667)
+- TypeScript:
+  - 🤖 ConfigProvider 改进了 `renderEmpty` 方法的 TypeScript 类型定义。[#49602](https://github.com/ant-design/ant-design/pull/49602) [@Wxh16144](https://github.com/Wxh16144)
+- 🌐 国际化
+  - 🇹🇭 添加了缺失的泰语翻译，包括 `Transfer.deselectAll`、`Text.collapse`、`QRCode.scanned`、`ColorPicker.presetEmpty`。[#49588](https://github.com/ant-design/ant-design/pull/49588) [@Tantatorn-dev](https://github.com/Tantatorn-dev)
+  - 🇳🇱 Tour 修复了 nl_NL 本地化问题。[#49612](https://github.com/ant-design/ant-design/pull/49612) [@Hannnnnnnnnnnnnnnn](https://github.com/Hannnnnnnnnnnnnnnn)
+  - 🇹🇷 调整了 DatePicker 的土耳其语言文案。[#49333](https://github.com/ant-design/ant-design/pull/49333)
+
 ## 5.18.3

 `2024-06-19`
--- a/components/button/demo/icon-position.md
+++ b/components/button/demo/icon-position.md
@ -4,4 +4,4 @@

 ## en-US

-You can set the position of a button's icon by setting the `iconPostion` to `start` or `end` respectively.
+You can set the position of a button's icon by setting the `iconPosition` to `start` or `end` respectively.
--- a/components/typography/Base/Ellipsis.tsx
+++ b/components/typography/Base/Ellipsis.tsx
@ -115,9 +115,10 @@ export interface EllipsisProps {

 // Measure for the `text` is exceed the `rows` or not
 const STATUS_MEASURE_NONE = 0;
-const STATUS_MEASURE_START = 1;
-const STATUS_MEASURE_NEED_ELLIPSIS = 2;
-const STATUS_MEASURE_NO_NEED_ELLIPSIS = 3;
+const STATUS_MEASURE_PREPARE = 1;
+const STATUS_MEASURE_START = 2;
+const STATUS_MEASURE_NEED_ELLIPSIS = 3;
+const STATUS_MEASURE_NO_NEED_ELLIPSIS = 4;

 const lineClipStyle: React.CSSProperties = {
  display: '-webkit-box',
@ -140,6 +141,8 @@ export default function EllipsisMeasure(props: EllipsisProps) {
  const cutMidRef = React.useRef<MeasureTextRef>(null);

  // ========================= NeedEllipsis =========================
+  const measureWhiteSpaceRef = React.useRef<HTMLElement>(null);
+
  const needEllipsisRef = React.useRef<MeasureTextRef>(null);

  // Measure for `rows-1` height, to avoid operation exceed the line height
@ -149,11 +152,14 @@ export default function EllipsisMeasure(props: EllipsisProps) {
  const [canEllipsis, setCanEllipsis] = React.useState(false);
  const [needEllipsis, setNeedEllipsis] = React.useState(STATUS_MEASURE_NONE);
  const [ellipsisHeight, setEllipsisHeight] = React.useState(0);
+  const [parentWhiteSpace, setParentWhiteSpace] = React.useState<
+    React.CSSProperties['whiteSpace'] | null
+  >(null);

  // Trigger start measure
  useLayoutEffect(() => {
    if (enableMeasure && width && nodeLen) {
-      setNeedEllipsis(STATUS_MEASURE_START);
+      setNeedEllipsis(STATUS_MEASURE_PREPARE);
    } else {
      setNeedEllipsis(STATUS_MEASURE_NONE);
    }
@ -161,7 +167,14 @@ export default function EllipsisMeasure(props: EllipsisProps) {

  // Measure process
  useLayoutEffect(() => {
-    if (needEllipsis === STATUS_MEASURE_START) {
+    if (needEllipsis === STATUS_MEASURE_PREPARE) {
+      setNeedEllipsis(STATUS_MEASURE_START);
+
+      // Parent ref `white-space`
+      const nextWhiteSpace =
+        measureWhiteSpaceRef.current && getComputedStyle(measureWhiteSpaceRef.current).whiteSpace;
+      setParentWhiteSpace(nextWhiteSpace);
+    } else if (needEllipsis === STATUS_MEASURE_START) {
      const isOverflow = !!needEllipsisRef.current?.isExceed();

      setNeedEllipsis(isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS);
@ -247,6 +260,7 @@ export default function EllipsisMeasure(props: EllipsisProps) {
    width,
    margin: 0,
    padding: 0,
+    whiteSpace: parentWhiteSpace === 'nowrap' ? 'normal' : 'inherit',
  };

  return (
@ -309,6 +323,11 @@ export default function EllipsisMeasure(props: EllipsisProps) {
            {children(sliceNodes(nodeList, cutMidIndex), true)}
          </MeasureText>
        )}
+
+      {/* Measure white-space */}
+      {needEllipsis === STATUS_MEASURE_PREPARE && (
+        <span style={{ whiteSpace: 'inherit' }} ref={measureWhiteSpaceRef} />
+      )}
    </>
  );
 }
--- a/components/typography/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/typography/tests/snapshots/demo-extend.test.ts.snap
@ -2132,6 +2132,60 @@ Array [
  and that
    </div>
  </pre>,
+  <br />,
+  <span
+    aria-label="In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."
+    class="ant-typography ant-typography-ellipsis"
+    style="width: 100px; white-space: nowrap;"
+  >
+    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
+    <div
+      aria-label="Copy"
+      class="ant-typography-copy"
+      role="button"
+      style="border: 0px; background: transparent; padding: 0px; line-height: inherit; display: inline-flex;"
+      tabindex="0"
+    >
+      <span
+        aria-label="copy"
+        class="anticon anticon-copy"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="copy"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
+      style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+    >
+      <div
+        class="ant-tooltip-arrow"
+        style="position: absolute; bottom: 0px; left: 0px;"
+      />
+      <div
+        class="ant-tooltip-content"
+      >
+        <div
+          class="ant-tooltip-inner"
+          role="tooltip"
+        >
+          Copy
+        </div>
+      </div>
+    </div>
+  </span>,
 ]
 `;

--- a/components/typography/tests/snapshots/demo.test.tsx.snap
+++ b/components/typography/tests/snapshots/demo.test.tsx.snap
@ -1571,6 +1571,40 @@ Array [
  and that
    </div>
  </pre>,
+  <br />,
+  <span
+    class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
+    style="width:100px;white-space:nowrap"
+  >
+    In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development.
+    <div
+      aria-label="Copy"
+      class="ant-typography-copy"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-flex"
+      tabindex="0"
+    >
+      <span
+        aria-label="copy"
+        class="anticon anticon-copy"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="copy"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M832 64H296c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h496v688c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V96c0-17.7-14.3-32-32-32zM704 192H192c-17.7 0-32 14.3-32 32v530.7c0 8.5 3.4 16.6 9.4 22.6l173.3 173.3c2.2 2.2 4.7 4 7.4 5.5v1.9h4.2c3.5 1.3 7.2 2 11 2H704c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32zM350 856.2L263.9 770H350v86.2zM664 888H414V746c0-22.1-17.9-40-40-40H232V264h432v624z"
+          />
+        </svg>
+      </span>
+    </div>
+  </span>,
 ]
 `;

--- a/components/typography/demo/ellipsis-debug.tsx
+++ b/components/typography/demo/ellipsis-debug.tsx
@ -102,6 +102,12 @@ const App: React.FC = () => {
      <pre>
        <Typography.Paragraph ellipsis={{ rows: 2, expandable: true }}>{text}</Typography.Paragraph>
      </pre>
+
+      <br />
+
+      <Text style={{ width: 100, whiteSpace: 'nowrap' }} ellipsis copyable>
+        {templateStr}
+      </Text>
    </>
  );
 };
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "5.18.3",
+  "version": "5.19.0",
  "description": "An enterprise-class UI design language and React components implementation",
  "keywords": [
    "ant",