fix: Fixed an issue where the z-index setting of the pop-up component was abnormal in the pop-up container (#45864)

* fix: Fixed an issue where the z-index setting of the pop-up component was abnormal in the pop-up container

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* Update components/popconfirm/index.tsx

Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>

---------

Signed-off-by: kiner-tang(文辉) <1127031143@qq.com>

components/_util/__tests__/useZIndex.test.tsx

@@ -150,6 +150,7 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
         options={options}
         open
       />
+      <ColorPicker {...props} open rootClassName={`${rootClassName} comp-item comp-ColorPicker`} />
     </>
   ),
   Dropdown: (props) => (
@@ -166,7 +167,6 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
       <button type="button">test</button>
     </Dropdown>
   ),
-  ColorPicker: (props) => <ColorPicker {...props} open />,
   DatePicker: ({ rootClassName, ...props }) => (
     <>
       <DatePicker {...props} rootClassName={`${rootClassName} comp-item comp-DatePicker`} open />
@@ -183,8 +183,12 @@ const consumerComponent: Record<ZIndexConsumer, React.FC<{ rootClassName: string
 function getConsumerSelector(baseSelector: string, consumer: ZIndexConsumer): string {
   let selector = baseSelector;
   if (consumer === 'SelectLike') {
-    selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete']
+    selector = ['Select', 'Cascader', 'TreeSelect', 'AutoComplete', 'ColorPicker']
-      .map((item) => `${baseSelector}.comp-${item}.ant-slide-up`)
+      .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 +

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<ZIndexContainer, number> = {
   Modal: 0,
@@ -18,7 +18,6 @@ export const containerBaseZIndexOffset: Record<ZIndexContainer, number> = {
 export const consumerBaseZIndexOffset: Record<ZIndexConsumer, number> = {
   SelectLike: 50,
   Dropdown: 50,
-  ColorPicker: 30,
   DatePicker: 50,
   Menu: 50,
 };

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(
     <Popover
@@ -254,7 +252,6 @@ const ColorPicker: CompoundedComponent = (props) => {
         </NoFormStyle>
       }
       overlayClassName={mergePopupCls}
-      zIndex={zIndex}
       {...popoverProps}
     >
       {children || (

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

@@ -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;"
+    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 2140;"
   >
     <div
       class="ant-popover-arrow"

components/popover/index.tsx

@@ -50,8 +50,6 @@ const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
 
   const overlayCls = classNames(overlayClassName, hashId);
 
-  // ============================ zIndex ============================
-
   return wrapSSR(
     <Tooltip
       placement={placement}

components/tooltip/index.tsx

@@ -300,7 +300,7 @@ const Tooltip = React.forwardRef<TooltipRef, TooltipProps>((props, ref) => {
   const content = (
     <RcTooltip
       {...otherProps}
-      zIndex={injectFromPopover ? otherProps.zIndex : zIndex}
+      zIndex={zIndex}
       showArrow={mergedShowArrow}
       placement={placement}
       mouseEnterDelay={mouseEnterDelay}