feat: add zIndex property

vtex-apps · Oct 30, 2024 · 0977e25 · 0977e25
1 parent aeafb8f
commit 0977e25
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/react/Drawer.tsx b/react/Drawer.tsx
@@ -64,6 +64,7 @@ interface Props {
   customPixelEventId?: PixelData['id']
   customPixelEventName?: PixelData['event']
   onVisibilityChanged?: (visible: boolean) => void
+  zIndex?: number
 }
 
 function menuReducer(state: MenuState, action: MenuAction) {
@@ -128,6 +129,7 @@ function Drawer(props: Props) {
     customPixelEventId,
     customPixelEventName,
     onVisibilityChanged,
+    zIndex = 999,
   } = props
   const handles = useCssHandles(CSS_HANDLES)
   const backdropMode = useResponsiveValue(backdropModeProp)
@@ -203,7 +205,7 @@ function Drawer(props: Props) {
         )}
       </div>
       <Portal>
-        <Overlay visible={overlayVisible} onClick={closeMenu} />
+        <Overlay visible={overlayVisible} onClick={closeMenu} zIndex={zIndex} />
         <Suspense fallback={<React.Fragment />}>
           <Swipable
             {...{
@@ -225,6 +227,7 @@ function Drawer(props: Props) {
               maxWidth,
               minWidth: 280,
               pointerEvents: isMenuOpen ? 'auto' : 'none',
+              zIndex
             }}
           >
             <div

diff --git a/react/Overlay.tsx b/react/Overlay.tsx
@@ -4,12 +4,13 @@ import { useCssHandles, applyModifiers } from 'vtex.css-handles'
 interface Props {
   visible: boolean
   onClick(event: React.MouseEvent | React.TouchEvent): void
+  zIndex?: number
 }
 
 const CSS_HANDLES = ['overlay'] as const
 
 const Overlay: RefForwardingComponent<HTMLDivElement, Props> = (
-  { visible, onClick }: Props,
+  { visible, onClick, zIndex = 999 }: Props,
   ref
 ) => {
   const handles = useCssHandles(CSS_HANDLES)
@@ -23,6 +24,7 @@ const Overlay: RefForwardingComponent<HTMLDivElement, Props> = (
       style={{
         opacity: visible ? 0.5 : 0,
         pointerEvents: visible ? 'auto' : 'none',
+        zIndex
       }}
       className={`${applyModifiers(
         handles.overlay,