Removed useDropdown and its legacy states (#13111)

This PR removes useDropdown barrel hook and refactors the legacy
useDropdown states to the last version of our recoil component state
management.

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx

@@ -8,7 +8,7 @@ import { useEffect, useState } from 'react';
 import { PhoneCountryPickerDropdownSelect } from './PhoneCountryPickerDropdownSelect';
 
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import 'react-phone-number-input/style.css';
 import { isDefined } from 'twenty-shared/utils';
@@ -80,7 +80,7 @@ export const PhoneCountryPickerDropdownButton = ({
   const dropdownId = 'country-picker-dropdown-id';
 
   const isDropdownOpen = useRecoilComponentValueV2(
-    isDropdownOpenComponentStateV2,
+    isDropdownOpenComponentState,
     dropdownId,
   );
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx

@@ -7,7 +7,7 @@ import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown'
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
 import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
 import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
@@ -78,7 +78,7 @@ export const Dropdown = ({
   isDropdownInModal = false,
 }: DropdownProps) => {
   const isDropdownOpen = useRecoilComponentValueV2(
-    isDropdownOpenComponentStateV2,
+    isDropdownOpenComponentState,
     dropdownId,
   );
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownOnToggleEffect.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 export const DropdownOnToggleEffect = ({
   onDropdownClose,
@@ -9,7 +10,10 @@ export const DropdownOnToggleEffect = ({
   onDropdownClose?: () => void;
   onDropdownOpen?: () => void;
 }) => {
-  const { isDropdownOpen } = useDropdown();
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentState,
+  );
+
   const [currentIsDropdownOpen, setCurrentIsDropdownOpen] =
     useState(isDropdownOpen);
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx

@@ -1,10 +1,12 @@
 import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+
 import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
-import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState';
 import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
 import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
 import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
 import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotkeysOnFocusedElement';
@@ -69,7 +71,11 @@ export const DropdownInternalContainer = ({
   excludedClickOutsideIds,
   isDropdownInModal = false,
 }: DropdownInternalContainerProps) => {
-  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentState,
+  );
+
+  const { closeDropdown } = useCloseDropdown();
 
   const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);
 
@@ -84,7 +90,7 @@ export const DropdownInternalContainer = ({
   );
 
   const setDropdownPlacement = useSetRecoilComponentStateV2(
-    dropdownPlacementComponentStateV2,
+    dropdownPlacementComponentState,
     dropdownId,
   );
 
@@ -103,7 +109,7 @@ export const DropdownInternalContainer = ({
         event.stopImmediatePropagation();
         event.preventDefault();
 
-        closeDropdown();
+        closeDropdown(dropdownId);
       }
 
       onClickOutside?.();
@@ -117,7 +123,7 @@ export const DropdownInternalContainer = ({
       if (activeDropdownFocusId !== dropdownId) return;
 
       if (isDropdownOpen) {
-        closeDropdown();
+        closeDropdown(dropdownId);
       }
     },
     focusId: dropdownId,

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseAnyOpenDropdown.test.tsx

@@ -6,7 +6,7 @@ import { RecoilRoot } from 'recoil';
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseAnyOpenDropdown } from '@/ui/layout/dropdown/hooks/useCloseAnyOpenDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 
 const dropdownId = 'test-dropdown-id';
@@ -28,7 +28,7 @@ describe('useCloseAnyOpenDropdown', () => {
     const { result } = renderHook(
       () => {
         const isDropdownOpen = useRecoilComponentValueV2(
-          isDropdownOpenComponentStateV2,
+          isDropdownOpenComponentState,
           dropdownId,
         );
 

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseDropdown.test.tsx

@@ -0,0 +1,116 @@
+import { expect } from '@storybook/test';
+import { renderHook } from '@testing-library/react';
+import { act } from 'react';
+import { RecoilRoot } from 'recoil';
+
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+const dropdownId = 'test-dropdown-id';
+const outsideDropdownId = 'test-dropdown-id-outside';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <RecoilRoot>
+      <DropdownComponentInstanceContext.Provider
+        value={{ instanceId: dropdownId }}
+      >
+        {children}
+      </DropdownComponentInstanceContext.Provider>
+      <DropdownComponentInstanceContext.Provider
+        value={{ instanceId: outsideDropdownId }}
+      ></DropdownComponentInstanceContext.Provider>
+    </RecoilRoot>
+  );
+};
+
+describe('useCloseDropdown', () => {
+  it('should close dropdown from inside component instance context', async () => {
+    const { result } = renderHook(
+      () => {
+        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+          outsideDropdownId,
+        );
+
+        const isInsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+        );
+
+        const { closeDropdown } = useCloseDropdown();
+        const { openDropdown } = useOpenDropdown();
+
+        return {
+          isOutsideDropdownOpen,
+          isInsideDropdownOpen,
+          closeDropdown,
+          openDropdown,
+        };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    act(() => {
+      result.current.openDropdown();
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(true);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.closeDropdown();
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+  });
+
+  it('should close dropdown from outside component instance context', async () => {
+    const { result } = renderHook(
+      () => {
+        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+          outsideDropdownId,
+        );
+
+        const isInsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+        );
+
+        const { closeDropdown } = useCloseDropdown();
+        const { openDropdown } = useOpenDropdown();
+
+        return {
+          isOutsideDropdownOpen,
+          isInsideDropdownOpen,
+          closeDropdown,
+          openDropdown,
+        };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    act(() => {
+      result.current.openDropdown({
+        dropdownComponentInstanceIdFromProps: outsideDropdownId,
+      });
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(true);
+
+    act(() => {
+      result.current.closeDropdown(outsideDropdownId);
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+  });
+});

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx

@@ -1,54 +0,0 @@
-import { expect } from '@storybook/test';
-import { renderHook } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
-import { RecoilRoot } from 'recoil';
-
-import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-
-const dropdownId = 'test-dropdown-id';
-
-const Wrapper = ({ children }: { children: React.ReactNode }) => {
-  return <RecoilRoot>{children}</RecoilRoot>;
-};
-
-describe('useDropdown', () => {
-  it('should toggleDropdown', async () => {
-    const { result } = renderHook(() => useDropdown(dropdownId), {
-      wrapper: Wrapper,
-    });
-
-    expect(result.current.isDropdownOpen).toBe(false);
-
-    act(() => {
-      result.current.toggleDropdown();
-    });
-
-    expect(result.current.isDropdownOpen).toBe(true);
-
-    act(() => {
-      result.current.toggleDropdown();
-    });
-
-    expect(result.current.isDropdownOpen).toBe(false);
-  });
-
-  it('should open and close dropdown', async () => {
-    const { result } = renderHook(() => useDropdown(dropdownId), {
-      wrapper: Wrapper,
-    });
-
-    expect(result.current.isDropdownOpen).toBe(false);
-
-    act(() => {
-      result.current.openDropdown();
-    });
-
-    expect(result.current.isDropdownOpen).toBe(true);
-
-    act(() => {
-      result.current.closeDropdown();
-    });
-
-    expect(result.current.isDropdownOpen).toBe(false);
-  });
-});

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useOpenDropdown.test.tsx

@@ -0,0 +1,95 @@
+import { expect } from '@storybook/test';
+import { renderHook } from '@testing-library/react';
+import { act } from 'react';
+import { RecoilRoot } from 'recoil';
+
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+const dropdownId = 'test-dropdown-id';
+const outsideDropdownId = 'test-dropdown-id-outside';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <RecoilRoot>
+      <DropdownComponentInstanceContext.Provider
+        value={{ instanceId: dropdownId }}
+      >
+        {children}
+      </DropdownComponentInstanceContext.Provider>
+      <DropdownComponentInstanceContext.Provider
+        value={{ instanceId: outsideDropdownId }}
+      ></DropdownComponentInstanceContext.Provider>
+    </RecoilRoot>
+  );
+};
+
+describe('useOpenDropdown', () => {
+  it('should open dropdown from inside component instance context', async () => {
+    const { result } = renderHook(
+      () => {
+        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+          outsideDropdownId,
+        );
+
+        const isInsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+        );
+
+        const { openDropdown } = useOpenDropdown();
+
+        return { isOutsideDropdownOpen, isInsideDropdownOpen, openDropdown };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.openDropdown();
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(true);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+  });
+
+  it('should open dropdown from outside component instance context', async () => {
+    const { result } = renderHook(
+      () => {
+        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+          outsideDropdownId,
+        );
+
+        const isInsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+        );
+
+        const { openDropdown } = useOpenDropdown();
+
+        return { isInsideDropdownOpen, isOutsideDropdownOpen, openDropdown };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.openDropdown({
+        dropdownComponentInstanceIdFromProps: outsideDropdownId,
+      });
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(true);
+  });
+});

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useToggleDropdown.test.tsx

@@ -0,0 +1,125 @@
+import { expect } from '@storybook/test';
+import { renderHook } from '@testing-library/react';
+import { act } from 'react';
+import { RecoilRoot } from 'recoil';
+
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+
+const dropdownId = 'test-dropdown-id';
+const outsideDropdownId = 'test-dropdown-id-outside';
+
+const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <RecoilRoot>
+      <DropdownComponentInstanceContext.Provider
+        value={{ instanceId: dropdownId }}
+      >
+        {children}
+      </DropdownComponentInstanceContext.Provider>
+      <DropdownComponentInstanceContext.Provider
+        value={{ instanceId: outsideDropdownId }}
+      ></DropdownComponentInstanceContext.Provider>
+    </RecoilRoot>
+  );
+};
+
+describe('useToggleDropdown', () => {
+  it('should toggle dropdown from inside component instance context', async () => {
+    const { result } = renderHook(
+      () => {
+        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+          outsideDropdownId,
+        );
+
+        const isInsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+        );
+        const { toggleDropdown } = useToggleDropdown();
+
+        return { isOutsideDropdownOpen, isInsideDropdownOpen, toggleDropdown };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleDropdown();
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(true);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleDropdown();
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleDropdown();
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(true);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+  });
+
+  it('should toggle dropdown from outside component instance context', async () => {
+    const { result } = renderHook(
+      () => {
+        const isOutsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+          outsideDropdownId,
+        );
+
+        const isInsideDropdownOpen = useRecoilComponentValueV2(
+          isDropdownOpenComponentState,
+        );
+        const { toggleDropdown } = useToggleDropdown();
+
+        return { isOutsideDropdownOpen, isInsideDropdownOpen, toggleDropdown };
+      },
+      {
+        wrapper: Wrapper,
+      },
+    );
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleDropdown({
+        dropdownComponentInstanceIdFromProps: outsideDropdownId,
+      });
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(true);
+
+    act(() => {
+      result.current.toggleDropdown({
+        dropdownComponentInstanceIdFromProps: outsideDropdownId,
+      });
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(false);
+
+    act(() => {
+      result.current.toggleDropdown({
+        dropdownComponentInstanceIdFromProps: outsideDropdownId,
+      });
+    });
+
+    expect(result.current.isInsideDropdownOpen).toBe(false);
+    expect(result.current.isOutsideDropdownOpen).toBe(true);
+  });
+});

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts

@@ -1,19 +0,0 @@
-import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
-import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-
-type UseDropdownStatesProps = {
-  dropdownScopeId?: string;
-};
-
-export const useDropdownStates = ({
-  dropdownScopeId,
-}: UseDropdownStatesProps) => {
-  const scopeId = useAvailableScopeIdOrThrow(
-    DropdownScopeInternalContext,
-    dropdownScopeId,
-  );
-
-  return {
-    scopeId,
-  };
-};

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useCloseDropdown.ts

@@ -1,7 +1,7 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
 import { useRecoilCallback } from 'recoil';
@@ -30,7 +30,7 @@ export const useCloseDropdown = () => {
 
         const isDropdownOpen = snapshot
           .getLoadable(
-            isDropdownOpenComponentStateV2.atomFamily({
+            isDropdownOpenComponentState.atomFamily({
               instanceId: dropdownComponentInstanceId,
             }),
           )
@@ -44,7 +44,7 @@ export const useCloseDropdown = () => {
           goBackToPreviousDropdownFocusId();
 
           set(
-            isDropdownOpenComponentStateV2.atomFamily({
+            isDropdownOpenComponentState.atomFamily({
               instanceId: dropdownComponentInstanceId,
             }),
             false,

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts

@@ -1,110 +0,0 @@
-import { useRecoilCallback } from 'recoil';
-
-import { useDropdownStates } from '@/ui/layout/dropdown/hooks/internal/useDropdownStates';
-import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
-import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
-import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
-import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
-import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
-import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
-import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
-import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
-import { useRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentStateV2';
-import { useCallback } from 'react';
-
-/**
- *
- * @deprecated This hook is deprecated, use a specific hook instead :
- * - `useOpenDropdown`
- * - `useCloseDropdown`
- * - `useToggleDropdown`
- */
-export const useDropdown = (dropdownId?: string) => {
-  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
-  const { removeFocusItemFromFocusStackById } =
-    useRemoveFocusItemFromFocusStackById();
-
-  const { scopeId } = useDropdownStates({ dropdownScopeId: dropdownId });
-
-  const { setActiveDropdownFocusIdAndMemorizePrevious } =
-    useSetActiveDropdownFocusIdAndMemorizePrevious();
-
-  const { goBackToPreviousDropdownFocusId } =
-    useGoBackToPreviousDropdownFocusId();
-
-  const [isDropdownOpen, setIsDropdownOpen] = useRecoilComponentStateV2(
-    isDropdownOpenComponentStateV2,
-    dropdownId ?? scopeId,
-  );
-
-  const [dropdownPlacement, setDropdownPlacement] = useRecoilComponentStateV2(
-    dropdownPlacementComponentStateV2,
-    dropdownId ?? scopeId,
-  );
-
-  const closeDropdown = useCallback(() => {
-    if (isDropdownOpen) {
-      setIsDropdownOpen(false);
-      goBackToPreviousDropdownFocusId();
-      removeFocusItemFromFocusStackById({
-        focusId: dropdownId ?? scopeId,
-      });
-    }
-  }, [
-    isDropdownOpen,
-    setIsDropdownOpen,
-    goBackToPreviousDropdownFocusId,
-    removeFocusItemFromFocusStackById,
-    dropdownId,
-    scopeId,
-  ]);
-
-  const openDropdown = useRecoilCallback(
-    () => (globalHotkeysConfig?: Partial<GlobalHotkeysConfig>) => {
-      if (!isDropdownOpen) {
-        setIsDropdownOpen(true);
-        setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId);
-
-        pushFocusItemToFocusStack({
-          focusId: dropdownId ?? scopeId,
-          component: {
-            type: FocusComponentType.DROPDOWN,
-            instanceId: dropdownId ?? scopeId,
-          },
-          globalHotkeysConfig,
-          // TODO: Remove this once we've fully migrated away from hotkey scopes
-          hotkeyScope: { scope: 'dropdown' } as HotkeyScope,
-        });
-      }
-    },
-    [
-      isDropdownOpen,
-      setIsDropdownOpen,
-      setActiveDropdownFocusIdAndMemorizePrevious,
-      pushFocusItemToFocusStack,
-      dropdownId,
-      scopeId,
-    ],
-  );
-
-  const toggleDropdown = (
-    globalHotkeysConfig?: Partial<GlobalHotkeysConfig>,
-  ) => {
-    if (isDropdownOpen) {
-      closeDropdown();
-    } else {
-      openDropdown(globalHotkeysConfig);
-    }
-  };
-
-  return {
-    scopeId,
-    isDropdownOpen,
-    closeDropdown,
-    toggleDropdown,
-    openDropdown,
-    dropdownPlacement,
-    setDropdownPlacement,
-  };
-};

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts

@@ -1,7 +1,7 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
 
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
@@ -35,7 +35,7 @@ export const useOpenDropdown = () => {
         }
 
         set(
-          isDropdownOpenComponentStateV2.atomFamily({
+          isDropdownOpenComponentState.atomFamily({
             instanceId: dropdownComponentInstanceId,
           }),
           true,

packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts

@@ -1,7 +1,7 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
-import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
 import { useRecoilCallback } from 'recoil';
@@ -32,7 +32,7 @@ export const useToggleDropdown = () => {
 
         const isDropdownOpen = snapshot
           .getLoadable(
-            isDropdownOpenComponentStateV2.atomFamily({
+            isDropdownOpenComponentState.atomFamily({
               instanceId: dropdownComponentInstanceId,
             }),
           )

packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts

@@ -3,7 +3,7 @@ import { createComponentStateV2 } from '@/ui/utilities/state/component-state/uti
 
 import { Placement } from '@floating-ui/react';
 
-export const dropdownPlacementComponentStateV2 =
+export const dropdownPlacementComponentState =
   createComponentStateV2<Placement | null>({
     key: 'dropdownPlacementComponentState',
     componentInstanceContext: DropdownComponentInstanceContext,

packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts

@@ -1,8 +1,8 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
 
-export const isDropdownOpenComponentStateV2 = createComponentStateV2<boolean>({
-  key: 'isDropdownOpenComponentStateV2',
+export const isDropdownOpenComponentState = createComponentStateV2<boolean>({
+  key: 'isDropdownOpenComponentState',
   defaultValue: false,
   componentInstanceContext: DropdownComponentInstanceContext,
 });