1880 Refactored Dropdown components (#1884)

* updated DropdownButton props

* refactoring in progress

* working but layout is wrong

* fixed bug

* wip on ColumnHeadWithDropdown

* fix bug

* fix bug

* remove unused styled component

* fix z-index bug

* add an optional argument to DropdownMenu to control the offset of the menu

* add an optional argument to DropdownMenu to control the offset of the menu

* modify files after PR comments

* clean the way the offset is handled

* fix lint

front/src/modules/ui/dropdown/hooks/useDropdown.ts

@@ -0,0 +1,57 @@
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
+import { useRecoilScopedFamilyState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedFamilyState';
+
+import { dropdownButtonHotkeyScopeScopedFamilyState } from '../states/dropdownButtonHotkeyScopeScopedFamilyState';
+import { isDropdownButtonOpenScopedFamilyState } from '../states/isDropdownButtonOpenScopedFamilyState';
+import { DropdownRecoilScopeContext } from '../states/recoil-scope-contexts/DropdownRecoilScopeContext';
+
+export const useDropdown = ({ dropdownId }: { dropdownId: string }) => {
+  const {
+    setHotkeyScopeAndMemorizePreviousScope,
+    goBackToPreviousHotkeyScope,
+  } = usePreviousHotkeyScope();
+
+  const [isDropdownButtonOpen, setIsDropdownButtonOpen] =
+    useRecoilScopedFamilyState(
+      isDropdownButtonOpenScopedFamilyState,
+      dropdownId,
+      DropdownRecoilScopeContext,
+    );
+
+  const [dropdownButtonHotkeyScope] = useRecoilScopedFamilyState(
+    dropdownButtonHotkeyScopeScopedFamilyState,
+    dropdownId,
+    DropdownRecoilScopeContext,
+  );
+
+  const closeDropdownButton = () => {
+    goBackToPreviousHotkeyScope();
+    setIsDropdownButtonOpen(false);
+  };
+
+  const openDropdownButton = () => {
+    setIsDropdownButtonOpen(true);
+
+    if (dropdownButtonHotkeyScope) {
+      setHotkeyScopeAndMemorizePreviousScope(
+        dropdownButtonHotkeyScope.scope,
+        dropdownButtonHotkeyScope.customScopes,
+      );
+    }
+  };
+
+  const toggleDropdownButton = () => {
+    if (isDropdownButtonOpen) {
+      closeDropdownButton();
+    } else {
+      openDropdownButton();
+    }
+  };
+
+  return {
+    isDropdownOpen: isDropdownButtonOpen,
+    closeDropdown: closeDropdownButton,
+    toggleDropdown: toggleDropdownButton,
+    openDropdown: openDropdownButton,
+  };
+};