From 2d4383c303d3d036696ecd2a797152f6540afed0 Mon Sep 17 00:00:00 2001
From: Alexander Efremov <98008460+efremov-av@users.noreply.github.com>
Date: Wed, 14 Aug 2024 00:22:46 +0700
Subject: [PATCH] Add onVisibilityChanged function as a property argument (#75)

---
 CHANGELOG.md     | 4 ++++
 react/Drawer.tsx | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 53f39ac..499e335 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/react/Drawer.tsx b/react/Drawer.tsx
index fc3423b..f4bfe10 100644
--- a/react/Drawer.tsx
+++ b/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)