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 a96dddeb5..1f16d3679 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 @@ -9,7 +9,7 @@ import { createMockActionMenuActions } from '@/action-menu/mock/action-menu-acti import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext'; import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState'; -import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2'; +import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; import { RouterDecorator, @@ -39,7 +39,7 @@ const meta: Meta = { ); set( - isDropdownOpenComponentStateV2.atomFamily({ + isDropdownOpenComponentState.atomFamily({ instanceId: 'action-menu-dropdown-story-action-menu', }), true, diff --git a/packages/twenty-front/src/modules/dropdown-context-state-management/hooks/useDropdownContextStateManagement.ts b/packages/twenty-front/src/modules/dropdown-context-state-management/hooks/useDropdownContextStateManagement.ts index ee8593b61..0141c051e 100644 --- a/packages/twenty-front/src/modules/dropdown-context-state-management/hooks/useDropdownContextStateManagement.ts +++ b/packages/twenty-front/src/modules/dropdown-context-state-management/hooks/useDropdownContextStateManagement.ts @@ -1,7 +1,7 @@ import { ObjectOptionsDropdownContextValue } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext'; import { RecordBoardColumnHeaderAggregateDropdownContextValue } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext'; import { RecordTableColumnAggregateFooterDropdownContextValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterDropdownContext'; -import { useDropdown as useDropdownUi } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { Context, useCallback, useContext } from 'react'; /** @@ -28,12 +28,12 @@ export const useDropdownContextStateManagement = < ); } const dropdownId = dropdownContext.dropdownId; - const { closeDropdown } = useDropdownUi(dropdownId); + const { closeDropdown } = useCloseDropdown(); const handleCloseDropdown = useCallback(() => { dropdownContext.resetContent(); - closeDropdown(); - }, [closeDropdown, dropdownContext]); + closeDropdown(dropdownId); + }, [closeDropdown, dropdownContext, dropdownId]); return { ...dropdownContext, diff --git a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx index 74f26caa0..80963dad1 100644 --- a/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx +++ b/packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx @@ -11,7 +11,7 @@ import { isLocationMatchingFavorite } from '@/favorites/utils/isLocationMatching import { ProcessedFavorite } from '@/favorites/utils/sortFavorites'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; 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 { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { isModalOpenedComponentState } from '@/ui/layout/modal/states/isModalOpenedComponentState'; @@ -74,7 +74,7 @@ export const CurrentWorkspaceMemberFavorites = ({ const dropdownId = `favorite-folder-edit-${folder.folderId}`; const isDropdownOpenComponent = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx index 494f67954..ef552de16 100644 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx @@ -9,7 +9,7 @@ import { useRecordGroupReorderConfirmationModal } from '@/object-record/record-g import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { DROPDOWN_OFFSET_Y } from '@/ui/layout/dropdown/constants/DropdownOffsetY'; -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 { ViewType } from '@/views/types/ViewType'; import { Trans } from '@lingui/react/macro'; @@ -29,7 +29,7 @@ export const ObjectOptionsDropdown = ({ useDropdownContextCurrentContentId(); const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, OBJECT_OPTIONS_DROPDOWN_ID, ); diff --git a/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useOptionsDropdown.test.tsx b/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useOptionsDropdown.test.tsx deleted file mode 100644 index f90acf927..000000000 --- a/packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useOptionsDropdown.test.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import { renderHook } from '@testing-library/react'; -import { act } from 'react'; - -import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { OBJECT_OPTIONS_DROPDOWN_ID } from '@/object-record/object-options-dropdown/constants/ObjectOptionsDropdownId'; -import { useObjectOptionsDropdown } from '@/object-record/object-options-dropdown/hooks/useObjectOptionsDropdown'; -import { ObjectOptionsDropdownContext } from '@/object-record/object-options-dropdown/states/contexts/ObjectOptionsDropdownContext'; -import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { ViewType } from '@/views/types/ViewType'; - -jest.mock('@/ui/layout/dropdown/hooks/useDropdown', () => ({ - useDropdown: jest.fn(() => ({ - closeDropdown: jest.fn(), - })), -})); - -describe('useOptionsDropdown', () => { - const mockOnContentChange = jest.fn(); - const mockCloseDropdown = jest.fn(); - const mockResetContent = jest.fn(); - - beforeEach(() => { - jest.mocked(useDropdown).mockReturnValue({ - scopeId: 'mock-scope', - isDropdownOpen: false, - closeDropdown: mockCloseDropdown, - toggleDropdown: jest.fn(), - openDropdown: jest.fn(), - dropdownPlacement: null, - setDropdownPlacement: jest.fn(), - }); - }); - - afterEach(() => { - jest.clearAllMocks(); - }); - - const renderWithProvider = (contextValue: Partial = {}) => { - const wrapper = ({ children }: any) => ( - - {children} - - ); - return renderHook(() => useObjectOptionsDropdown(), { wrapper }); - }; - - it('provides closeDropdown functionality from the context', () => { - const { result } = renderWithProvider(); - - act(() => { - result.current.closeDropdown(); - }); - - expect(mockResetContent).toHaveBeenCalled(); - expect(mockCloseDropdown).toHaveBeenCalled(); - }); - - it('returns all context values', () => { - const { result } = renderWithProvider({ - currentContentId: 'fields', - }); - - expect(result.current).toHaveProperty('currentContentId', 'fields'); - expect(result.current).toHaveProperty( - 'onContentChange', - mockOnContentChange, - ); - expect(result.current).toHaveProperty('closeDropdown'); - expect(result.current).toHaveProperty('resetContent', mockResetContent); - }); -}); diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index 9b97918d6..5f64bc871 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -26,7 +26,7 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { DropdownHotkeyScope } from '@/ui/layout/dropdown/constants/DropdownHotkeyScope'; import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; -import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2'; +import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { SelectableListItem } from '@/ui/layout/selectable-list/components/SelectableListItem'; import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState'; @@ -195,7 +195,7 @@ export const ObjectSortDropdownButton = () => { }; const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, OBJECT_SORT_DROPDOWN_ID, ); diff --git a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx index ce25e7456..1330d5685 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx @@ -1,5 +1,5 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; -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 styled from '@emotion/styled'; import { Tag } from 'twenty-ui/components'; @@ -23,7 +23,7 @@ export const RecordBoardColumnHeaderAggregateDropdownButton = ({ tooltip?: string; }) => { const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx index 88971fafe..3e9954dcd 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx @@ -1,7 +1,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; 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 { MenuItemWithOptionDropdown } from '@/ui/navigation/menu-item/components/MenuItemWithOptionDropdown'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import React, { useState } from 'react'; @@ -37,7 +37,7 @@ export const MultiItemFieldMenuItem = ({ const [isHovered, setIsHovered] = useState(false); const { closeDropdown } = useCloseDropdown(); const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx index c91535093..5a13bd588 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx @@ -36,7 +36,7 @@ import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; -import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2'; +import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { ConfirmationModal } from '@/ui/layout/modal/components/ConfirmationModal'; import { useModal } from '@/ui/layout/modal/hooks/useModal'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; @@ -163,7 +163,7 @@ export const RecordDetailRelationRecordsListItem = ({ const { closeDropdown } = useCloseDropdown(); const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownScopeId, ); diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx index 6261f56b1..25756c306 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx @@ -16,7 +16,7 @@ import { AggregateOperations } from '@/object-record/record-table/constants/Aggr import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { prefetchIndexViewIdFromObjectMetadataItemFamilySelector } from '@/prefetch/states/selector/prefetchIndexViewIdFromObjectMetadataItemFamilySelector'; import { AppPath } from '@/types/AppPath'; -import { isDropdownOpenComponentStateV2 } from '@/ui/layout/dropdown/states/isDropdownOpenComponentStateV2'; +import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; @@ -71,7 +71,7 @@ export const RecordDetailRelationSection = ({ }); const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); 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 fb405e2b7..a47d58817 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,7 +18,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; -import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2'; +import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState'; 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'; @@ -55,7 +55,7 @@ export const RecordDetailRelationSectionDropdownToMany = () => { const { closeDropdown } = useCloseDropdown(); const dropdownPlacement = useRecoilComponentValueV2( - dropdownPlacementComponentStateV2, + dropdownPlacementComponentState, dropdownId, ); 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 f82c3948d..0945e5f90 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,7 +18,7 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; -import { dropdownPlacementComponentStateV2 } from '@/ui/layout/dropdown/states/dropdownPlacementComponentStateV2'; +import { dropdownPlacementComponentState } from '@/ui/layout/dropdown/states/dropdownPlacementComponentState'; 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'; @@ -57,7 +57,7 @@ export const RecordDetailRelationSectionDropdownToOne = () => { const { closeDropdown } = useCloseDropdown(); const dropdownPlacement = useRecoilComponentValueV2( - dropdownPlacementComponentStateV2, + dropdownPlacementComponentState, dropdownId, ); diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx index 839a88df3..c4c9fc060 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx @@ -3,7 +3,7 @@ import { RECORD_TABLE_TD_WIDTH } from '@/object-record/record-table/record-table import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext'; import { RecordTableColumnAggregateFooterValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue'; import { hasAggregateOperationForViewFieldFamilySelector } from '@/object-record/record-table/record-table-footer/states/hasAggregateOperationForViewFieldFamilySelector'; -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 { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; @@ -62,7 +62,7 @@ export const RecordTableColumnAggregateFooterValueCell = ({ const [isHovered, setIsHovered] = useState(false); const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx index 9bec7a4f9..ffae0c1f7 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/PhoneCountryPickerDropdownButton.tsx +++ b/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, ); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index 6964ae7a1..4cca74276 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/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, ); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownOnToggleEffect.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownOnToggleEffect.tsx index ecd5a8b61..6bb5d91e8 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownOnToggleEffect.tsx +++ b/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); 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 4120af483..8f4b8fd99 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 @@ -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, diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseAnyOpenDropdown.test.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseAnyOpenDropdown.test.tsx index 819a3fd51..cc62f05ea 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseAnyOpenDropdown.test.tsx +++ b/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, ); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseDropdown.test.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseDropdown.test.tsx new file mode 100644 index 000000000..cffdd7d7d --- /dev/null +++ b/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 ( + + + {children} + + + + ); +}; + +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); + }); +}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx deleted file mode 100644 index 4cd9c1f83..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useDropdown.test.tsx +++ /dev/null @@ -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 {children}; -}; - -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); - }); -}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useOpenDropdown.test.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useOpenDropdown.test.tsx new file mode 100644 index 000000000..53abb082b --- /dev/null +++ b/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 ( + + + {children} + + + + ); +}; + +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); + }); +}); diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useToggleDropdown.test.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useToggleDropdown.test.tsx new file mode 100644 index 000000000..38748877e --- /dev/null +++ b/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 ( + + + {children} + + + + ); +}; + +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); + }); +}); 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 deleted file mode 100644 index 0dd248238..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts +++ /dev/null @@ -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, - }; -}; 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 980f47e44..a1b55c145 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,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, 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 deleted file mode 100644 index 6f280b314..000000000 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts +++ /dev/null @@ -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) => { - 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, - ) => { - if (isDropdownOpen) { - closeDropdown(); - } else { - openDropdown(globalHotkeysConfig); - } - }; - - return { - scopeId, - isDropdownOpen, - closeDropdown, - toggleDropdown, - openDropdown, - dropdownPlacement, - setDropdownPlacement, - }; -}; 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 64a4e7c94..9fb769b64 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,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, 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 5454d2ec4..847853cab 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,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, }), ) diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts similarity index 90% rename from packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts rename to packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts index 018c2b6c7..2f0254d94 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts +++ b/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({ key: 'dropdownPlacementComponentState', componentInstanceContext: DropdownComponentInstanceContext, diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentStateV2.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts similarity index 72% rename from packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentStateV2.ts rename to packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts index 717b00333..beb2a08a2 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentStateV2.ts +++ b/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({ - key: 'isDropdownOpenComponentStateV2', +export const isDropdownOpenComponentState = createComponentStateV2({ + key: 'isDropdownOpenComponentState', defaultValue: false, componentInstanceContext: DropdownComponentInstanceContext, }); diff --git a/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx b/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx index 32f43e15d..578505b53 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx @@ -1,12 +1,12 @@ import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; -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 { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId'; import { Trans } from '@lingui/react/macro'; export const ViewBarFilterButton = () => { const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, VIEW_BAR_FILTER_DROPDOWN_ID, ); diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx index afbeadac1..5903509c8 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer'; -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 { useGetRecordIndexTotalCount } from '@/views/hooks/internal/useGetRecordIndexTotalCount'; import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly'; @@ -53,7 +53,7 @@ export const ViewPickerDropdown = () => { const { totalCount } = useGetRecordIndexTotalCount(); const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, VIEW_PICKER_DROPDOWN_ID, ); diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Content.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Content.tsx index 208d4490b..1bd52ddad 100644 --- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Content.tsx +++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Content.tsx @@ -4,7 +4,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth'; 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 { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID } from '@/workflow/workflow-diagram/constants/WorkflowDiagramEdgeOptionsClickOutsideId'; @@ -95,7 +95,7 @@ export const WorkflowDiagramEdgeV2Content = ({ const dropdownId = `${WORKFLOW_DIAGRAM_EDGE_OPTIONS_CLICK_OUTSIDE_ID}-${parentStepId}-${nextStepId}`; const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); 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 5a8558673..a9edee4eb 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,7 +1,7 @@ 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 { 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 { WorkflowVariablesDropdownFieldItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems'; import { WorkflowVariablesDropdownObjectItems } from '@/workflow/workflow-variables/components/WorkflowVariablesDropdownObjectItems'; @@ -48,7 +48,7 @@ export const WorkflowVariablesDropdown = ({ const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${instanceId}`; const isDropdownOpen = useRecoilComponentValueV2( - isDropdownOpenComponentStateV2, + isDropdownOpenComponentState, dropdownId, ); const { closeDropdown } = useCloseDropdown();