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

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>
   );
 };

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;
+};