Refactor useDropdown states to component state V2 (#12911)

This PR is a follow-up of the first refactor of dropdown hooks : https://github.com/twentyhq/twenty/pull/12875 In this PR we continue by focusing on the replacement of those two states that are still using the v1 of component states : - isDropdownOpenComponentState - dropdownPlacementComponentState When then remove those two old states and now only use the new component state v2. ## QA Component | Status | Comments -- | -- | -- RecordDetailRelationSectionDropdownToMany | Ok | RecordDetailRelationSectionDropdownToOne | Ok | WorkflowVariablesDropdown | Ok | DropdownInternalContainer | Ok | Tested on tables and boards fields
2025-06-26 16:11:24 +02:00
parent fd7089cfc5
commit 658cd46336
14 changed files with 73 additions and 96 deletions
--- a/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuDropdown.stories.tsx
+++ b/packages/twenty-front/src/modules/action-menu/components/stories/RecordIndexActionMenuDropdown.stories.tsx
@ -8,7 +8,8 @@ import { ActionMenuContext } from '@/action-menu/contexts/ActionMenuContext';
 import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-actions.mock';
 import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
 import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import {
  RouterDecorator,
@ -38,10 +39,9 @@ const meta: Meta<typeof RecordIndexActionMenuDropdown> = {
          );

          set(
-            extractComponentState(
-              isDropdownOpenComponentState,
-              'action-menu-dropdown-story-action-menu',
-            ),
+            isDropdownOpenComponentStateV2.atomFamily({
+              instanceId: 'action-menu-dropdown-story-action-menu',
+            }),
            true,
          );
        }}
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx
@ -18,6 +18,8 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { IconPlus } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
@ -50,7 +52,12 @@ export const RecordDetailRelationSectionDropdownToMany = () => {
    recordId,
  });

-  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
+  const { closeDropdown } = useDropdown(dropdownId);
+
+  const dropdownPlacement = useRecoilComponentValueV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );

  const setMultipleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
    multipleRecordPickerSearchFilterComponentState,
--- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx
@ -18,6 +18,8 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { IconForbid, IconPencil } from 'twenty-ui/display';
 import { LightIconButton } from 'twenty-ui/input';
@ -52,7 +54,12 @@ export const RecordDetailRelationSectionDropdownToOne = () => {
    recordId,
  });

