feat: Popover support z-index manager (ant-design#45420)

* feat: Popover support z-index manager * feat: update snap * Update components/popover/__tests__/index.test.tsx Signed-off-by: kiner-tang(文辉) <[email protected]> --------- Signed-off-by: kiner-tang(文辉) <[email protected]>
ammar-knowledge · Oct 20, 2023 · 8c49b38 · 8c49b38
1 parent 0fd730a
commit 8c49b38
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 45 deletions.
diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; 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; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 80; width: 68px;"
                   >
                     <div>
                       <div
@@ -6445,7 +6445,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; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                       >
                         <div>
                           <div
@@ -6825,7 +6825,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; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                       >
                         <div>
                           <div
@@ -7205,7 +7205,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; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                       >
                         <div>
                           <div
@@ -7598,7 +7598,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; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                       >
                         <div>
                           <div
@@ -7983,7 +7983,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; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                       >
                         <div>
                           <div
@@ -8368,7 +8368,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; width: 68px;"
+                        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                       >
                         <div>
                           <div
@@ -8764,7 +8764,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; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                   >
                     <div>
                       <div
@@ -9151,7 +9151,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; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                   >
                     <div>
                       <div
@@ -9555,7 +9555,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; width: 68px;"
+                    style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                   >
                     <div>
                       <div
@@ -9936,7 +9936,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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                 >
                   <div>
                     <div
@@ -10319,7 +10319,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; width: 68px;"
+                  style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                 >
                   <div>
                     <div

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -21296,7 +21296,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; width: 68px;"
+                            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                           >
                             <div>
                               <div

diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -808,7 +808,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: 2060;"
   >
     <div
       class="ant-popover-arrow"

diff --git a/components/popover/__tests__/index.test.tsx b/components/popover/__tests__/index.test.tsx
@@ -3,6 +3,7 @@ import Popover from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import { fireEvent, render } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
+import { Select } from 'antd';
 
 describe('Popover', () => {
   mountTest(Popover);
@@ -89,4 +90,32 @@ describe('Popover', () => {
     );
     expect(Array.from(wrapper.container.children)).toMatchSnapshot();
   });
+  it('z-index should be accumulated in nested Popover', () => {
+    const options = [
+      {
+        label: 'Option 1',
+        value: '1',
+      },
+      {
+        label: 'Option 2',
+        value: '2',
+      },
+    ];
+    render(
+      <>
+        <Select open options={options} popupClassName="select0" />
+        <Popover open content="test1" rootClassName="test1">
+          <Select open options={options} popupClassName="select1" />
+          <Popover open content="test2" rootClassName="test2">
+            <Select open options={options} popupClassName="select2" />
+          </Popover>
+        </Popover>
+      </>,
+    );
+    expect((document.querySelector('.test1') as HTMLDivElement)!.style.zIndex).toBeFalsy();
+    expect((document.querySelector('.test2') as HTMLDivElement)!.style.zIndex).toBe('2060');
+    expect((document.querySelector('.select0') as HTMLDivElement)!.style.zIndex).toBeFalsy();
+    expect((document.querySelector('.select1') as HTMLDivElement)!.style.zIndex).toBe('1080');
+    expect((document.querySelector('.select2') as HTMLDivElement)!.style.zIndex).toBe('2110');
+  });
 });
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
@@ -1,10 +1,13 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import classNames from 'classnames';
+
 import type { RenderFunction } from '../_util/getRenderPropValue';
 import { getRenderPropValue } from '../_util/getRenderPropValue';
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { ConfigContext } from '../config-provider';
 import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
+import zIndexContext from '../_util/zindexContext';
 import Tooltip from '../tooltip';
 import PurePanel from './PurePanel';
 // CSSINJS
@@ -49,23 +52,31 @@ const Popover = React.forwardRef<TooltipRef, PopoverProps>((props, ref) => {
 
   const overlayCls = classNames(overlayClassName, hashId);
 
+  // ============================ zIndex ============================
+  const [zIndex, contextZIndex] = useZIndex('Popover', otherProps.zIndex);
+
   return wrapSSR(
-    <Tooltip
-      placement={placement}
-      trigger={trigger}
-      mouseEnterDelay={mouseEnterDelay}
-      mouseLeaveDelay={mouseLeaveDelay}
-      overlayStyle={overlayStyle}
-      {...otherProps}
-      prefixCls={prefixCls}
-      overlayClassName={overlayCls}
-      ref={ref}
-      overlay={
-        title || content ? <Overlay prefixCls={prefixCls} title={title} content={content} /> : null
-      }
-      transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
-      data-popover-inject
-    />,
+    <zIndexContext.Provider value={contextZIndex}>
+      <Tooltip
+        placement={placement}
+        trigger={trigger}
+        mouseEnterDelay={mouseEnterDelay}
+        mouseLeaveDelay={mouseLeaveDelay}
+        overlayStyle={overlayStyle}
+        {...otherProps}
+        zIndex={zIndex}
+        prefixCls={prefixCls}
+        overlayClassName={overlayCls}
+        ref={ref}
+        overlay={
+          title || content ? (
+            <Overlay prefixCls={prefixCls} title={title} content={content} />
+          ) : null
+        }
+        transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
+        data-popover-inject
+      />
+    </zIndexContext.Provider>,
   );
 }) as React.ForwardRefExoticComponent<
   React.PropsWithoutRef<PopoverProps> & React.RefAttributes<unknown>
-Original file line number
+Diff line change
@@ Expand Up @@
                               </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; width: 68px;"
+                                style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1080; width: 68px;"
                               >
                                 <div>
                                   <div
@@ Expand Down @@