From 0977e2558cfb3b212e688539078e91a25a80c693 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arthur=20Ferr=C3=A3o?= <arthur.ferrao@vtex.com>
Date: Wed, 30 Oct 2024 10:24:23 -0300
Subject: [PATCH] feat: add zIndex property

---
 react/Drawer.tsx  | 5 ++++-
 react/Overlay.tsx | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/react/Drawer.tsx b/react/Drawer.tsx
index f4bfe10..3502ed8 100644
--- 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
index c217636..9aaab93 100644
--- 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,