Merge branch 'next' into support-expaned-row-offset-v6

This commit is contained in:
thinkasany 2025-05-29 23:41:14 +08:00 committed by GitHub
commit c406e35d1f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 482 additions and 32 deletions

View File

@ -1,4 +1,4 @@
import React, { use } from 'react';
import React, { use, useRef } from 'react';
import { BgColorsOutlined, LinkOutlined, SmileOutlined, SunOutlined } from '@ant-design/icons';
import { Badge, Button, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
@ -22,6 +22,7 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = () => {
const { pathname, search } = useLocation();
const { theme, updateSiteConfig } = use<SiteContextProps>(SiteContext);
const toggleAnimationTheme = useThemeAnimation();
const lastThemeKey = useRef<string>(theme.includes('dark') ? 'dark' : 'light');
const badge = <Badge color="blue" style={{ marginTop: -1 }} />;
@ -95,10 +96,12 @@ const ThemeSwitch: React.FC<ThemeSwitchProps> = () => {
// 处理主题切换
const handleThemeChange = (key: string, domEvent: React.MouseEvent<HTMLElement, MouseEvent>) => {
// 主题编辑器特殊处理
if (key === 'theme-editor') {
if (key === 'theme-editor' || key === lastThemeKey.current) {
return;
}
lastThemeKey.current = key;
// 亮色/暗色模式切换时应用动画效果
if (key === 'dark' || key === 'light') {
toggleAnimationTheme(domEvent, theme.includes('dark'));

View File

@ -15,6 +15,15 @@ tag: vVERSION
---
## 5.25.3
`2025-05-26`
- 🐞 Fix Typography.Text `delete` property not updating. [#53861](https://github.com/ant-design/ant-design/pull/53861) [@codingories](https://github.com/codingories)
- 🐞 Fix the Statistic.Timer as a subcomponent of Tooltip could not display text prompts properly. [#53888](https://github.com/ant-design/ant-design/pull/53888) [@jin19980928](https://github.com/jin19980928)
- 🐞 Fix the `style` setting of the Upload component did not take effect in more types. [#53877](https://github.com/ant-design/ant-design/pull/53877) [@QuentinHsu](https://github.com/QuentinHsu)
- 💄 Fix the residual focus style after clicking Tabs. [#53901](https://github.com/ant-design/ant-design/pull/53901)
## 5.25.2
`2025-05-19`
@ -24,7 +33,6 @@ tag: vVERSION
- 🐞 Fix Statistic.Timer ssr hydrate issue. [#53817](https://github.com/ant-design/ant-design/pull/53817) [@zombieJ](https://github.com/zombieJ)
- 🐞 Fix Table header blink issue when sticky is enable. [#53803](https://github.com/ant-design/ant-design/pull/53803) [@afc163](https://github.com/afc163)
- 💄 Fix Input.Search `variant="filled"` broken UI. [#53787](https://github.com/ant-design/ant-design/pull/53787) [@afc163](https://github.com/afc163)
- TypeScript
- 🤖 Fix Upload.Dragger does not accept generic parameter problem. [#53842](https://github.com/ant-design/ant-design/pull/53842) [@fnoopv](https://github.com/fnoopv)
- 🤖 Remove Modal invalid properties type definition. [#53808](https://github.com/ant-design/ant-design/pull/53808) [@wanpan11](https://github.com/wanpan11)
@ -67,7 +75,7 @@ tag: vVERSION
- 🛠 MISCRefactor compatible code, use standard web API first, and downgrade to deprecated API when not compatibale [#53107](https://github.com/ant-design/ant-design/pull/53107) [@li-jia-nan](https://github.com/li-jia-nan)
- ⌨️ Opt Tour's `aria-*` props. [#53345](https://github.com/ant-design/ant-design/pull/53345) [@kiner-tang](https://github.com/kiner-tang)
- ⌨️ MISC: Optimized closable component's aria props. [#53410](https://github.com/ant-design/ant-design/pull/53410) [@kiner-tang](https://github.com/kiner-tang)
- 🗑 MISC: Deprecate `destory*` of some components for `destroyOnHidden` prop [#53739](https://github.com/ant-design/ant-design/pull/53739) [@li-jia-nan](https://github.com/li-jia-nan)
- 🗑 MISC: Deprecate `destory*` of some components for `destroyOnHidden` prop. [#53739](https://github.com/ant-design/ant-design/pull/53739) [@li-jia-nan](https://github.com/li-jia-nan)
- 🗑 Deprecate `dropdownRender` of Dropdown for `popupRender` [#53263](https://github.com/ant-design/ant-design/pull/53263) [@aojunhao123](https://github.com/aojunhao123)
- 🗑 Deprecated `dropdown*` props in Cascader [#53133](https://github.com/ant-design/ant-design/pull/53133) [@aojunhao123](https://github.com/aojunhao123)
- 🇨🇿 Add cs_CZ locale for QRCode and ColorPicker. [#53741](https://github.com/ant-design/ant-design/pull/53741) [@malda26](https://github.com/malda26)

View File

@ -15,6 +15,15 @@ tag: vVERSION
---
## 5.25.3
`2025-05-26`
- 🐞 修复 Typography.Text `delete` 属性无法更新的问题。[#53861](https://github.com/ant-design/ant-design/pull/53861) [@codingories](https://github.com/codingories)
- 🐞 修复 Statistic.Timer 组件作为 Tooltip 的子组件无法正常展示文字提示的问题。[#53888](https://github.com/ant-design/ant-design/pull/53888) [@jin19980928](https://github.com/jin19980928)
- 🐞 修复 Upload 组件在更多类型时 `style` 设置未生效的问题。[#53877](https://github.com/ant-design/ant-design/pull/53877) [@QuentinHsu](https://github.com/QuentinHsu)
- 💄 修复 Tabs 点击后有残留 focus 样式的问题。[#53901](https://github.com/ant-design/ant-design/pull/53901)
## 5.25.2
`2025-05-19`
@ -24,7 +33,6 @@ tag: vVERSION
- 🐞 修复 Statistic.Timer ssr 注水渲染不一致的问题。[#53817](https://github.com/ant-design/ant-design/pull/53817) [@zombieJ](https://github.com/zombieJ)
- 🐞 修复 Table 开启 `sticky` 时的一个列头渲染闪烁问题。[#53803](https://github.com/ant-design/ant-design/pull/53803) [@afc163](https://github.com/afc163)
- 💄 修复 Input.Search `variant="filled"` 的样式。[#53787](https://github.com/ant-design/ant-design/pull/53787) [@afc163](https://github.com/afc163)
- TypeScript
- 🤖 修复 Upload.Dragger 不支持泛型参数的问题。[#53842](https://github.com/ant-design/ant-design/pull/53842) [@fnoopv](https://github.com/fnoopv)
- 🤖 移除 Modal 无效的属性类型定义。[#53808](https://github.com/ant-design/ant-design/pull/53808) [@wanpan11](https://github.com/wanpan11)
@ -72,7 +80,6 @@ tag: vVERSION
- 🗑 废弃 Cascader 组件的 `dropdown*` 等属性。[#53133](https://github.com/ant-design/ant-design/pull/53133) [@aojunhao123](https://github.com/aojunhao123)
- 🇨🇿 添加 QRCode 和 ColorPicker 的捷克语cs_CZ支持。[#53741](https://github.com/ant-design/ant-design/pull/53741) [@malda26](https://github.com/malda26)
## 5.24.9
`2025-04-29`

View File

@ -1,7 +1,7 @@
## zh-CN
使用 `dropdownRender` 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容,请直接使用 Popover 组件。
使用 `popupRender` 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容,请直接使用 Popover 组件。
## en-US
Customize the dropdown menu via `dropdownRender`. If you don't need the Menu content, use the Popover component directly.
Customize the dropdown menu via `popupRender`. If you don't need the Menu content, use the Popover component directly.

View File

@ -25,6 +25,7 @@ export interface SearchProps extends InputProps {
) => void;
enterButton?: React.ReactNode;
loading?: boolean;
onPressEnter?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
}
const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
@ -43,6 +44,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
onCompositionStart,
onCompositionEnd,
variant,
onPressEnter: customOnPressEnter,
...restProps
} = props;
@ -85,6 +87,7 @@ const Search = React.forwardRef<InputRef, SearchProps>((props, ref) => {
if (composedRef.current || loading) {
return;
}
customOnPressEnter?.(e);
onSearch(e);
};

View File

@ -219,4 +219,12 @@ describe('Input.Search', () => {
container.querySelector('.ant-input-affix-wrapper')?.classList.contains('className'),
).toBe(false);
});
// https://github.com/ant-design/ant-design/issues/53897
it('should trigger onPressEnter when press enter', () => {
const onPressEnter = jest.fn();
const { container } = render(<Search onPressEnter={onPressEnter} />);
fireEvent.keyDown(container.querySelector('input')!, { key: 'Enter', keyCode: 13 });
expect(onPressEnter).toHaveBeenCalledTimes(1);
});
});

View File

@ -8942,6 +8942,343 @@ exports[`renders components/table/demo/expand.tsx correctly 1`] = `
</div>
`;
exports[`renders components/table/demo/expand-sticky.tsx correctly 1`] = `
<div
class="css-var-test-id ant-table-css-var ant-table-wrapper"
>
<div
class="ant-spin-nested-loading css-var-test-id"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-bordered css-var-test-id ant-table-css-var ant-table-has-fix-start"
>
<div
class="ant-table-container"
>
<div
class="ant-table-content"
>
<table
style="table-layout:auto"
>
<colgroup>
<col
style="width:100px"
/>
<col
class="ant-table-expand-icon-col"
/>
<col
style="width:150px"
/>
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start"
scope="col"
style="inset-inline-start:0;--z-offset:12;--z-offset-reverse:6"
>
Team
</th>
<th
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix ant-table-cell-fix-start"
style="inset-inline-start:0;--z-offset:11;--z-offset-reverse:7"
/>
<th
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start ant-table-cell-fix-start-shadow"
scope="col"
style="inset-inline-start:0;--z-offset:10;--z-offset-reverse:8"
>
Name
</th>
<th
class="ant-table-cell"
scope="col"
>
Age
</th>
<th
class="ant-table-cell"
scope="col"
>
Address
</th>
<th
class="ant-table-cell"
scope="col"
>
Action
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="1"
>
<td
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start"
rowspan="2"
style="inset-inline-start:0;--z-offset:12;--z-offset-reverse:6"
>
Team A
</td>
<td
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix ant-table-cell-fix-start"
style="inset-inline-start:0;--z-offset:11;--z-offset-reverse:7"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start ant-table-cell-fix-start-shadow"
style="inset-inline-start:0;--z-offset:10;--z-offset-reverse:8"
>
John Brown
</td>
<td
class="ant-table-cell"
>
32
</td>
<td
class="ant-table-cell"
>
New York No. 1 Lake Park
</td>
<td
class="ant-table-cell"
>
<a>
Delete
</a>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="2"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix ant-table-cell-fix-start"
style="inset-inline-start:0;--z-offset:11;--z-offset-reverse:7"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start ant-table-cell-fix-start-shadow"
style="inset-inline-start:0;--z-offset:10;--z-offset-reverse:8"
>
Jim Green
</td>
<td
class="ant-table-cell"
>
42
</td>
<td
class="ant-table-cell"
>
London No. 1 Lake Park
</td>
<td
class="ant-table-cell"
>
<a>
Delete
</a>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="3"
>
<td
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start"
rowspan="2"
style="inset-inline-start:0;--z-offset:12;--z-offset-reverse:6"
>
Team B
</td>
<td
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix ant-table-cell-fix-start"
style="inset-inline-start:0;--z-offset:11;--z-offset-reverse:7"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start ant-table-cell-fix-start-shadow"
style="inset-inline-start:0;--z-offset:10;--z-offset-reverse:8"
>
Not Expandable
</td>
<td
class="ant-table-cell"
>
29
</td>
<td
class="ant-table-cell"
>
Jiangsu No. 1 Lake Park
</td>
<td
class="ant-table-cell"
>
<a>
Delete
</a>
</td>
</tr>
<tr
class="ant-table-row ant-table-row-level-0"
data-row-key="4"
>
<td
class="ant-table-cell ant-table-row-expand-icon-cell ant-table-cell-fix ant-table-cell-fix-start"
style="inset-inline-start:0;--z-offset:11;--z-offset-reverse:7"
>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
</td>
<td
class="ant-table-cell ant-table-cell-fix ant-table-cell-fix-start ant-table-cell-fix-start-shadow"
style="inset-inline-start:0;--z-offset:10;--z-offset-reverse:8"
>
Joe Black
</td>
<td
class="ant-table-cell"
>
32
</td>
<td
class="ant-table-cell"
>
Sydney No. 1 Lake Park
</td>
<td
class="ant-table-cell"
>
<a>
Delete
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<ul
class="ant-pagination ant-table-pagination ant-table-pagination-right css-var-test-id"
>
<li
aria-disabled="true"
class="ant-pagination-prev ant-pagination-disabled"
title="Previous Page"
>
<button
class="ant-pagination-item-link"
disabled=""
tabindex="-1"
type="button"
>
<span
aria-label="left"
class="anticon anticon-left"
role="img"
>
<svg
aria-hidden="true"
data-icon="left"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
/>
</svg>
</span>
</button>
</li>
<li
class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
tabindex="0"
title="1"
>
<a
rel="nofollow"
>
1
</a>
</li>
<li
aria-disabled="true"
class="ant-pagination-next ant-pagination-disabled"
title="Next Page"
>
<button
class="ant-pagination-item-link"
disabled=""
tabindex="-1"
type="button"
>
<span
aria-label="right"
class="anticon anticon-right"
role="img"
>
<svg
aria-hidden="true"
data-icon="right"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
/>
</svg>
</span>
</button>
</li>
</ul>
</div>
</div>
</div>
`;
exports[`renders components/table/demo/filter-in-tree.tsx correctly 1`] = `
<div
class="css-var-test-id ant-table-css-var ant-table-wrapper"

View File

@ -0,0 +1,7 @@
## zh-CN
使用 `expandedRowOffset` 自定义展开子表格偏移列数
## en-US
Use `expandedRowOffset` to customize the offset of the expanded sub-table columns index

View File

@ -0,0 +1,81 @@
import React from 'react';
import { Table } from 'antd';
import type { TableColumnsType } from 'antd';
interface DataType {
key: React.Key;
team: string;
name: string;
age: number;
address: string;
description: string;
}
const columns: TableColumnsType<DataType> = [
{
title: 'Team',
dataIndex: 'team',
key: 'team',
onCell: (__, index = 0) => (index % 2 === 0 ? { rowSpan: 2 } : { rowSpan: 0 }),
width: 100,
},
Table.EXPAND_COLUMN,
{ title: 'Name', dataIndex: 'name', key: 'name', width: 150 },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{
title: 'Action',
dataIndex: '',
key: 'x',
render: () => <a>Delete</a>,
},
];
const data: DataType[] = [
{
key: 1,
team: 'Team A',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
},
{
key: 2,
team: 'Team A',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
},
{
key: 3,
team: 'Team B',
name: 'Not Expandable',
age: 29,
address: 'Jiangsu No. 1 Lake Park',
description: 'This not expandable',
},
{
key: 4,
team: 'Team B',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',
},
];
const App: React.FC = () => (
<Table<DataType>
bordered
columns={columns}
expandable={{
expandedRowOffset: 3,
expandedRowRender: (record) => <div>{record.description}</div>,
}}
dataSource={data}
/>
);
export default App;

View File

@ -79,6 +79,7 @@ const columns = [
<code src="./demo/narrow.tsx" debug>size</code>
<code src="./demo/bordered.tsx">border, title and footer</code>
<code src="./demo/expand.tsx">Expandable Row</code>
<code src="./demo/expand-sticky.tsx">Customizable expansion position</code>
<code src="./demo/order-column.tsx">Order Specific Column</code>
<code src="./demo/colspan-rowspan.tsx">colSpan and rowSpan</code>
<code src="./demo/tree-data.tsx">Tree data</code>
@ -258,6 +259,7 @@ Properties for expandable.
| showExpandColumn | Show expand column | boolean | true | 4.18.0 |
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | |
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | |
| expandedRowOffset | The offset of the expanded row, setting this will force the previous columns to be fixed | number | - | 5.26.0 |
### rowSelection

View File

@ -80,6 +80,7 @@ const columns = [
<code src="./demo/narrow.tsx" debug>紧凑型</code>
<code src="./demo/bordered.tsx">带边框</code>
<code src="./demo/expand.tsx">可展开</code>
<code src="./demo/expand-sticky.tsx">可自定义展开位置</code>
<code src="./demo/order-column.tsx">特殊列排序</code>
<code src="./demo/colspan-rowspan.tsx">表格行/列合并</code>
<code src="./demo/tree-data.tsx">树形数据展示</code>
@ -260,6 +261,7 @@ const columns = [
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
| expandedRowOffset | 展开行的偏移列数,设置会后强制将其前面的列设置为固定列 | number | - | 5.26.0 |
### rowSelection

View File

@ -20,12 +20,12 @@ In v5, the combination of Button variants and color would create a repetitive se
/* Sample code. Not used in real world. */
.ant-btn-solid.ant-btn-red {
color: #fff;
background: 1px solid red;
background: red;
}
.ant-btn-solid.ant-btn-blue {
color: #fff;
background: 1px solid blue;
background: blue;
}
.ant-btn-outlined.ant-btn-red {
@ -170,17 +170,13 @@ If there is one of the most enticing properties in CSS, it would be `@scope`. In
```css
/* Theme 1 */
:where(.css-BamBoo) {
.ant-btn {
color: red;
}
:where(.css-BamBoo).ant-btn {
color: red;
}
/* Theme 2 */
:where(.css-LIghT) {
.ant-btn {
color: blue;
}
:where(.css-LIghT).ant-btn {
color: blue;
}
```

View File

@ -20,12 +20,12 @@ Ant Design v6 的开发过程中,由于不需要再考虑 IE 的兼容问题
/* Sample code. Not used in real world. */
.ant-btn-solid.ant-btn-red {
color: #fff;
background: 1px solid red;
background: red;
}
.ant-btn-solid.ant-btn-blue {
color: #fff;
background: 1px solid blue;
background: blue;
}
.ant-btn-outlined.ant-btn-red {
@ -188,17 +188,13 @@ const Sample = () => {
```css
/* Theme 1 */
:where(.css-BamBoo) {
.component-a span {
color: red;
}
:where(.css-BamBoo).component-a span {
color: red;
}
/* Theme 2 */
:where(.css-LIghT) {
.component-b {
color: blue;
}
:where(.css-LIghT).component-b {
color: blue;
}
```

View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "5.25.2",
"version": "5.25.3",
"description": "An enterprise-class UI design language and React components implementation",
"license": "MIT",
"funding": {
@ -134,7 +134,7 @@
"@rc-component/qrcode": "~1.0.0",
"@rc-component/resize-observer": "^1.0.0",
"@rc-component/segmented": "~1.1.0",
"@rc-component/select": "~1.0.3",
"@rc-component/select": "1.0.4",
"@rc-component/steps": "~1.1.0",
"@rc-component/switch": "~1.0.0",
"@rc-component/table": "~1.4.0",
@ -151,7 +151,7 @@
"rc-checkbox": "~3.5.0",
"rc-rate": "~2.13.1",
"rc-slider": "~11.1.8",
"rc-upload": "~4.9.0",
"rc-upload": "~4.9.2",
"rc-util": "^5.44.4",
"scroll-into-view-if-needed": "^3.1.0",
"throttle-debounce": "^5.0.2"
@ -179,7 +179,7 @@
"@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
"@microflash/rehype-figure": "^2.1.1",
"@npmcli/run-script": "^9.0.1",
"@octokit/rest": "^21.0.2",
"@octokit/rest": "^22.0.0",
"@prettier/sync": "^0.5.4",
"@qixian.cs/github-contributors-list": "^2.0.2",
"@size-limit/file": "^11.1.6",