diff --git a/components/_util/__tests__/useZIndex.test.tsx b/components/_util/__tests__/useZIndex.test.tsx index cf8382dc2982..eb5062efb373 100644 --- a/components/_util/__tests__/useZIndex.test.tsx +++ b/components/_util/__tests__/useZIndex.test.tsx @@ -150,6 +150,7 @@ const consumerComponent: Record + > ), Dropdown: (props) => ( @@ -166,7 +167,6 @@ const consumerComponent: Recordtest ), - ColorPicker: (props) => , DatePicker: ({ rootClassName, ...props }) => ( <> @@ -183,8 +183,12 @@ const consumerComponent: Record `${baseSelector}.comp-${item}.ant-slide-up`) + selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete', 'ColorPicker'] + .map((item) => + item === 'ColorPicker' + ? `${baseSelector}.ant-popover-placement-bottomLeft` + : `${baseSelector}.comp-${item}.ant-slide-up`, + ) .join(','); } else if (consumer === 'DatePicker') { selector = ['DatePicker', 'TimePicker'] @@ -192,8 +196,6 @@ function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): st .join(','); } else if (['Menu'].includes(consumer)) { selector = `${baseSelector}.ant-menu-submenu-placement-rightTop`; - } else if (consumer === 'ColorPicker') { - selector = `${baseSelector}.ant-popover-placement-bottomLeft`; } return selector; } @@ -268,21 +270,29 @@ describe('Test useZIndex hooks', () => { }); comps = document.querySelectorAll(selector2); comps.forEach((comp) => { + const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker'); + const consumerOffset = isColorPicker + ? 1000 + containerBaseZIndexOffset.Popover + : consumerBaseZIndexOffset[key as ZIndexConsumer]; expect((comp as HTMLDivElement).style.zIndex).toBe( String( 1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer] + - consumerBaseZIndexOffset[key as ZIndexConsumer], + consumerOffset, ), ); }); comps = document.querySelectorAll(selector3); comps.forEach((comp) => { + const isColorPicker = (comp as HTMLDivElement).className.includes('comp-ColorPicker'); + const consumerOffset = isColorPicker + ? 1000 + containerBaseZIndexOffset.Popover + : consumerBaseZIndexOffset[key as ZIndexConsumer]; expect((comp as HTMLDivElement).style.zIndex).toBe( String( (1000 + containerBaseZIndexOffset[containerKey as ZIndexContainer]) * 2 + - consumerBaseZIndexOffset[key as ZIndexConsumer], + consumerOffset, ), ); }); @@ -296,6 +306,7 @@ describe('Test useZIndex hooks', () => { (document.querySelector(selector1) as HTMLDivElement).style.zIndex, ).toBeFalsy(); } + expect((document.querySelector(selector2) as HTMLDivElement).style.zIndex).toBe( String( 1000 + diff --git a/components/_util/hooks/useZIndex.tsx b/components/_util/hooks/useZIndex.tsx index cc0124431202..be90054cf4fc 100644 --- a/components/_util/hooks/useZIndex.tsx +++ b/components/_util/hooks/useZIndex.tsx @@ -5,7 +5,7 @@ import zIndexContext from '../zindexContext'; export type ZIndexContainer = 'Modal' | 'Drawer' | 'Popover' | 'Popconfirm' | 'Tooltip' | 'Tour'; -export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'ColorPicker' | 'DatePicker' | 'Menu'; +export type ZIndexConsumer = 'SelectLike' | 'Dropdown' | 'DatePicker' | 'Menu'; export const containerBaseZIndexOffset: Record = { Modal: 0, @@ -18,7 +18,6 @@ export const containerBaseZIndexOffset: Record = { export const consumerBaseZIndexOffset: Record = { SelectLike: 50, Dropdown: 50, - ColorPicker: 30, DatePicker: 50, Menu: 50, }; diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 0d3124b7a21c..d6f9c79f3ce9 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -32,7 +32,6 @@ import type { } from './interface'; import useStyle from './style/index'; import { customizePrefixCls, genAlphaColor, generateColor, getAlphaColor } from './util'; -import { useZIndex } from '../_util/hooks/useZIndex'; export type ColorPickerProps = Omit< RcColorPickerProps, @@ -232,7 +231,6 @@ const ColorPicker: CompoundedComponent = (props) => { const mergedStyle: React.CSSProperties = { ...colorPicker?.style, ...style }; // ============================ zIndex ============================ - const [zIndex] = useZIndex('ColorPicker'); return wrapSSR( { } overlayClassName={mergePopupCls} - zIndex={zIndex} {...popoverProps} > {children || ( diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index 3bf41e09c374..0ae0d9065693 100644 --- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -813,7 +813,7 @@ Array [ , ((props, ref) => { const overlayCls = classNames(overlayClassName, hashId); - // ============================ zIndex ============================ - return wrapCSSVar( ((props, ref) => { const content = (