diff --git 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 index 5dcdc1ba0..a96dddeb5 100644 --- 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 = { ); set( - extractComponentState( - isDropdownOpenComponentState, - 'action-menu-dropdown-story-action-menu', - ), + isDropdownOpenComponentStateV2.atomFamily({ + instanceId: 'action-menu-dropdown-story-action-menu', + }), true, ); }} diff --git 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 index 21cad55d8..1b8bc2aa1 100644 --- 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, diff --git 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 index 2343e32ad..43865587b 100644 --- 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, diff --git 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 index 187193e6a..02f6de326 100644 --- 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, ], ); }; diff --git 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 index 988ee7571..4120af483 100644 --- 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]); diff --git 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 index a96a2837c..0dd248238 100644 --- 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, - ), }; }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useCloseDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useCloseDropdown.ts index f031f6406..980f47e44 100644 --- 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, - ); } }, [ diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts index ddf3ad8ce..6f280b314 100644 --- 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(() => { diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useOpenDropdown.ts index c38b495d9..64a4e7c94 100644 --- 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, diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useToggleDropdown.ts index 279b418a1..dcc832f38 100644 --- 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({ diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts deleted file mode 100644 index e8e4b9df0..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - -import { Placement } from '@floating-ui/react'; - -export const dropdownPlacementComponentState = - createComponentState({ - key: 'dropdownPlacementComponentState', - defaultValue: null, - }); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts new file mode 100644 index 000000000..018c2b6c7 --- /dev/null +++ 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({ + key: 'dropdownPlacementComponentState', + componentInstanceContext: DropdownComponentInstanceContext, + defaultValue: null, + }); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts deleted file mode 100644 index 44722fde6..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { createComponentState } from '@/ui/utilities/state/component-state/utils/createComponentState'; - -/** - * @deprecated Use `isDropdownOpenComponentStateV2` instead. - */ -export const isDropdownOpenComponentState = createComponentState({ - key: 'isDropdownOpenComponentState', - defaultValue: false, -}); diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx index 80792b075..badcaa5c6 100644 --- 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({