-  const { closeDropdown, dropdownPlacement } = useDropdown(dropdownId);
+  const { closeDropdown } = useDropdown(dropdownId);
+
+  const dropdownPlacement = useRecoilComponentValueV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );

  const setSingleRecordPickerSearchFilter = useSetRecoilComponentStateV2(
    singleRecordPickerSearchFilterComponentState,
--- a/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
+++ b/packages/twenty-front/src/modules/object-record/record-table/hooks/internal/useResetTableRowSelection.ts
@ -6,11 +6,10 @@ import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record
 import { hasUserSelectedAllRowsComponentState } from '@/object-record/record-table/record-table-row/states/hasUserSelectedAllRowsFamilyState';
 import { isRowSelectedComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowSelectedComponentFamilyState';
 import { RecordTableComponentInstanceContext } from '@/object-record/record-table/states/context/RecordTableComponentInstanceContext';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
 import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
 import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
 import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
 import { lastSelectedRowIndexComponentState } from '../../record-table-row/states/lastSelectedRowIndexComponentState';

 export const useResetTableRowSelection = (recordTableId?: string) => {
@ -34,19 +33,14 @@ export const useResetTableRowSelection = (recordTableId?: string) => {
    recordTableIdFromContext,
  );

-  const isActionMenuDropdownOpenState = extractComponentState(
-    isDropdownOpenComponentState,
-    getActionMenuDropdownIdFromActionMenuId(
-      getActionMenuIdFromRecordIndexId(recordTableIdFromContext),
-    ),
-  );
-
  const lastSelectedRowIndexComponentCallbackState =
    useRecoilComponentCallbackStateV2(
      lastSelectedRowIndexComponentState,
      recordTableIdFromContext,
    );

+  const { closeDropdown } = useCloseDropdown();
+
  return useRecoilCallback(
    ({ set, snapshot }) =>
      () => {
@ -61,15 +55,21 @@ export const useResetTableRowSelection = (recordTableId?: string) => {

        set(hasUserSelectedAllRowsState, false);

-        set(isActionMenuDropdownOpenState, false);
        set(lastSelectedRowIndexComponentCallbackState, null);
+
+        closeDropdown(
+          getActionMenuDropdownIdFromActionMenuId(
+            getActionMenuIdFromRecordIndexId(recordTableIdFromContext),
+          ),
+        );
      },
    [
      recordIndexAllRecordIdsSelector,
      hasUserSelectedAllRowsState,
-      isActionMenuDropdownOpenState,
      lastSelectedRowIndexComponentCallbackState,
      isRowSelectedFamilyState,
+      closeDropdown,
+      recordTableIdFromContext,
    ],
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/internal/DropdownInternalContainer.tsx
@ -2,6 +2,7 @@ import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingC
 import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
+import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2';
 import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxHeightComponentState';
 import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
 import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
@ -10,6 +11,7 @@ import { useHotkeysOnFocusedElement } from '@/ui/utilities/hotkey/hooks/useHotke
 import { ClickOutsideListenerContext } from '@/ui/utilities/pointer-event/contexts/ClickOutsideListenerContext';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
+import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import styled from '@emotion/styled';
 import {
  FloatingPortal,
@ -67,8 +69,7 @@ export const DropdownInternalContainer = ({
  excludedClickOutsideIds,
  isDropdownInModal = false,
 }: DropdownInternalContainerProps) => {
-  const { isDropdownOpen, closeDropdown, setDropdownPlacement } =
-    useDropdown(dropdownId);
+  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);

  const activeDropdownFocusId = useRecoilValue(activeDropdownFocusIdState);

@ -82,6 +83,12 @@ export const DropdownInternalContainer = ({
    dropdownId,
  );

+  const setDropdownPlacement = useSetRecoilComponentStateV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId,
+  );
+
+  // TODO: remove this useEffect
  useEffect(() => {
    setDropdownPlacement(dropdownPlacement);
  }, [dropdownPlacement, setDropdownPlacement]);
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts
@ -1,8 +1,5 @@
 import { DropdownScopeInternalContext } from '@/ui/layout/dropdown/scopes/scope-internal-context/DropdownScopeInternalContext';
-import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
 import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';

 type UseDropdownStatesProps = {
  dropdownScopeId?: string;
@ -18,13 +15,5 @@ export const useDropdownStates = ({

  return {
    scopeId,
-    dropdownPlacementState: extractComponentState(
-      dropdownPlacementComponentState,
-      scopeId,
-    ),
-    isDropdownOpenState: extractComponentState(
-      isDropdownOpenComponentState,
-      scopeId,
-    ),
  };
 };
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useCloseDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useCloseDropdown.ts
@ -1,6 +1,6 @@
 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';
@ -36,15 +36,7 @@ export const useCloseDropdown = () => {
          )
          .getValue();

-        const isDropdownOpenLegacy = snapshot
-          .getLoadable(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-          )
-          .getValue();
-
-        if (isDropdownOpen || isDropdownOpenLegacy) {
+        if (isDropdownOpen) {
          removeFocusItemFromFocusStackById({
            focusId: dropdownComponentInstanceId,
          });
@ -57,13 +49,6 @@ export const useCloseDropdown = () => {
            }),
            false,
          );
-
-          set(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-            false,
-          );
        }
      },
    [
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
@ -1,13 +1,16 @@
-import { useRecoilCallback, useRecoilState } from 'recoil';
+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';

 /**
@ -22,8 +25,7 @@ export const useDropdown = (dropdownId?: string) => {
  const { removeFocusItemFromFocusStackById } =
    useRemoveFocusItemFromFocusStackById();

-  const { scopeId, isDropdownOpenState, dropdownPlacementState } =
-    useDropdownStates({ dropdownScopeId: dropdownId });
+  const { scopeId } = useDropdownStates({ dropdownScopeId: dropdownId });

  const { setActiveDropdownFocusIdAndMemorizePrevious } =
    useSetActiveDropdownFocusIdAndMemorizePrevious();
@ -31,11 +33,14 @@ export const useDropdown = (dropdownId?: string) => {
  const { goBackToPreviousDropdownFocusId } =
    useGoBackToPreviousDropdownFocusId();

-  const [isDropdownOpen, setIsDropdownOpen] =
-    useRecoilState(isDropdownOpenState);
+  const [isDropdownOpen, setIsDropdownOpen] = useRecoilComponentStateV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId ?? scopeId,
+  );

-  const [dropdownPlacement, setDropdownPlacement] = useRecoilState(
-    dropdownPlacementState,
+  const [dropdownPlacement, setDropdownPlacement] = useRecoilComponentStateV2(
+    dropdownPlacementComponentStateV2,
+    dropdownId ?? scopeId,
  );

  const closeDropdown = useCallback(() => {
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts
@ -1,6 +1,6 @@
 import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
 import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/dropdown/hooks/useSetFocusedDropdownIdAndMemorizePrevious';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+
 import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
 import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
@ -34,13 +34,6 @@ export const useOpenDropdown = () => {
          throw new Error('Dropdown component instance ID is not defined');
        }

-        set(
-          isDropdownOpenComponentState({
-            scopeId: dropdownComponentInstanceId,
-          }),
-          true,
-        );
-
        set(
          isDropdownOpenComponentStateV2.atomFamily({
            instanceId: dropdownComponentInstanceId,
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts
@ -1,7 +1,6 @@
 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 { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
 import { GlobalHotkeysConfig } from '@/ui/utilities/hotkey/types/GlobalHotkeysConfig';
 import { useAvailableComponentInstanceId } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceId';
@ -40,15 +39,7 @@ export const useToggleDropdown = () => {
          )
          .getValue();

-        const isDropdownOpenLegacy = snapshot
-          .getLoadable(
-            isDropdownOpenComponentState({
-              scopeId: dropdownComponentInstanceId,
-            }),
-          )
-          .getValue();
-
-        if (isDropdownOpen || isDropdownOpenLegacy) {
+        if (isDropdownOpen) {
          closeDropdown(dropdownComponentInstanceId);
        } else {
          openDropdown({
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts
@ -1,9 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-import { Placement } from '@floating-ui/react';
-
-export const dropdownPlacementComponentState =
-  createComponentState<Placement | null>({
-    key: 'dropdownPlacementComponentState',
-    defaultValue: null,
-  });
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts
@ -0,0 +1,11 @@
+import { DropdownComponentInstanceContext } from '@/ui/layout/dropdown/contexts/DropdownComponentInstanceContext';
+import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
+
+import { Placement } from '@floating-ui/react';
+
+export const dropdownPlacementComponentStateV2 =
+  createComponentStateV2<Placement | null>({
+    key: 'dropdownPlacementComponentState',
+    componentInstanceContext: DropdownComponentInstanceContext,
+    defaultValue: null,
+  });
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts
@ -1,9 +0,0 @@
-import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState';
-
-/**
- * @deprecated Use `isDropdownOpenComponentStateV2` instead.
- */
-export const isDropdownOpenComponentState = createComponentState<boolean>({
-  key: 'isDropdownOpenComponentState',
-  defaultValue: false,
-});
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
@ -1,8 +1,8 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
-import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
-import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
+import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2';
+import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { WorkflowVariablesDropdownFieldItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems';
 import { WorkflowVariablesDropdownObjectItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems';
 import { WorkflowVariablesDropdownWorkflowStepItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems';
@ -13,7 +13,6 @@ import { StepOutputSchema } from '@/workflow/workflow-variables/types/StepOutput
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { useRecoilValue } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { IconVariablePlus } from 'twenty-ui/display';

@ -48,8 +47,9 @@ export const WorkflowVariablesDropdown = ({
  const theme = useTheme();

  const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${inputId}`;
-  const isDropdownOpen = useRecoilValue(
-    extractComponentState(isDropdownOpenComponentState, dropdownId),
+  const isDropdownOpen = useRecoilComponentValueV2(
+    isDropdownOpenComponentStateV2,
+    dropdownId,
  );
  const { closeDropdown } = useCloseDropdown();
  const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep({