Add onVisibilityChanged function as a property argument (#75)

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Add onVisibilityChanged function as a property argument of the Drawer component
+
 ## [0.17.1] - 2024-02-28
 
 ## [0.17.0] - 2024-01-09

react/Drawer.tsx

@@ -4,6 +4,7 @@ import React, {
   MouseEventHandler,
   useMemo,
   useState,
+  useEffect,
 } from 'react'
 import { defineMessages } from 'react-intl'
 import { IconMenu } from 'vtex.store-icons'
@@ -62,6 +63,7 @@ interface Props {
   renderingStrategy?: RenderingStrategy
   customPixelEventId?: PixelData['id']
   customPixelEventName?: PixelData['event']
+  onVisibilityChanged?: (visible: boolean) => void
 }
 
 function menuReducer(state: MenuState, action: MenuAction) {
@@ -125,6 +127,7 @@ function Drawer(props: Props) {
     renderingStrategy = 'lazy',
     customPixelEventId,
     customPixelEventName,
+    onVisibilityChanged,
   } = props
   const handles = useCssHandles(CSS_HANDLES)
   const backdropMode = useResponsiveValue(backdropModeProp)
@@ -148,6 +151,12 @@ function Drawer(props: Props) {
     eventName: customPixelEventName,
   })
 
+  useEffect(() => {
+    if (onVisibilityChanged !== undefined) {
+      onVisibilityChanged(isMenuOpen)
+    }
+  }, [onVisibilityChanged, isMenuOpen])
+
   const handleContainerClick: MouseEventHandler<HTMLElement> = event => {
     // target is the clicked element
     // currentTarget is the element which was attached the event (e.g. the container)