mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-07-26 08:47:29 +08:00
Code Issues Actions 35 Packages Projects Releases Wiki Activity

Merge branch 'master' into feature-merge-master

Browse Source
This commit is contained in:
MadCcc 2023-11-17 14:21:30 +08:00
commit ff462adfa7
34 changed files with 273 additions and 1060 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/_util/__tests__/useZIndex.test.tsx
View File

@ -234,7 +234,8 @@ describe('Test useZIndex hooks', () => {
); );
render(<App />); render(<App />);
expect(fn).toHaveBeenLastCalledWith( expect(fn).toHaveBeenLastCalledWith(
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 3 + 1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
consumerBaseZIndexOffset[key as ZIndexConsumer], consumerBaseZIndexOffset[key as ZIndexConsumer],
); );
}); });
@ -272,7 +273,7 @@ describe('Test useZIndex hooks', () => {
comps.forEach((comp) => { comps.forEach((comp) => {
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker'); const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
const consumerOffset = isColorPicker const consumerOffset = isColorPicker
? 1000 + containerBaseZIndexOffset.Popover ? containerBaseZIndexOffset.Popover
: consumerBaseZIndexOffset[key as ZIndexConsumer]; : consumerBaseZIndexOffset[key as ZIndexConsumer];
expect((comp as HTMLDivElement).style.zIndex).toBe( expect((comp as HTMLDivElement).style.zIndex).toBe(
String( String(
@ -287,11 +288,12 @@ describe('Test useZIndex hooks', () => {
comps.forEach((comp) => { comps.forEach((comp) => {
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker'); const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
const consumerOffset = isColorPicker const consumerOffset = isColorPicker
? 1000 + containerBaseZIndexOffset.Popover ? containerBaseZIndexOffset.Popover
: consumerBaseZIndexOffset[key as ZIndexConsumer]; : consumerBaseZIndexOffset[key as ZIndexConsumer];
expect((comp as HTMLDivElement).style.zIndex).toBe( expect((comp as HTMLDivElement).style.zIndex).toBe(
String( String(
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 + 1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
consumerOffset, consumerOffset,
), ),
); );
@ -317,7 +319,8 @@ describe('Test useZIndex hooks', () => {
expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe( expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
String( String(
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 + 1000 +
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
consumerBaseZIndexOffset[key as ZIndexConsumer], consumerBaseZIndexOffset[key as ZIndexConsumer],
), ),
); );
@ -328,4 +331,28 @@ describe('Test useZIndex hooks', () => {
}); });
}); });
}); });
it('Modal static func should always use max zIndex', async () => {
jest.useFakeTimers();
const instance = Modal.confirm({
title: 'bamboo',
content: 'little',
});
await waitFakeTimer();
expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
zIndex: '2000',
});
instance.destroy();
await waitFakeTimer();
// Clean up for static method
document.body.innerHTML = '';
jest.useRealTimers();
});
}); });

30
components/_util/hooks/useZIndex.tsx
View File

@ -7,13 +7,23 @@ export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'T
export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu'; export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu';
// Z-Index control range
// Container: 1000 + offset 100 (max base + 10 * offset = 2000)
// Popover: offset 50
// Notification: Container Max zIndex + componentOffset
const CONTAINER_OFFSET = 100;
const CONTAINER_OFFSET_MAX_COUNT = 10;
export const CONTAINER_MAX_OFFSET = CONTAINER_OFFSET * CONTAINER_OFFSET_MAX_COUNT;
export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = { export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
Modal: 0, Modal: CONTAINER_OFFSET,
Drawer: 0, Drawer: CONTAINER_OFFSET,
Popover: 70, Popover: CONTAINER_OFFSET,
Popconfirm: 70, Popconfirm: CONTAINER_OFFSET,
Tooltip: 70, Tooltip: CONTAINER_OFFSET,
Tour: 70, Tour: CONTAINER_OFFSET,
}; };
export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = { export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
SelectLike: 50, SelectLike: 50,
@ -35,7 +45,13 @@ export function useZIndex(
const isContainer = isContainerType(componentType); const isContainer = isContainerType(componentType);
let zIndex = parentZIndex ?? 0; let zIndex = parentZIndex ?? 0;
if (isContainer) { if (isContainer) {
zIndex += token.zIndexPopupBase + containerBaseZIndexOffset[componentType]; zIndex +=
// Use preset token zIndex by default but not stack when has parent container
(parentZIndex ? 0 : token.zIndexPopupBase) +
// Container offset
containerBaseZIndexOffset[componentType];
zIndex = Math.min(zIndex, token.zIndexPopupBase + CONTAINER_MAX_OFFSET);
} else { } else {
zIndex += consumerBaseZIndexOffset[componentType]; zIndex += consumerBaseZIndexOffset[componentType];
} }

8
components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -439,7 +439,7 @@ Array [
</span> </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" 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; z-index: 2140;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
> >
<div <div
class="ant-tooltip-arrow" class="ant-tooltip-arrow"
@ -822,7 +822,7 @@ Array [
</span> </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" 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; z-index: 2140;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
> >
<div <div
class="ant-tooltip-arrow" class="ant-tooltip-arrow"
@ -948,7 +948,7 @@ Array [
</span> </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" 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; z-index: 2140;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
> >
<div <div
class="ant-tooltip-arrow" class="ant-tooltip-arrow"
@ -1074,7 +1074,7 @@ Array [
</span> </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" 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; z-index: 2140;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
> >
<div <div
class="ant-tooltip-arrow" class="ant-tooltip-arrow"

4
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -898,6 +898,7 @@ Array [
<a <a
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only" class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
href="https://www.google.com" href="https://www.google.com"
tabindex="0"
> >
<span <span
class="ant-btn-icon" class="ant-btn-icon"
@ -1072,6 +1073,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
<a <a
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"
href="https://ant.design/index-cn" href="https://ant.design/index-cn"
tabindex="0"
> >
<span> <span>
Href Primary Href Primary
@ -1080,6 +1082,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
<a <a
class="ant-btn ant-btn-primary ant-btn-disabled" class="ant-btn ant-btn-primary ant-btn-disabled"
href="https://ant.design/index-cn" href="https://ant.design/index-cn"
tabindex="-1"
> >
<span> <span>
Href Primary(disabled) Href Primary(disabled)
@ -1550,6 +1553,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
<a <a
class="ant-btn ant-btn-default ant-btn-icon-only" class="ant-btn ant-btn-default ant-btn-icon-only"
href="https://www.google.com" href="https://www.google.com"
tabindex="0"
> >
<span <span
class="ant-btn-icon" class="ant-btn-icon"

4
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -805,6 +805,7 @@ Array [
<a <a
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only" class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
href="https://www.google.com" href="https://www.google.com"
tabindex="0"
> >
<span <span
class="ant-btn-icon" class="ant-btn-icon"
@ -977,6 +978,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
<a <a
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"
href="https://ant.design/index-cn" href="https://ant.design/index-cn"
tabindex="0"
> >
<span> <span>
Href Primary Href Primary
@ -985,6 +987,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
<a <a
class="ant-btn ant-btn-primary ant-btn-disabled" class="ant-btn ant-btn-primary ant-btn-disabled"
href="https://ant.design/index-cn" href="https://ant.design/index-cn"
tabindex="-1"
> >
<span> <span>
Href Primary(disabled) Href Primary(disabled)
@ -1375,6 +1378,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
<a <a
class="ant-btn ant-btn-default ant-btn-icon-only" class="ant-btn ant-btn-default ant-btn-icon-only"
href="https://www.google.com" href="https://www.google.com"
tabindex="0"
> >
<span <span
class="ant-btn-icon" class="ant-btn-icon"

1
components/button/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -383,6 +383,7 @@ exports[`Button should support link button 1`] = `
<a <a
class="ant-btn ant-btn-default" class="ant-btn ant-btn-default"
href="https://ant.design" href="https://ant.design"
tabindex="0"
target="_blank" target="_blank"
> >
<span> <span>

1
components/button/button.tsx
View File

@ -265,6 +265,7 @@ const InternalButton: React.ForwardRefRenderFunction<
style={fullStyle} style={fullStyle}
onClick={handleClick} onClick={handleClick}
ref={buttonRef as React.Ref<HTMLAnchorElement>} ref={buttonRef as React.Ref<HTMLAnchorElement>}
tabIndex={mergedDisabled ? -1 : 0}
> >
{iconNode} {iconNode}
{kids} {kids}

48
components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -159,7 +159,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -542,7 +542,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -927,7 +927,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -1310,7 +1310,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -1698,7 +1698,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -2060,7 +2060,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -2385,7 +2385,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -2793,7 +2793,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -3419,7 +3419,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -4069,7 +4069,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -4900,7 +4900,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -5290,7 +5290,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -6050,7 +6050,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 150; width: 68px;"
> >
<div> <div>
<div <div
@ -6453,7 +6453,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -6833,7 +6833,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -7213,7 +7213,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -7606,7 +7606,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -7991,7 +7991,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -8376,7 +8376,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -8772,7 +8772,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -9159,7 +9159,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -9563,7 +9563,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -9944,7 +9944,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div
@ -10327,7 +10327,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div

12
components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
View File

@ -1049,7 +1049,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div> <div>
<div <div
@ -1226,7 +1226,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div> <div>
<div <div
@ -1408,7 +1408,7 @@ Array [
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div> <div>
<div <div
@ -1635,7 +1635,7 @@ Array [
</div> </div>
<div <div
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft" class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-range ant-picker-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1050;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div <div
class="ant-picker-range-wrapper ant-picker-date-range-wrapper" class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
@ -2867,7 +2867,7 @@ Array [
</button> </button>
<div <div
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline" class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
style="z-index: 2000;" style="z-index: 1200;"
tabindex="-1" tabindex="-1"
> >
<div <div
@ -3537,7 +3537,7 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
Some contents... Some contents...
<div <div
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline" class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
style="z-index: 2000;" style="z-index: 1200;"
tabindex="-1" tabindex="-1"
> >
<div <div

1
components/dropdown/__tests__/__snapshots__/dropdown-button.test.tsx.snap
View File

@ -46,6 +46,7 @@ exports[`DropdownButton should support href like Button 1`] = `
<a <a
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item" class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
href="https://ant.design" href="https://ant.design"
tabindex="0"
/> />
<button <button
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger" class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"

1
components/flex/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -293,6 +293,7 @@ exports[`renders components/flex/demo/combination.tsx extend context correctly 1
<a <a
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"
href="https://ant.design" href="https://ant.design"
tabindex="0"
target="_blank" target="_blank"
> >
<span> <span>

1
components/flex/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -289,6 +289,7 @@ exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
<a <a
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"
href="https://ant.design" href="https://ant.design"
tabindex="0"
target="_blank" target="_blank"
> >
<span> <span>

2
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -21299,7 +21299,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div

5
components/layout/index.ts
View File

@ -1,5 +1,5 @@
import InternalLayout, { Content, Footer, Header } from './layout'; import InternalLayout, { Content, Footer, Header } from './layout';
import Sider from './Sider'; import Sider, { SiderContext } from './Sider';
export type { BasicProps as LayoutProps } from './layout'; export type { BasicProps as LayoutProps } from './layout';
export type { SiderProps } from './Sider'; export type { SiderProps } from './Sider';
@ -11,6 +11,8 @@ type CompoundedComponent = InternalLayoutType & {
Footer: typeof Footer; Footer: typeof Footer;
Content: typeof Content; Content: typeof Content;
Sider: typeof Sider; Sider: typeof Sider;
/** @private Internal Context. Do not use in your production. */
_InternalSiderContext: typeof SiderContext;
}; };
const Layout = InternalLayout as CompoundedComponent; const Layout = InternalLayout as CompoundedComponent;
@ -19,5 +21,6 @@ Layout.Header = Header;
Layout.Footer = Footer; Layout.Footer = Footer;
Layout.Content = Content; Layout.Content = Content;
Layout.Sider = Sider; Layout.Sider = Sider;
Layout._InternalSiderContext = SiderContext;
export default Layout; export default Layout;

734
components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1227,740 +1227,6 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct
</div> </div>
</div> </div>
</div> </div>
<div
class="ant-space-item"
>
<ul
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
class="ant-menu-item ant-menu-item-selected"
data-menu-id="rc-menu-uuid-test-1"
role="menuitem"
tabindex="-1"
>
<span
aria-label="pie-chart"
class="anticon anticon-pie-chart ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="pie-chart"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Option 1
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Option 1
</div>
</div>
</div>
<li
class="ant-menu-item"
data-menu-id="rc-menu-uuid-test-2"
role="menuitem"
tabindex="-1"
>
<span
aria-label="desktop"
class="anticon anticon-desktop ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="desktop"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Option 2
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Option 2
</div>
</div>
</div>
<li
class="ant-menu-item"
data-menu-id="rc-menu-uuid-test-3"
role="menuitem"
tabindex="-1"
>
<span
aria-label="container"
class="anticon anticon-container ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="container"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Option 3
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Option 3
</div>
</div>
</div>
<li
class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
role="none"
>
<div
aria-controls="rc-menu-uuid-test-sub1-popup"
aria-expanded="true"
aria-haspopup="true"
class="ant-menu-submenu-title"
data-menu-id="rc-menu-uuid-test-sub1"
role="menuitem"
tabindex="-1"
>
<span
aria-label="mail"
class="anticon anticon-mail ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Navigation One
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
<div
class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
id="rc-menu-uuid-test-sub1-popup"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-5"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 5
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-6"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 6
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-7"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 7
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-8"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 8
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</ul>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-vertical"
role="none"
>
<div
aria-controls="rc-menu-uuid-test-sub2-popup"
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
data-menu-id="rc-menu-uuid-test-sub2"
role="menuitem"
tabindex="-1"
>
<span
aria-label="appstore"
class="anticon anticon-appstore ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="appstore"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Navigation Two
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
<div
class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
id="rc-menu-uuid-test-sub2-popup"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-9"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 9
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-10"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 10
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-menu-submenu ant-menu-submenu-vertical"
role="none"
>
<div
aria-controls="rc-menu-uuid-test-sub3-popup"
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
data-menu-id="rc-menu-uuid-test-sub3"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Submenu
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
<div
class="ant-menu-submenu ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-menu-submenu-popup ant-menu ant-menu-dark ant-menu-submenu-placement-rightTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<ul
class="ant-menu ant-menu-sub ant-menu-vertical"
data-menu-list="true"
id="rc-menu-uuid-test-sub3-popup"
role="menu"
>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-11"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 11
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<li
class="ant-menu-item ant-menu-item-only-child"
data-menu-id="rc-menu-uuid-test-12"
role="menuitem"
tabindex="-1"
>
<span
class="ant-menu-title-content"
>
Option 12
</span>
</li>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
<div
aria-hidden="true"
style="display: none;"
>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Option 1
</div>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Option 2
</div>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
>
Option 3
</div>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-tooltip-content"
>
<div
class="ant-tooltip-inner"
role="tooltip"
/>
</div>
</div>
</div>
</div>
</div> </div>
`; `;

185
components/menu/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -422,191 +422,6 @@ exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
style="display:none" style="display:none"
/> />
</div> </div>
<div
class="ant-space-item"
>
<ul
class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark ant-menu-inline-collapsed"
data-menu-list="true"
role="menu"
tabindex="0"
>
<li
class="ant-menu-item ant-menu-item-selected"
role="menuitem"
tabindex="-1"
>
<span
aria-label="pie-chart"
class="anticon anticon-pie-chart ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="pie-chart"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Option 1
</span>
</li>
<li
class="ant-menu-item"
role="menuitem"
tabindex="-1"
>
<span
aria-label="desktop"
class="anticon anticon-desktop ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="desktop"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 140H96c-17.7 0-32 14.3-32 32v496c0 17.7 14.3 32 32 32h380v112H304c-8.8 0-16 7.2-16 16v48c0 4.4 3.6 8 8 8h432c4.4 0 8-3.6 8-8v-48c0-8.8-7.2-16-16-16H548V700h380c17.7 0 32-14.3 32-32V172c0-17.7-14.3-32-32-32zm-40 488H136V212h752v416z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Option 2
</span>
</li>
<li
class="ant-menu-item"
role="menuitem"
tabindex="-1"
>
<span
aria-label="container"
class="anticon anticon-container ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="container"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M832 64H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V96c0-17.7-14.3-32-32-32zm-40 824H232V687h97.9c11.6 32.8 32 62.3 59.1 84.7 34.5 28.5 78.2 44.3 123 44.3s88.5-15.7 123-44.3c27.1-22.4 47.5-51.9 59.1-84.7H792v-63H643.6l-5.2 24.7C626.4 708.5 573.2 752 512 752s-114.4-43.5-126.5-103.3l-5.2-24.7H232V136h560v752zM320 341h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8zm0 160h384c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8H320c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Option 3
</span>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-vertical ant-menu-submenu-open"
role="none"
>
<div
aria-expanded="true"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="menuitem"
tabindex="-1"
>
<span
aria-label="mail"
class="anticon anticon-mail ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="mail"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Navigation One
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
<li
class="ant-menu-submenu ant-menu-submenu-vertical"
role="none"
>
<div
aria-expanded="false"
aria-haspopup="true"
class="ant-menu-submenu-title"
role="menuitem"
tabindex="-1"
>
<span
aria-label="appstore"
class="anticon anticon-appstore ant-menu-item-icon"
role="img"
>
<svg
aria-hidden="true"
data-icon="appstore"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
/>
</svg>
</span>
<span
class="ant-menu-title-content"
>
Navigation Two
</span>
<i
class="ant-menu-submenu-arrow"
/>
</div>
</li>
</ul>
<div
aria-hidden="true"
style="display:none"
/>
</div>
</div> </div>
`; `;

22
components/menu/demo/component-token.tsx
View File

@ -1,4 +1,3 @@
import React, { useState } from 'react';
import { import {
AppstoreOutlined, AppstoreOutlined,
ContainerOutlined, ContainerOutlined,
@ -7,6 +6,7 @@ import {
PieChartOutlined, PieChartOutlined,
SettingOutlined, SettingOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import React, { useState } from 'react';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { ConfigProvider, Menu, Space } from 'antd'; import { ConfigProvider, Menu, Space } from 'antd';
@ -120,7 +120,6 @@ const App: React.FC = () => {
components: { components: {
Menu: { Menu: {
horizontalItemBorderRadius: 6, horizontalItemBorderRadius: 6,
popupBg: 'red',
horizontalItemHoverBg: '#f5f5f5', horizontalItemHoverBg: '#f5f5f5',
}, },
}, },
@ -137,7 +136,6 @@ const App: React.FC = () => {
darkSubMenuItemBg: '#faad14', darkSubMenuItemBg: '#faad14',
darkItemSelectedColor: '#ffccc7', darkItemSelectedColor: '#ffccc7',
darkItemSelectedBg: '#52c41a', darkItemSelectedBg: '#52c41a',
darkPopupBg: 'red',
}, },
}, },
}} }}
@ -153,24 +151,6 @@ const App: React.FC = () => {
}} }}
/> />
</ConfigProvider> </ConfigProvider>
<ConfigProvider
theme={{
components: {
Menu: {
darkPopupBg: 'red',
},
},
}}
>
<Menu
inlineCollapsed
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
items={items2}
/>
</ConfigProvider>
</Space> </Space>
); );
}; };

9
components/menu/style/index.tsx
View File

@ -295,12 +295,6 @@ export interface ComponentToken {
collapsedIconSize: number; collapsedIconSize: number;
// Dark // Dark
/**
* @desc 暗色模式下的浮层菜单的背景颜色
* @descEN The background color of the overlay menu in dark mode.
*/
darkPopupBg: string;
/** /**
* @desc 暗色模式下的菜单项文字颜色 * @desc 暗色模式下的菜单项文字颜色
* @descEN Color of menu item text in dark mode * @descEN Color of menu item text in dark mode
@ -958,7 +952,6 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
darkItemColor, darkItemColor,
darkDangerItemColor, darkDangerItemColor,
darkItemBg, darkItemBg,
darkPopupBg,
darkSubMenuItemBg, darkSubMenuItemBg,
darkItemSelectedColor, darkItemSelectedColor,
darkItemSelectedBg, darkItemSelectedBg,
@ -994,7 +987,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
groupTitleColor: darkGroupTitleColor, groupTitleColor: darkGroupTitleColor,
itemSelectedColor: darkItemSelectedColor, itemSelectedColor: darkItemSelectedColor,
itemBg: darkItemBg, itemBg: darkItemBg,
popupBg: darkPopupBg || darkItemBg, popupBg: darkItemBg,
subMenuItemBg: darkSubMenuItemBg, subMenuItemBg: darkSubMenuItemBg,
itemActiveBg: 'transparent', itemActiveBg: 'transparent',
itemSelectedBg: darkItemSelectedBg, itemSelectedBg: darkItemSelectedBg,

5
components/menu/style/theme.tsx
View File

@ -1,6 +1,5 @@
import { unit } from '@ant-design/cssinjs'; import { unit } from '@ant-design/cssinjs';
import type { CSSInterpolation } from '@ant-design/cssinjs'; import type { CSSInterpolation } from '@ant-design/cssinjs';
import type { MenuToken } from '.'; import type { MenuToken } from '.';
import { genFocusOutline } from '../../style'; import { genFocusOutline } from '../../style';
@ -160,10 +159,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
backgroundColor: menuSubMenuBg, backgroundColor: menuSubMenuBg,
}, },
[`&${componentCls}-submenu-popup > ${componentCls}`]: {
backgroundColor: popupBg,
},
[`&${componentCls}-popup > ${componentCls}`]: { [`&${componentCls}-popup > ${componentCls}`]: {
backgroundColor: popupBg, backgroundColor: popupBg,
}, },

3
components/message/style/index.tsx
View File

@ -3,6 +3,7 @@ import type { CSSProperties } from 'react';
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs';
import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
import { resetComponent } from '../../style'; import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';
@ -186,7 +187,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
}; };
export const prepareComponentToken: GetDefaultToken<'Message'> = (token) => ({ export const prepareComponentToken: GetDefaultToken<'Message'> = (token) => ({
zIndexPopup: token.zIndexPopupBase + 10, zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
contentBg: token.colorBgElevated, contentBg: token.colorBgElevated,
contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${ contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
token.paddingSM token.paddingSM

110
components/modal/ConfirmDialog.tsx
View File

@ -5,11 +5,13 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled'; import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
import classNames from 'classnames'; import classNames from 'classnames';
import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
import { getTransitionName } from '../_util/motion'; import { getTransitionName } from '../_util/motion';
import { devUseWarning } from '../_util/warning'; import { devUseWarning } from '../_util/warning';
import type { ThemeConfig } from '../config-provider'; import type { ThemeConfig } from '../config-provider';
import ConfigProvider from '../config-provider'; import ConfigProvider from '../config-provider';
import { useLocale } from '../locale'; import { useLocale } from '../locale';
import useToken from '../theme/useToken';
import CancelBtn from './components/ConfirmCancelBtn'; import CancelBtn from './components/ConfirmCancelBtn';
import OkBtn from './components/ConfirmOkBtn'; import OkBtn from './components/ConfirmOkBtn';
import type { ModalContextProps } from './context'; import type { ModalContextProps } from './context';
@ -31,6 +33,10 @@ export interface ConfirmDialogProps extends ModalFuncProps {
autoFocusButton?: null | 'ok' | 'cancel'; autoFocusButton?: null | 'ok' | 'cancel';
rootPrefixCls?: string; rootPrefixCls?: string;
iconPrefixCls?: string; iconPrefixCls?: string;
/**
* Only passed by static method
*/
theme?: ThemeConfig; theme?: ThemeConfig;
/** @private Internal Usage. Do not override this */ /** @private Internal Usage. Do not override this */
@ -177,8 +183,6 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
prefixCls, prefixCls,
wrapClassName, wrapClassName,
rootPrefixCls, rootPrefixCls,
iconPrefixCls,
theme,
bodyStyle, bodyStyle,
closable = false, closable = false,
closeIcon, closeIcon,
@ -215,6 +219,63 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
props.className, props.className,
); );
// ========================= zIndex =========================
const [, token] = useToken();
const mergedZIndex = React.useMemo(() => {
if (zIndex !== undefined) {
return zIndex;
}
// Static always use max zIndex
return token.zIndexPopupBase + CONTAINER_MAX_OFFSET;
}, [zIndex, token]);
// ========================= Render =========================
return (
<Dialog
prefixCls={prefixCls}
className={classString}
wrapClassName={classNames(
{ [`${confirmPrefixCls}-centered`]: !!props.centered },
wrapClassName,
)}
onCancel={() => {
close?.({ triggerCancel: true });
onConfirm?.(false);
}}
open={open}
title=""
footer={null}
transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(rootPrefixCls || '', 'fade', props.maskTransitionName)}
mask={mask}
maskClosable={maskClosable}
style={style}
styles={{
body: bodyStyle,
mask: maskStyle,
...styles,
}}
width={width}
zIndex={mergedZIndex}
afterClose={afterClose}
keyboard={keyboard}
centered={centered}
getContainer={getContainer}
closable={closable}
closeIcon={closeIcon}
modalRender={modalRender}
focusTriggerAfterClose={focusTriggerAfterClose}
>
<ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
</Dialog>
);
};
const ConfirmDialogWrapper: React.FC<ConfirmDialogProps> = (props) => {
const { rootPrefixCls, iconPrefixCls, direction, theme } = props;
return ( return (
<ConfigProvider <ConfigProvider
prefixCls={rootPrefixCls} prefixCls={rootPrefixCls}
@ -222,53 +283,14 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
direction={direction} direction={direction}
theme={theme} theme={theme}
> >
<Dialog <ConfirmDialog {...props} />
prefixCls={prefixCls}
className={classString}
wrapClassName={classNames(
{ [`${confirmPrefixCls}-centered`]: !!props.centered },
wrapClassName,
)}
onCancel={() => {
close?.({ triggerCancel: true });
onConfirm?.(false);
}}
open={open}
title=""
footer={null}
transitionName={getTransitionName(rootPrefixCls || '', 'zoom', props.transitionName)}
maskTransitionName={getTransitionName(
rootPrefixCls || '',
'fade',
props.maskTransitionName,
)}
mask={mask}
maskClosable={maskClosable}
style={style}
styles={{
body: bodyStyle,
mask: maskStyle,
...styles,
}}
width={width}
zIndex={zIndex}
afterClose={afterClose}
keyboard={keyboard}
centered={centered}
getContainer={getContainer}
closable={closable}
closeIcon={closeIcon}
modalRender={modalRender}
focusTriggerAfterClose={focusTriggerAfterClose}
>
<ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
</Dialog>
</ConfigProvider> </ConfigProvider>
); );
}; };
if (process.env.NODE_ENV !== 'production') { if (process.env.NODE_ENV !== 'production') {
ConfirmDialog.displayName = 'ConfirmDialog'; ConfirmDialog.displayName = 'ConfirmDialog';
ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
} }
export default ConfirmDialog; export default ConfirmDialogWrapper;

2
components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -674,7 +674,7 @@ exports[`renders components/modal/demo/nested.tsx extend context correctly 1`] =
aria-checked="false" aria-checked="false"
class="ant-switch" class="ant-switch"
role="switch" role="switch"
style="position: relative; z-index: 4000;" style="position: relative; z-index: 0;"
type="button" type="button"
> >
<div <div

2
components/modal/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -644,7 +644,7 @@ exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
aria-checked="false" aria-checked="false"
class="ant-switch" class="ant-switch"
role="switch" role="switch"
style="position:relative;z-index:4000" style="position:relative;z-index:0"
type="button" type="button"
> >
<div <div

5
components/modal/__tests__/hook.test.tsx
View File

@ -35,6 +35,7 @@ describe('Modal.hook', () => {
<Button <Button
onClick={() => { onClick={() => {
instance = modal.confirm({ instance = modal.confirm({
zIndex: 903,
content: ( content: (
<Context.Consumer> <Context.Consumer>
{(name) => <div className="test-hook">{name}</div>} {(name) => <div className="test-hook">{name}</div>}
@ -55,6 +56,10 @@ describe('Modal.hook', () => {
expect(document.body.querySelectorAll('.ant-btn').length).toBeTruthy(); expect(document.body.querySelectorAll('.ant-btn').length).toBeTruthy();
expect(document.body.querySelectorAll('.ant-modal-body').length).toBeTruthy(); expect(document.body.querySelectorAll('.ant-modal-body').length).toBeTruthy();
expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
zIndex: '903',
});
// Update instance // Update instance
act(() => { act(() => {
instance.update({ instance.update({

51
components/modal/demo/nested.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Modal, Select, Switch } from 'antd'; import { Button, message, Modal, notification, Select, Space, Switch } from 'antd';
const options = [ const options = [
{ {
@ -12,13 +12,16 @@ const options = [
}, },
]; ];
const App: React.FC = () => { const Demo: React.FC = () => {
const [messageInstance, messageHolder] = message.useMessage();
const [notificationInstance, notificationHolder] = notification.useNotification();
const [isModalOpen, setIsModalOpen] = useState<boolean>(false); const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
return ( return (
<> <>
<Switch <Switch
style={{ position: 'relative', zIndex: 4000 }} style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}
checkedChildren="Open" checkedChildren="Open"
unCheckedChildren="Close" unCheckedChildren="Close"
onChange={(open) => setIsModalOpen(open)} onChange={(open) => setIsModalOpen(open)}
@ -78,12 +81,50 @@ const App: React.FC = () => {
}, },
}} }}
> >
<Select open value="1" options={options} /> <Space wrap>
<Button
onClick={() => {
Modal.confirm({
title: 'Are you OK?',
content: 'I am OK',
});
}}
>
Static Confirm
</Button>
<Button
onClick={() => {
message.success('Hello World');
notification.success({
message: 'Hello World',
});
}}
>
Static Message, Notification
</Button>
<Button
onClick={() => {
messageInstance.success('Hello World');
notificationInstance.success({
message: 'Hello World',
});
}}
>
Hook Message, Notification
</Button>
<Select open value="1" options={options} />
</Space>
</Modal> </Modal>
</Modal> </Modal>
</Modal> </Modal>
{messageHolder}
{notificationHolder}
</> </>
); );
}; };
export default App; export default Demo;

6
components/notification/style/index.ts
View File

@ -1,7 +1,9 @@
import type { CSSObject } from '@ant-design/cssinjs'; import type { CSSObject } from '@ant-design/cssinjs';
import { Keyframes, unit } from '@ant-design/cssinjs'; import { Keyframes, unit } from '@ant-design/cssinjs';
import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
import { resetComponent } from '../../style'; import { resetComponent } from '../../style';
import type { FullToken, GenerateStyle, AliasToken } from '../../theme/internal'; import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import genNotificationPlacementStyle from './placement'; import genNotificationPlacementStyle from './placement';
import genStackStyle from './stack'; import genStackStyle from './stack';
@ -258,7 +260,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
// ============================== Export ============================== // ============================== Export ==============================
export const prepareComponentToken = (token: AliasToken) => ({ export const prepareComponentToken = (token: AliasToken) => ({
zIndexPopup: token.zIndexPopupBase + 50, zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
width: 384, width: 384,
closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent, closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
}); });

2
components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -813,7 +813,7 @@ Array [
</button>, </button>,
<div <div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top" class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
> >
<div <div
class="ant-popover-arrow" class="ant-popover-arrow"

4
components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
</div> </div>
<div <div
class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft" class="ant-picker-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-picker-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div <div
class="ant-picker-panel-container" class="ant-picker-panel-container"
@ -11388,7 +11388,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div> <div>
<div <div

2
components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1566,7 +1566,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-empty ant-select-dropdown-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150;"
> >
<div> <div>
<div <div

2
components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -275,7 +275,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
</div> </div>
<div <div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight" class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1120; width: 68px;" style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
> >
<div> <div>
<div <div

12
docs/react/use-with-next.en-US.md
View File

@ -58,6 +58,12 @@ If you are using the App Router in Next.js and using antd as your component libr
1. Install `@ant-design/cssinjs` 1. Install `@ant-design/cssinjs`
> Notes for developers
>
> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
>
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies> <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
2. Create `lib/AntdRegistry.tsx` 2. Create `lib/AntdRegistry.tsx`
@ -160,6 +166,12 @@ If you are using the Pages Router in Next.js and using antd as your component li
1. Install `@ant-design/cssinjs` 1. Install `@ant-design/cssinjs`
> Notes for developers
>
> Please note that when you install `@ant-design/cssinjs`, you must ensure that the version is consistent with the version of `@ant-design/cssinjs` in local `node_modules` of `antd`, otherwise, multiple React instances will appear, resulting in ctx being unable to be read correctly. (Tips: you can use `npm ls @ant-design/cssinjs` command to view the local version)
>
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies> <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
2. Rewrite `pages/_document.tsx` 2. Rewrite `pages/_document.tsx`

12
docs/react/use-with-next.zh-CN.md
View File

@ -58,6 +58,12 @@ export default Home;
1. 安装 `@ant-design/cssinjs` 1. 安装 `@ant-design/cssinjs`
> 开发者注意事项：
>
> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
>
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies> <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
2. 创建 `lib/AntdRegistry.tsx` 2. 创建 `lib/AntdRegistry.tsx`
@ -160,6 +166,12 @@ export default HomePage;
1. 安装 `@ant-design/cssinjs` 1. 安装 `@ant-design/cssinjs`
> 开发者注意事项：
>
> 请注意，安装 `@ant-design/cssinjs` 时必须确保版本号跟 `antd` 本地的 `node_modules` 中的 `@ant-design/cssinjs` 版本保持一致，否则会出现多个 React 实例，导致无法正确的读取 ctx。（Tips: 你可以通过 `npm ls @ant-design/cssinjs` 命令查看本地版本）
>
> <img width="514" alt="image" src="https://github.com/ant-design/ant-design/assets/49217418/aad6e9e2-62cc-4c89-a0b6-38c592e3c648">
<InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies> <InstallDependencies npm='$ npm install @ant-design/cssinjs --save' yarn='$ yarn add @ant-design/cssinjs' pnpm='$ pnpm install @ant-design/cssinjs --save'></InstallDependencies>
2. 改写 `pages/_document.tsx` 2. 改写 `pages/_document.tsx`

9
scripts/ci-mock-project-build.sh
View File

@ -3,14 +3,23 @@
# clean up # clean up
rm -rf ~tmpProj/ rm -rf ~tmpProj/
# clean up `packageManager` since this will block yarn install
echo "Cleaning up package.json..."
sed -i '/packageManager/d' 'package.json' # linux no need for `''`
sed -i '' '/packageManager/d' 'package.json' # mac need `''`
# clone project # clone project
echo "Cloning project..."
git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1 git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1
# change directory # change directory
echo "Changing directory..."
cd ~tmpProj/examples/with-nextjs-inline-style cd ~tmpProj/examples/with-nextjs-inline-style
# install dependencies # install dependencies
echo "Installing dependencies..."
yarn yarn
# build # build
echo "Building..."
yarn run build yarn run build

1
scripts/post-script.ts
View File

@ -49,6 +49,7 @@ const DEPRECIATED_VERSION = {
'5.9.1': ['https://github.com/ant-design/ant-design/issues/44907'], '5.9.1': ['https://github.com/ant-design/ant-design/issues/44907'],
'5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'], '5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'],
'5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'], '5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'],
'5.11.1': ['https://github.com/ant-design/ant-design/issues/45883'],
} as const; } as const;
function matchDeprecated(v: string) { function matchDeprecated(v: string) {