feat: add zIndex property

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Add `zIndex` as a property argument to control the drawer's z-index
+
 ## [0.17.2] - 2024-08-13
 
 ### Added

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

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,