From aaa63b38202b5cdb381a9556bf9e147cededa084 Mon Sep 17 00:00:00 2001
From: Chigala <92148630+Chigala@users.noreply.github.com>
Date: Sun, 17 Sep 2023 16:09:05 +0100
Subject: [PATCH] feat: added a dropDownCloseEffect component (#1621)

* feat: added a dropDownCloseEffect component

* Delete yarn.lock

* refactor: moved the DropdownCloseEffect inside the Dropdown button as a hook

* refactor: moved the DropdownCloseEffect to the DropdownButton jsx
---
 .../ui/dropdown/components/DropdownButton.tsx |  8 +++++++
 .../components/DropdownCloseEffect.tsx        | 21 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 front/src/modules/ui/dropdown/components/DropdownCloseEffect.tsx

diff --git a/front/src/modules/ui/dropdown/components/DropdownButton.tsx b/front/src/modules/ui/dropdown/components/DropdownButton.tsx
index 3dfc8b80b..40fe89a6e 100644
--- a/front/src/modules/ui/dropdown/components/DropdownButton.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownButton.tsx
@@ -9,6 +9,8 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
 import { useDropdownButton } from '../hooks/useDropdownButton';
 import { useInternalHotkeyScopeManagement } from '../hooks/useInternalHotkeyScopeManagement';
 
+import { DropdownCloseEffect } from './DropdownCloseEffect';
+
 type OwnProps = {
   buttonComponents: JSX.Element | JSX.Element[];
   dropdownComponents: JSX.Element | JSX.Element[];
@@ -20,6 +22,7 @@ type OwnProps = {
   dropdownHotkeyScope?: HotkeyScope;
   dropdownPlacement?: Placement;
   onClickOutside?: () => void;
+  onClose?: () => void;
 };
 
 export const DropdownButton = ({
@@ -30,6 +33,7 @@ export const DropdownButton = ({
   dropdownHotkeyScope,
   dropdownPlacement = 'bottom-end',
   onClickOutside,
+  onClose,
 }: OwnProps) => {
   const containerRef = useRef<HTMLDivElement>(null);
 
@@ -77,6 +81,10 @@ export const DropdownButton = ({
           {dropdownComponents}
         </div>
       )}
+      <DropdownCloseEffect
+        dropdownId={dropdownId}
+        onDropdownClose={() => onClose?.()}
+      />
     </div>
   );
 };
diff --git a/front/src/modules/ui/dropdown/components/DropdownCloseEffect.tsx b/front/src/modules/ui/dropdown/components/DropdownCloseEffect.tsx
new file mode 100644
index 000000000..507771e50
--- /dev/null
+++ b/front/src/modules/ui/dropdown/components/DropdownCloseEffect.tsx
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+
+import { useDropdownButton } from '../hooks/useDropdownButton';
+
+export const DropdownCloseEffect = ({
+  dropdownId,
+  onDropdownClose,
+}: {
+  dropdownId: string;
+  onDropdownClose: () => void;
+}) => {
+  const { isDropdownButtonOpen } = useDropdownButton({ dropdownId });
+
+  useEffect(() => {
+    if (!isDropdownButtonOpen) {
+      onDropdownClose();
+    }
+  }, [isDropdownButtonOpen]);
+
+  return null;
+};