mirror of
https://github.com/ant-design/ant-design.git
synced 2025-07-25 07:56:54 +08:00
Merge branch 'master' into feature-merge-master
This commit is contained in:
MadCcc
commit
ff462adfa7
@ -234,7 +234,8 @@ describe('Test useZIndex hooks', () => {
|
||||
);
|
||||
render(<App />);
|
||||
expect(fn).toHaveBeenLastCalledWith(
|
||||
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 3 +
|
||||
1000 +
|
||||
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 3 +
|
||||
consumerBaseZIndexOffset[key as ZIndexConsumer],
|
||||
);
|
||||
});
|
||||
@ -272,7 +273,7 @@ describe('Test useZIndex hooks', () => {
|
||||
comps.forEach((comp) => {
|
||||
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
|
||||
const consumerOffset = isColorPicker
|
||||
? 1000 + containerBaseZIndexOffset.Popover
|
||||
? containerBaseZIndexOffset.Popover
|
||||
: consumerBaseZIndexOffset[key as ZIndexConsumer];
|
||||
expect((comp as HTMLDivElement).style.zIndex).toBe(
|
||||
String(
|
||||
@ -287,11 +288,12 @@ describe('Test useZIndex hooks', () => {
|
||||
comps.forEach((comp) => {
|
||||
const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker');
|
||||
const consumerOffset = isColorPicker
|
||||
? 1000 + containerBaseZIndexOffset.Popover
|
||||
? containerBaseZIndexOffset.Popover
|
||||
: consumerBaseZIndexOffset[key as ZIndexConsumer];
|
||||
expect((comp as HTMLDivElement).style.zIndex).toBe(
|
||||
String(
|
||||
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
|
||||
1000 +
|
||||
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
|
||||
consumerOffset,
|
||||
),
|
||||
);
|
||||
@ -317,7 +319,8 @@ describe('Test useZIndex hooks', () => {
|
||||
|
||||
expect((document.querySelector(selector3) as HTMLDivElement).style.zIndex).toBe(
|
||||
String(
|
||||
(1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 +
|
||||
1000 +
|
||||
containerBaseZIndexOffset[containerKey as ZIndexContainer] * 2 +
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -7,13 +7,23 @@ export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'T
|
||||
|
||||
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> = {
|
||||
Modal: 0,
|
||||
Drawer: 0,
|
||||
Popover: 70,
|
||||
Popconfirm: 70,
|
||||
Tooltip: 70,
|
||||
Tour: 70,
|
||||
Modal: CONTAINER_OFFSET,
|
||||
Drawer: CONTAINER_OFFSET,
|
||||
Popover: CONTAINER_OFFSET,
|
||||
Popconfirm: CONTAINER_OFFSET,
|
||||
Tooltip: CONTAINER_OFFSET,
|
||||
Tour: CONTAINER_OFFSET,
|
||||
};
|
||||
export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
|
||||
SelectLike: 50,
|
||||
@ -35,7 +45,13 @@ export function useZIndex(
|
||||
const isContainer = isContainerType(componentType);
|
||||
let zIndex = parentZIndex ?? 0;
|
||||
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 {
|
||||
zIndex += consumerBaseZIndexOffset[componentType];
|
||||
}
|
||||
|
||||
@ -439,7 +439,7 @@ Array [
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
@ -822,7 +822,7 @@ Array [
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
@ -948,7 +948,7 @@ Array [
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
@ -1074,7 +1074,7 @@ Array [
|
||||
</span>
|
||||
<div
|
||||
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
|
||||
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1200;"
|
||||
>
|
||||
<div
|
||||
class="ant-tooltip-arrow"
|
||||
|
||||
@ -898,6 +898,7 @@ Array [
|
||||
<a
|
||||
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
|
||||
href="https://www.google.com"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
@ -1072,6 +1073,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
|
||||
<a
|
||||
class="ant-btn ant-btn-primary"
|
||||
href="https://ant.design/index-cn"
|
||||
tabindex="0"
|
||||
>
|
||||
<span>
|
||||
Href Primary
|
||||
@ -1080,6 +1082,7 @@ exports[`renders components/button/demo/disabled.tsx extend context correctly 1`
|
||||
<a
|
||||
class="ant-btn ant-btn-primary ant-btn-disabled"
|
||||
href="https://ant.design/index-cn"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span>
|
||||
Href Primary(disabled)
|
||||
@ -1550,6 +1553,7 @@ exports[`renders components/button/demo/icon.tsx extend context correctly 1`] =
|
||||
<a
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
href="https://www.google.com"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
|
||||
@ -805,6 +805,7 @@ Array [
|
||||
<a
|
||||
class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
|
||||
href="https://www.google.com"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
@ -977,6 +978,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
|
||||
<a
|
||||
class="ant-btn ant-btn-primary"
|
||||
href="https://ant.design/index-cn"
|
||||
tabindex="0"
|
||||
>
|
||||
<span>
|
||||
Href Primary
|
||||
@ -985,6 +987,7 @@ exports[`renders components/button/demo/disabled.tsx correctly 1`] = `
|
||||
<a
|
||||
class="ant-btn ant-btn-primary ant-btn-disabled"
|
||||
href="https://ant.design/index-cn"
|
||||
tabindex="-1"
|
||||
>
|
||||
<span>
|
||||
Href Primary(disabled)
|
||||
@ -1375,6 +1378,7 @@ exports[`renders components/button/demo/icon.tsx correctly 1`] = `
|
||||
<a
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only"
|
||||
href="https://www.google.com"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="ant-btn-icon"
|
||||
|
||||
@ -383,6 +383,7 @@ exports[`Button should support link button 1`] = `
|
||||
<a
|
||||
class="ant-btn ant-btn-default"
|
||||
href="https://ant.design"
|
||||
tabindex="0"
|
||||
target="_blank"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -265,6 +265,7 @@ const InternalButton: React.ForwardRefRenderFunction<
|
||||
style={fullStyle}
|
||||
onClick={handleClick}
|
||||
ref={buttonRef as React.Ref<HTMLAnchorElement>}
|
||||
tabIndex={mergedDisabled ? -1 : 0}
|
||||
>
|
||||
{iconNode}
|
||||
{kids}
|
||||
|
||||
@ -159,7 +159,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -542,7 +542,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -927,7 +927,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -1310,7 +1310,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -1698,7 +1698,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -2060,7 +2060,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -2385,7 +2385,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -2793,7 +2793,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -3419,7 +3419,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -4069,7 +4069,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -4900,7 +4900,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -5290,7 +5290,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -6050,7 +6050,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -6453,7 +6453,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -6833,7 +6833,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -7213,7 +7213,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -7606,7 +7606,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -7991,7 +7991,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -8376,7 +8376,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -8772,7 +8772,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -9159,7 +9159,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -9563,7 +9563,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -9944,7 +9944,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -10327,7 +10327,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
|
||||
@ -1049,7 +1049,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -1226,7 +1226,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -1408,7 +1408,7 @@ Array [
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
@ -1635,7 +1635,7 @@ Array [
|
||||
</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"
|
||||
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
|
||||
class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
|
||||
@ -2867,7 +2867,7 @@ Array [
|
||||
</button>
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
style="z-index: 2000;"
|
||||
style="z-index: 1200;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
@ -3537,7 +3537,7 @@ exports[`renders components/drawer/demo/scroll-debug.tsx extend context correctl
|
||||
Some contents...
|
||||
<div
|
||||
class="ant-drawer ant-drawer-right ant-drawer-open ant-drawer-inline"
|
||||
style="z-index: 2000;"
|
||||
style="z-index: 1200;"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -46,6 +46,7 @@ exports[`DropdownButton should support href like Button 1`] = `
|
||||
<a
|
||||
class="ant-btn ant-btn-default ant-btn-compact-item ant-btn-compact-first-item"
|
||||
href="https://ant.design"
|
||||
tabindex="0"
|
||||
/>
|
||||
<button
|
||||
class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-compact-item ant-btn-compact-last-item ant-dropdown-trigger"
|
||||
|
||||
@ -293,6 +293,7 @@ exports[`renders components/flex/demo/combination.tsx extend context correctly 1
|
||||
<a
|
||||
class="ant-btn ant-btn-primary"
|
||||
href="https://ant.design"
|
||||
tabindex="0"
|
||||
target="_blank"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -289,6 +289,7 @@ exports[`renders components/flex/demo/combination.tsx correctly 1`] = `
|
||||
<a
|
||||
class="ant-btn ant-btn-primary"
|
||||
href="https://ant.design"
|
||||
tabindex="0"
|
||||
target="_blank"
|
||||
>
|
||||
<span>
|
||||
|
||||
@ -21299,7 +21299,7 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { SiderProps } from './Sider';
|
||||
@ -11,6 +11,8 @@ type CompoundedComponent = InternalLayoutType & {
|
||||
Footer: typeof Footer;
|
||||
Content: typeof Content;
|
||||
Sider: typeof Sider;
|
||||
/** @private Internal Context. Do not use in your production. */
|
||||
_InternalSiderContext: typeof SiderContext;
|
||||
};
|
||||
|
||||
const Layout = InternalLayout as CompoundedComponent;
|
||||
@ -19,5 +21,6 @@ Layout.Header = Header;
|
||||
Layout.Footer = Footer;
|
||||
Layout.Content = Content;
|
||||
Layout.Sider = Sider;
|
||||
Layout._InternalSiderContext = SiderContext;
|
||||
|
||||
export default Layout;
|
||||
|
||||
@ -1227,740 +1227,6 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct
|
||||
</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>
|
||||
`;
|
||||
|
||||
|
||||
@ -422,191 +422,6 @@ exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
|
||||
style="display:none"
|
||||
/>
|
||||
</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>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
AppstoreOutlined,
|
||||
ContainerOutlined,
|
||||
@ -7,6 +6,7 @@ import {
|
||||
PieChartOutlined,
|
||||
SettingOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import React, { useState } from 'react';
|
||||
import type { MenuProps } from 'antd';
|
||||
import { ConfigProvider, Menu, Space } from 'antd';
|
||||
|
||||
@ -120,7 +120,6 @@ const App: React.FC = () => {
|
||||
components: {
|
||||
Menu: {
|
||||
horizontalItemBorderRadius: 6,
|
||||
popupBg: 'red',
|
||||
horizontalItemHoverBg: '#f5f5f5',
|
||||
},
|
||||
},
|
||||
@ -137,7 +136,6 @@ const App: React.FC = () => {
|
||||
darkSubMenuItemBg: '#faad14',
|
||||
darkItemSelectedColor: '#ffccc7',
|
||||
darkItemSelectedBg: '#52c41a',
|
||||
darkPopupBg: 'red',
|
||||
},
|
||||
},
|
||||
}}
|
||||
@ -153,24 +151,6 @@ const App: React.FC = () => {
|
||||
}}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Menu: {
|
||||
darkPopupBg: 'red',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Menu
|
||||
inlineCollapsed
|
||||
defaultSelectedKeys={['1']}
|
||||
defaultOpenKeys={['sub1']}
|
||||
mode="inline"
|
||||
theme="dark"
|
||||
items={items2}
|
||||
/>
|
||||
</ConfigProvider>
|
||||
</Space>
|
||||
);
|
||||
};
|
||||
|
||||
@ -295,12 +295,6 @@ export interface ComponentToken {
|
||||
collapsedIconSize: number;
|
||||
|
||||
// Dark
|
||||
/**
|
||||
* @desc 暗色模式下的浮层菜单的背景颜色
|
||||
* @descEN The background color of the overlay menu in dark mode.
|
||||
*/
|
||||
darkPopupBg: string;
|
||||
|
||||
/**
|
||||
* @desc 暗色模式下的菜单项文字颜色
|
||||
* @descEN Color of menu item text in dark mode
|
||||
@ -958,7 +952,6 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
darkItemColor,
|
||||
darkDangerItemColor,
|
||||
darkItemBg,
|
||||
darkPopupBg,
|
||||
darkSubMenuItemBg,
|
||||
darkItemSelectedColor,
|
||||
darkItemSelectedBg,
|
||||
@ -994,7 +987,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
|
||||
groupTitleColor: darkGroupTitleColor,
|
||||
itemSelectedColor: darkItemSelectedColor,
|
||||
itemBg: darkItemBg,
|
||||
popupBg: darkPopupBg || darkItemBg,
|
||||
popupBg: darkItemBg,
|
||||
subMenuItemBg: darkSubMenuItemBg,
|
||||
itemActiveBg: 'transparent',
|
||||
itemSelectedBg: darkItemSelectedBg,
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import { unit } from '@ant-design/cssinjs';
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
|
||||
import type { MenuToken } from '.';
|
||||
import { genFocusOutline } from '../../style';
|
||||
|
||||
@ -160,10 +159,6 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
|
||||
backgroundColor: menuSubMenuBg,
|
||||
},
|
||||
|
||||
[`&${componentCls}-submenu-popup > ${componentCls}`]: {
|
||||
backgroundColor: popupBg,
|
||||
},
|
||||
|
||||
[`&${componentCls}-popup > ${componentCls}`]: {
|
||||
backgroundColor: popupBg,
|
||||
},
|
||||
|
||||
@ -3,6 +3,7 @@ import type { CSSProperties } from 'react';
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
|
||||
import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
|
||||
import { resetComponent } from '../../style';
|
||||
import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||
@ -186,7 +187,7 @@ const genMessageStyle: GenerateStyle<MessageToken> = (token) => {
|
||||
};
|
||||
|
||||
export const prepareComponentToken: GetDefaultToken<'Message'> = (token) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 10,
|
||||
zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 10,
|
||||
contentBg: token.colorBgElevated,
|
||||
contentPadding: `${(token.controlHeightLG - token.fontSize * token.lineHeight) / 2}px ${
|
||||
token.paddingSM
|
||||
|
||||
@ -5,11 +5,13 @@ import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
|
||||
import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { CONTAINER_MAX_OFFSET } from '../_util/hooks/useZIndex';
|
||||
import { getTransitionName } from '../_util/motion';
|
||||
import { devUseWarning } from '../_util/warning';
|
||||
import type { ThemeConfig } from '../config-provider';
|
||||
import ConfigProvider from '../config-provider';
|
||||
import { useLocale } from '../locale';
|
||||
import useToken from '../theme/useToken';
|
||||
import CancelBtn from './components/ConfirmCancelBtn';
|
||||
import OkBtn from './components/ConfirmOkBtn';
|
||||
import type { ModalContextProps } from './context';
|
||||
@ -31,6 +33,10 @@ export interface ConfirmDialogProps extends ModalFuncProps {
|
||||
autoFocusButton?: null | 'ok' | 'cancel';
|
||||
rootPrefixCls?: string;
|
||||
iconPrefixCls?: string;
|
||||
|
||||
/**
|
||||
* Only passed by static method
|
||||
*/
|
||||
theme?: ThemeConfig;
|
||||
|
||||
/** @private Internal Usage. Do not override this */
|
||||
@ -177,8 +183,6 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
|
||||
prefixCls,
|
||||
wrapClassName,
|
||||
rootPrefixCls,
|
||||
iconPrefixCls,
|
||||
theme,
|
||||
bodyStyle,
|
||||
closable = false,
|
||||
closeIcon,
|
||||
@ -215,6 +219,63 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
|
||||
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 (
|
||||
<ConfigProvider
|
||||
prefixCls={rootPrefixCls}
|
||||
@ -222,53 +283,14 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
|
||||
direction={direction}
|
||||
theme={theme}
|
||||
>
|
||||
<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={zIndex}
|
||||
afterClose={afterClose}
|
||||
keyboard={keyboard}
|
||||
centered={centered}
|
||||
getContainer={getContainer}
|
||||
closable={closable}
|
||||
closeIcon={closeIcon}
|
||||
modalRender={modalRender}
|
||||
focusTriggerAfterClose={focusTriggerAfterClose}
|
||||
>
|
||||
<ConfirmContent {...props} confirmPrefixCls={confirmPrefixCls} />
|
||||
</Dialog>
|
||||
<ConfirmDialog {...props} />
|
||||
</ConfigProvider>
|
||||
);
|
||||
};
|
||||
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
ConfirmDialog.displayName = 'ConfirmDialog';
|
||||
ConfirmDialogWrapper.displayName = 'ConfirmDialogWrapper';
|
||||
}
|
||||
|
||||
export default ConfirmDialog;
|
||||
export default ConfirmDialogWrapper;
|
||||
|
||||
@ -674,7 +674,7 @@ exports[`renders components/modal/demo/nested.tsx extend context correctly 1`] =
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
style="position: relative; z-index: 4000;"
|
||||
style="position: relative; z-index: 0;"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -644,7 +644,7 @@ exports[`renders components/modal/demo/nested.tsx correctly 1`] = `
|
||||
aria-checked="false"
|
||||
class="ant-switch"
|
||||
role="switch"
|
||||
style="position:relative;z-index:4000"
|
||||
style="position:relative;z-index:0"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
|
||||
@ -35,6 +35,7 @@ describe('Modal.hook', () => {
|
||||
<Button
|
||||
onClick={() => {
|
||||
instance = modal.confirm({
|
||||
zIndex: 903,
|
||||
content: (
|
||||
<Context.Consumer>
|
||||
{(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-modal-body').length).toBeTruthy();
|
||||
|
||||
expect(document.querySelector('.ant-modal-wrap')).toHaveStyle({
|
||||
zIndex: '903',
|
||||
});
|
||||
|
||||
// Update instance
|
||||
act(() => {
|
||||
instance.update({
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Modal, Select, Switch } from 'antd';
|
||||
import { Button, message, Modal, notification, Select, Space, Switch } from 'antd';
|
||||
|
||||
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);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Switch
|
||||
style={{ position: 'relative', zIndex: 4000 }}
|
||||
style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}
|
||||
checkedChildren="Open"
|
||||
unCheckedChildren="Close"
|
||||
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>
|
||||
|
||||
{messageHolder}
|
||||
{notificationHolder}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default Demo;
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import type { CSSObject } from '@ant-design/cssinjs';
|
||||
import { Keyframes, unit } from '@ant-design/cssinjs';
|
||||
|
||||
import { CONTAINER_MAX_OFFSET } from '../../_util/hooks/useZIndex';
|
||||
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 genNotificationPlacementStyle from './placement';
|
||||
import genStackStyle from './stack';
|
||||
@ -258,7 +260,7 @@ const genNotificationStyle: GenerateStyle<NotificationToken> = (token) => {
|
||||
|
||||
// ============================== Export ==============================
|
||||
export const prepareComponentToken = (token: AliasToken) => ({
|
||||
zIndexPopup: token.zIndexPopupBase + 50,
|
||||
zIndexPopup: token.zIndexPopupBase + CONTAINER_MAX_OFFSET + 50,
|
||||
width: 384,
|
||||
closeBtnHoverBg: token.wireframe ? 'transparent' : token.colorFillContent,
|
||||
});
|
||||
|
||||
@ -813,7 +813,7 @@ Array [
|
||||
</button>,
|
||||
<div
|
||||
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
|
||||
class="ant-popover-arrow"
|
||||
|
||||
@ -10721,7 +10721,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
class="ant-picker-panel-container"
|
||||
@ -11388,7 +11388,7 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
|
||||
</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"
|
||||
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
|
||||
|
||||
@ -1566,7 +1566,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co
|
||||
</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"
|
||||
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
|
||||
|
||||
@ -275,7 +275,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
|
||||
</div>
|
||||
<div
|
||||
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
|
||||
|
||||
@ -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`
|
||||
|
||||
> 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>
|
||||
|
||||
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`
|
||||
|
||||
> 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>
|
||||
|
||||
2. Rewrite `pages/_document.tsx`
|
||||
|
||||
@ -58,6 +58,12 @@ export default Home;
|
||||
|
||||
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>
|
||||
|
||||
2. 创建 `lib/AntdRegistry.tsx`
|
||||
@ -160,6 +166,12 @@ export default HomePage;
|
||||
|
||||
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>
|
||||
|
||||
2. 改写 `pages/_document.tsx`
|
||||
|
||||
@ -3,14 +3,23 @@
|
||||
# clean up
|
||||
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
|
||||
echo "Cloning project..."
|
||||
git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1
|
||||
|
||||
# change directory
|
||||
echo "Changing directory..."
|
||||
cd ~tmpProj/examples/with-nextjs-inline-style
|
||||
|
||||
# install dependencies
|
||||
echo "Installing dependencies..."
|
||||
yarn
|
||||
|
||||
# build
|
||||
echo "Building..."
|
||||
yarn run build
|
||||
|
||||
@ -49,6 +49,7 @@ const DEPRECIATED_VERSION = {
|
||||
'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.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;
|
||||
|
||||
function matchDeprecated(v: string) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user