mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Removed useDropdown and its legacy states (#13111)

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

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
This commit is contained in:
Lucas Bordeau
2025-07-08 20:16:15 +02:00
committed by GitHub
parent 1bf5139f03
commit 66b633e08e
33 changed files with 404 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/action-menu/components/__stories__/RecordIndexActionMenuDropdown.stories.tsx
View File

@ -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<typeof RecordIndexActionMenuDropdown> = {
);
set(
isDropdownOpenComponentStateV2.atomFamily({
isDropdownOpenComponentState.atomFamily({
instanceId: 'action-menu-dropdown-story-action-menu',
}),
true,

8
packages/twenty-front/src/modules/dropdown-context-state-management/hooks/useDropdownContextStateManagement.ts
View File

@ -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,

4
packages/twenty-front/src/modules/favorites/components/CurrentWorkspaceMemberFavorites.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdown.tsx
View File

@ -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<ObjectOptionsContentId>();
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
isDropdownOpenComponentState,
OBJECT_OPTIONS_DROPDOWN_ID,
);

91
packages/twenty-front/src/modules/object-record/object-options-dropdown/hooks/__tests__/useOptionsDropdown.test.tsx
View File

@ -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<any> = {}) => {
const wrapper = ({ children }: any) => (
<ObjectOptionsDropdownContext.Provider
value={{
viewType: ViewType.Table,
objectMetadataItem: {
__typename: 'object',
id: '1',
nameSingular: 'company',
namePlural: 'companies',
labelSingular: 'Company',
labelPlural: 'Companies',
icon: 'IconBuildingSkyscraper',
fields: [{}],
} as ObjectMetadataItem,
recordIndexId: 'test-record-index',
currentContentId: 'recordGroups',
onContentChange: mockOnContentChange,
resetContent: mockResetContent,
dropdownId: OBJECT_OPTIONS_DROPDOWN_ID,
...contextValue,
}}
>
{children}
</ObjectOptionsDropdownContext.Provider>
);
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);
});
});

4
packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownButton.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/MultiItemFieldMenuItem.tsx
View File

@ -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 = <T,>({
const [isHovered, setIsHovered] = useState(false);
const { closeDropdown } = useCloseDropdown();
const isDropdownOpen = useRecoilComponentValueV2(
isDropdownOpenComponentStateV2,
isDropdownOpenComponentState,
dropdownId,
);

4
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToMany.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSectionDropdownToOne.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
View File

@ -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,
);

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

@ -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,
);

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

@ -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,
);

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

@ -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);

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

@ -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,

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

@ -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,
);

116
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useCloseDropdown.test.tsx Normal file
View File

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

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

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

95
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useOpenDropdown.test.tsx Normal file
View File

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

125
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/__tests__/useToggleDropdown.test.tsx Normal file
View File

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

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

@ -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,
};
};

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

@ -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,

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

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

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

@ -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,

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

@ -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,
}),
)

2
packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentStateV2.ts → packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownPlacementComponentState.ts
View File

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

4
packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentStateV2.ts → packages/twenty-front/src/modules/ui/layout/dropdown/states/isDropdownOpenComponentState.ts
View File

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

4
packages/twenty-front/src/modules/views/components/ViewBarFilterButton.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramEdgeV2Content.tsx
View File

@ -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,
);

4
packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
View File

@ -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();