From 2713285a0fc5708b1c9b65af81163ffbb576c641 Mon Sep 17 00:00:00 2001 From: Thomas Trompette Date: Wed, 10 Jan 2024 15:46:37 +0100 Subject: [PATCH] Migrate dropdown to scope map (#3338) * Migrate dropdown to scope map * Run lintr * Move Dropdown Scope internally * Fix * Fix lint --------- Co-authored-by: Thomas Trompette Co-authored-by: Charles Bochet --- .../files/components/AttachmentDropdown.tsx | 58 ++++--- .../board/components/CompanyBoard.tsx | 3 +- .../MultipleFiltersDropdownButton.tsx | 18 +-- ...ersDropdownFilterOnFilterChangedEffect.tsx | 3 +- ...ObjectFilterDropdownEntitySearchSelect.tsx | 3 +- ...SingleEntityObjectFilterDropdownButton.tsx | 58 ++++--- .../components/ObjectSortDropdownButton.tsx | 108 ++++++------- .../constants/BoardOptionsDropdownId.ts | 1 + .../components/RecordBoardOptionsDropdown.tsx | 30 ++-- .../RecordBoardOptionsDropdownButton.tsx | 5 +- .../RecordBoardOptionsDropdownContent.tsx | 3 +- .../RecordRelationFieldCardSection.tsx | 52 +++--- .../components/ColumnHeadWithDropdown.tsx | 32 ++-- .../components/RecordTableHeader.tsx | 32 ++-- .../constants/ColumnHeadDropdownId.ts | 2 +- .../constants/TableHiddenFieldsDropdownId.ts} | 2 +- .../constants/TableOptionsDropdownId.ts | 2 +- .../components/TableOptionsDropdown.tsx | 28 ++-- .../TableOptionsDropdownContent.tsx | 3 +- .../pipeline/components/PipelineAddButton.tsx | 56 ++++--- .../SettingsAccountsRowDropdownMenu.tsx | 64 ++++---- .../SettingsObjectFieldRelationForm.tsx | 2 +- ...SettingsObjectFieldSelectFormOptionRow.tsx | 149 +++++++++--------- .../components/SettingsObjectAboutSection.tsx | 56 ++++--- ...ettingsObjectFieldActiveActionDropdown.tsx | 56 ++++--- ...tingsObjectFieldDisabledActionDropdown.tsx | 48 +++--- .../SettingsObjectDisabledMenuDropDown.tsx | 58 ++++--- .../ui/input/components/IconPicker.tsx | 138 ++++++++-------- .../modules/ui/input/components/Select.tsx | 52 +++--- .../CountryPickerDropdownButton.tsx | 44 +++--- .../layout/dropdown/components/Dropdown.tsx | 69 ++++---- .../__stories__/DropdownMenu.stories.tsx | 11 +- .../hooks/internal/useDropdownScopedStates.ts | 31 ---- .../hooks/internal/useDropdownStates.ts | 26 +++ .../ui/layout/dropdown/hooks/useDropdown.ts | 33 ++-- .../hooks/useInternalHotkeyScopeManagement.ts | 12 +- ...tate.ts => dropdownHotkeyStateScopeMap.ts} | 4 +- .../states/dropdownWidthScopedState.ts | 8 - .../states/dropdownWidthStateScopeMap.ts | 8 + ...tate.ts => isDropdownOpenStateScopeMap.ts} | 4 +- .../internal/getDropdownScopeInjectors.ts | 22 --- .../components/ShowPageAddButton.tsx | 70 ++++---- .../components/ShowPageMoreButton.tsx | 58 ++++--- .../EditableFilterDropdownButton.tsx | 1 + .../components/UpdateViewButtonGroup.tsx | 38 +++-- .../views/components/ViewBarDetails.tsx | 25 ++- .../views/components/ViewsDropdownButton.tsx | 98 ++++++------ 47 files changed, 803 insertions(+), 881 deletions(-) create mode 100644 packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts rename packages/twenty-front/src/modules/object-record/{record-board/components/constants/BoardOptionsDropdownId.ts => record-table/constants/TableHiddenFieldsDropdownId.ts} (58%) delete mode 100644 packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownScopedStates.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/dropdown/hooks/internal/useDropdownStates.ts rename packages/twenty-front/src/modules/ui/layout/dropdown/states/{dropdownHotkeyScopeScopedState.ts => dropdownHotkeyStateScopeMap.ts} (67%) delete mode 100644 packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthScopedState.ts create mode 100644 packages/twenty-front/src/modules/ui/layout/dropdown/states/dropdownWidthStateScopeMap.ts rename packages/twenty-front/src/modules/ui/layout/dropdown/states/{isDropdownOpenScopedState.ts => isDropdownOpenStateScopeMap.ts} (51%) delete mode 100644 packages/twenty-front/src/modules/ui/layout/dropdown/utils/internal/getDropdownScopeInjectors.ts diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx index 6b285ca4f..33aebff64 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentDropdown.tsx @@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type AttachmentDropdownProps = { @@ -18,9 +17,9 @@ export const AttachmentDropdown = ({ onDelete, scopeKey, }: AttachmentDropdownProps) => { - const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`; + const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`; - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); const handleDownload = () => { onDownload(); @@ -33,32 +32,31 @@ export const AttachmentDropdown = ({ }; return ( - - - } - dropdownComponents={ - - - - - - - } - dropdownHotkeyScope={{ - scope: dropdownScopeId, - }} - /> - + + } + dropdownComponents={ + + + + + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> ); }; diff --git a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx index 4199612ca..effe58897 100644 --- a/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx +++ b/packages/twenty-front/src/modules/companies/board/components/CompanyBoard.tsx @@ -6,6 +6,7 @@ import { RecordBoardProps, } from '@/object-record/record-board/components/RecordBoard'; import { RecordBoardEffect } from '@/object-record/record-board/components/RecordBoardEffect'; +import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId'; import { RecordBoardOptionsDropdown } from '@/object-record/record-board/options/components/RecordBoardOptionsDropdown'; import { ViewBar } from '@/views/components/ViewBar'; import { useViewFields } from '@/views/hooks/internal/useViewFields'; @@ -43,7 +44,7 @@ export const CompanyBoard = ({ optionsDropdownButton={ } - optionsDropdownScopeId={recordBoardId} + optionsDropdownScopeId={BoardOptionsDropdownId} /> - } - dropdownComponents={} - dropdownHotkeyScope={hotkeyScope} - dropdownOffset={{ y: 8 }} - /> - + } + dropdownComponents={} + dropdownHotkeyScope={hotkeyScope} + dropdownOffset={{ y: 8 }} + /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx index 477e74d34..2074b0489 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownFilterOnFilterChangedEffect.tsx @@ -1,5 +1,6 @@ import { useEffect } from 'react'; +import { ObjectFilterDropdownId } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({ @@ -7,7 +8,7 @@ export const MultipleFiltersDropdownFilterOnFilterChangedEffect = ({ }: { filterDefinitionUsedInDropdownType: string | undefined; }) => { - const { setDropdownWidth } = useDropdown(); + const { setDropdownWidth } = useDropdown(ObjectFilterDropdownId); useEffect(() => { switch (filterDefinitionUsedInDropdownType) { diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx index 1b5a6bb7b..b05854601 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownEntitySearchSelect.tsx @@ -1,5 +1,6 @@ import { useEffect, useState } from 'react'; +import { ObjectFilterDropdownId } from '@/object-record/object-filter-dropdown/constants/ObjectFilterDropdownId'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { EntitiesForMultipleEntitySelect } from '@/object-record/relation-picker/components/MultipleEntitySelect'; import { SingleEntitySelectMenuItems } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems'; @@ -21,7 +22,7 @@ export const ObjectFilterDropdownEntitySearchSelect = ({ selectFilter, } = useFilterDropdown(); - const { closeDropdown } = useDropdown(); + const { closeDropdown } = useDropdown(ObjectFilterDropdownId); const [isAllEntitySelected, setIsAllEntitySelected] = useState(false); diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx index bbf302975..f87665839 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/SingleEntityObjectFilterDropdownButton.tsx @@ -5,7 +5,6 @@ import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/ import { IconChevronDown } from '@/ui/display/icon/index'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { ViewFilterOperand } from '@/views/types/ViewFilterOperand'; @@ -42,34 +41,33 @@ export const SingleEntityObjectFilterDropdownButton = ({ const theme = useTheme(); return ( - - - {selectedFilter ? ( - - ) : ( - 'Filter' - )} - - - } - dropdownComponents={ - <> - - - - } - /> - + + {selectedFilter ? ( + + ) : ( + 'Filter' + )} + + + } + dropdownComponents={ + <> + + + + } + /> ); }; 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 02ca68657..dc98dd90e 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 @@ -10,7 +10,6 @@ import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenu import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; @@ -70,63 +69,60 @@ export const ObjectSortDropdownButton = ({ return ( - - - } - dropdownComponents={ - <> - {isSortDirectionMenuUnfolded ? ( + + } + dropdownComponents={ + <> + {isSortDirectionMenuUnfolded ? ( + + {SORT_DIRECTIONS.map((sortOrder, index) => ( + { + setSelectedSortDirection(sortOrder); + setIsSortDirectionMenuUnfolded(false); + }} + text={sortOrder === 'asc' ? 'Ascending' : 'Descending'} + /> + ))} + + ) : ( + <> + setIsSortDirectionMenuUnfolded(true)} + > + {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'} + + - {SORT_DIRECTIONS.map((sortOrder, index) => ( - { - setSelectedSortDirection(sortOrder); - setIsSortDirectionMenuUnfolded(false); - }} - text={sortOrder === 'asc' ? 'Ascending' : 'Descending'} - /> - ))} + {[...availableSortDefinitions] + .sort((a, b) => a.label.localeCompare(b.label)) + .map((availableSortDefinition, index) => ( + handleAddSort(availableSortDefinition)} + LeftIcon={getIcon(availableSortDefinition.iconName)} + text={availableSortDefinition.label} + /> + ))} - ) : ( - <> - setIsSortDirectionMenuUnfolded(true)} - > - {selectedSortDirection === 'asc' - ? 'Ascending' - : 'Descending'} - - - - {[...availableSortDefinitions] - .sort((a, b) => a.label.localeCompare(b.label)) - .map((availableSortDefinition, index) => ( - handleAddSort(availableSortDefinition)} - LeftIcon={getIcon(availableSortDefinition.iconName)} - text={availableSortDefinition.label} - /> - ))} - - - )} - - } - onClose={handleDropdownButtonClose} - /> - + + )} + + } + onClose={handleDropdownButtonClose} + /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts new file mode 100644 index 000000000..d68691780 --- /dev/null +++ b/packages/twenty-front/src/modules/object-record/record-board/constants/BoardOptionsDropdownId.ts @@ -0,0 +1 @@ +export const BoardOptionsDropdownId = 'board-options-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx index 101061660..26fcdb9bc 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdown.tsx @@ -1,8 +1,7 @@ +import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId'; import { useViewBar } from '@/views/hooks/useViewBar'; import { Dropdown } from '../../../../ui/layout/dropdown/components/Dropdown'; -import { DropdownScope } from '../../../../ui/layout/dropdown/scopes/DropdownScope'; -import { BoardOptionsDropdownId } from '../../components/constants/BoardOptionsDropdownId'; import { BoardOptionsHotkeyScope } from '../../types/BoardOptionsHotkeyScope'; import { RecordBoardOptionsDropdownButton } from './RecordBoardOptionsDropdownButton'; @@ -23,19 +22,18 @@ export const RecordBoardOptionsDropdown = ({ const { setViewEditMode } = useViewBar(); return ( - - } - dropdownComponents={ - - } - dropdownHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }} - onClickOutside={() => setViewEditMode('none')} - dropdownMenuWidth={170} - /> - + } + dropdownComponents={ + + } + dropdownHotkeyScope={{ scope: BoardOptionsHotkeyScope.Dropdown }} + onClickOutside={() => setViewEditMode('none')} + dropdownMenuWidth={170} + /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx index 6325b4a6b..12492a5c6 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownButton.tsx @@ -1,8 +1,11 @@ +import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId'; import { StyledHeaderDropdownButton } from '@/ui/layout/dropdown/components/StyledHeaderDropdownButton'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; export const RecordBoardOptionsDropdownButton = () => { - const { isDropdownOpen, toggleDropdown } = useDropdown(); + const { isDropdownOpen, toggleDropdown } = useDropdown( + BoardOptionsDropdownId, + ); const handleClick = () => { toggleDropdown(); diff --git a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx index 4498dd83a..237469edd 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/options/components/RecordBoardOptionsDropdownContent.tsx @@ -4,6 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; import { v4 } from 'uuid'; +import { BoardOptionsDropdownId } from '@/object-record/record-board/constants/BoardOptionsDropdownId'; import { useRecordBoardScopedStates } from '@/object-record/record-board/hooks/internal/useRecordBoardScopedStates'; import { IconBaselineDensitySmall, @@ -110,7 +111,7 @@ export const RecordBoardOptionsDropdownContent = ({ recordBoardScopeId: recordBoardId, }); - const { closeDropdown } = useDropdown(); + const { closeDropdown } = useDropdown(BoardOptionsDropdownId); const handleReorderField: OnDragEndResponder = useCallback( (result) => { diff --git a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx index 87392588a..56e324bec 100644 --- a/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx +++ b/packages/twenty-front/src/modules/object-record/record-relation-card/components/RecordRelationFieldCardSection.tsx @@ -23,7 +23,6 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { Card } from '@/ui/layout/card/components/Card'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { Section } from '@/ui/layout/section/components/Section'; const StyledAddDropdown = styled(Dropdown)` @@ -129,9 +128,9 @@ export const RecordRelationFieldCardSection = () => { ); }, [relationRecords, upsertRecordFromState]); - const dropdownScopeId = `record-field-card-relation-picker-${fieldDefinition.label}`; + const dropdownId = `record-field-card-relation-picker-${fieldDefinition.label}`; - const { closeDropdown, isDropdownOpen } = useDropdown(dropdownScopeId); + const { closeDropdown, isDropdownOpen } = useDropdown(dropdownId); const { identifiersMapper, @@ -196,30 +195,29 @@ export const RecordRelationFieldCardSection = () => {
{fieldDefinition.label} - - - } - dropdownComponents={ - - } - dropdownHotkeyScope={{ - scope: dropdownScopeId, - }} - /> - + + } + dropdownComponents={ + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> {!!relationRecords.length && ( diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx index be45fa901..a90a85d3b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHeadWithDropdown.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { FieldMetadata } from '../../field/types/FieldMetadata'; import { ColumnDefinition } from '../types/ColumnDefinition'; @@ -28,21 +27,20 @@ export const ColumnHeadWithDropdown = ({ primaryColumnKey, }: ColumnHeadWithDropdownProps) => { return ( - - } - dropdownComponents={ - - } - dropdownOffset={{ x: -1 }} - dropdownPlacement="bottom-start" - dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }} - /> - + } + dropdownComponents={ + + } + dropdownOffset={{ x: -1 }} + dropdownPlacement="bottom-start" + dropdownHotkeyScope={{ scope: column.fieldMetadataId + '-header' }} + /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx index d43ac048b..37d11b13c 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx @@ -6,7 +6,6 @@ import { RecordTableHeaderCell } from '@/object-record/record-table/components/R import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconPlus } from '@/ui/display/icon'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef'; import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates'; @@ -48,7 +47,7 @@ const StyledPlusIconContainer = styled.div` width: 32px; `; -const HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID = +export const HIDDEN_TABLE_COLUMN_DROPDOWN_ID = 'hidden-table-columns-dropdown-scope-id'; const HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID = @@ -106,22 +105,19 @@ export const RecordTableHeader = ({ isTableWiderThanScreen={isTableWiderThanScreen} > {hiddenTableColumns.length > 0 && ( - - - - - } - dropdownComponents={} - dropdownPlacement="bottom-start" - dropdownHotkeyScope={{ - scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID, - }} - /> - + + + + } + dropdownComponents={} + dropdownPlacement="bottom-start" + dropdownHotkeyScope={{ + scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID, + }} + /> )} diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts index 58b4d2735..767e31d61 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/ColumnHeadDropdownId.ts @@ -1 +1 @@ -export const ColumnHeadDropdownId = 'table-head-options'; +export const ColumnHeadDropdownId = 'table-head-options-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/constants/BoardOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts similarity index 58% rename from packages/twenty-front/src/modules/object-record/record-board/components/constants/BoardOptionsDropdownId.ts rename to packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts index 6085a3301..ce9714934 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/constants/BoardOptionsDropdownId.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/TableHiddenFieldsDropdownId.ts @@ -1,2 +1,2 @@ // We should either apply the constant all caps case or maybe define a more general enum to store those ids ? -export const BoardOptionsDropdownId = 'board-options'; +export const TableHiddenFieldsDropdownId = 'table-hidden-fields-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts b/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts index 2755b8c91..57628d119 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts +++ b/packages/twenty-front/src/modules/object-record/record-table/constants/TableOptionsDropdownId.ts @@ -1,2 +1,2 @@ // We should either apply the constant all caps case or maybe define a more general enum to store those ids ? -export const TableOptionsDropdownId = 'table-options'; +export const TableOptionsDropdownId = 'table-options-dropdown-id'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx index 44bdd29dc..874268a2f 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdown.tsx @@ -1,5 +1,4 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { useViewBar } from '@/views/hooks/useViewBar'; import { TableOptionsDropdownId } from '../../constants/TableOptionsDropdownId'; @@ -18,19 +17,18 @@ export const TableOptionsDropdown = ({ const { setViewEditMode } = useViewBar(); return ( - - } - dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }} - dropdownOffset={{ y: 8 }} - dropdownComponents={ - - } - onClickOutside={() => setViewEditMode('none')} - /> - + } + dropdownHotkeyScope={{ scope: TableOptionsHotkeyScope.Dropdown }} + dropdownOffset={{ y: 8 }} + dropdownComponents={ + + } + onClickOutside={() => setViewEditMode('none')} + /> ); }; diff --git a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx index 9d17d9642..c257a5e9b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/options/components/TableOptionsDropdownContent.tsx @@ -3,6 +3,7 @@ import { OnDragEndResponder } from '@hello-pangea/dnd'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; +import { TableOptionsDropdownId } from '@/object-record/record-table/constants/TableOptionsDropdownId'; import { useRecordTableScopedStates } from '@/object-record/record-table/hooks/internal/useRecordTableScopedStates'; import { getRecordTableScopeInjector } from '@/object-record/record-table/utils/getRecordTableScopeInjector'; import { IconChevronLeft, IconFileImport, IconTag } from '@/ui/display/icon'; @@ -34,7 +35,7 @@ export const TableOptionsDropdownContent = ({ const viewEditMode = useRecoilValue(viewEditModeState); const currentView = useRecoilValue(currentViewSelector); - const { closeDropdown } = useDropdown(); + const { closeDropdown } = useDropdown(TableOptionsDropdownId); const [currentMenu, setCurrentMenu] = useState( undefined, diff --git a/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx b/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx index 9460d4ba4..3216578ec 100644 --- a/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx +++ b/packages/twenty-front/src/modules/pipeline/components/PipelineAddButton.tsx @@ -8,7 +8,6 @@ import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { IconButton } from '@/ui/input/button/components/IconButton'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { logError } from '~/utils/logError'; export const PipelineAddButton = () => { @@ -48,33 +47,32 @@ export const PipelineAddButton = () => { }; return ( - - - } - dropdownComponents={ - - } - hotkey={{ - key: 'c', - scope: PageHotkeyScope.OpportunitiesPage, - }} - dropdownHotkeyScope={{ - scope: RelationPickerHotkeyScope.RelationPicker, - }} - /> - + + } + dropdownComponents={ + + } + hotkey={{ + key: 'c', + scope: PageHotkeyScope.OpportunitiesPage, + }} + dropdownHotkeyScope={{ + scope: RelationPickerHotkeyScope.RelationPicker, + }} + /> ); }; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx index 963c7b2fd..a9c1c421f 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx @@ -7,7 +7,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsAccountsRowDropdownMenuProps = { @@ -21,46 +20,45 @@ export const SettingsAccountsRowDropdownMenu = ({ className, onRemove, }: SettingsAccountsRowDropdownMenuProps) => { - const dropdownScopeId = `settings-account-row-${account.id}`; + const dropdownId = `settings-account-row-${account.id}`; const navigate = useNavigate(); - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); return ( - - - } - dropdownComponents={ - - + + } + dropdownComponents={ + + + { + navigate(`/settings/accounts/emails/${account.id}`); + closeDropdown(); + }} + /> + {!!onRemove && ( { - navigate(`/settings/accounts/emails/${account.id}`); + onRemove(account.id); closeDropdown(); }} /> - {!!onRemove && ( - { - onRemove(account.id); - closeDropdown(); - }} - /> - )} - - - } - /> - + )} + + + } + /> ); }; diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx index 1b409a983..b2ef117b6 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx @@ -105,7 +105,7 @@ export const SettingsObjectFieldRelationForm = ({ onChange({ diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx index 205853f25..ef71223fa 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx @@ -17,7 +17,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor'; import { mainColorNames } from '@/ui/theme/constants/colors'; @@ -63,16 +62,14 @@ export const SettingsObjectFieldSelectFormOptionRow = ({ }: SettingsObjectFieldSelectFormOptionRowProps) => { const theme = useTheme(); - const dropdownScopeIds = useMemo(() => { + const dropdownIds = useMemo(() => { const baseScopeId = `select-field-option-row-${v4()}`; return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` }; }, []); - const { closeDropdown: closeColorDropdown } = useDropdown( - dropdownScopeIds.color, - ); + const { closeDropdown: closeColorDropdown } = useDropdown(dropdownIds.color); const { closeDropdown: closeActionsDropdown } = useDropdown( - dropdownScopeIds.actions, + dropdownIds.actions, ); return ( @@ -82,82 +79,80 @@ export const SettingsObjectFieldSelectFormOptionRow = ({ stroke={theme.icon.stroke.sm} color={theme.font.color.extraLight} /> - - } - dropdownComponents={ - - - {mainColorNames.map((colorName) => ( - { - onChange({ ...option, color: colorName }); - closeColorDropdown(); - }} - color={colorName} - selected={colorName === option.color} - /> - ))} - - - } - /> - + } + dropdownComponents={ + + + {mainColorNames.map((colorName) => ( + { + onChange({ ...option, color: colorName }); + closeColorDropdown(); + }} + color={colorName} + selected={colorName === option.color} + /> + ))} + + + } + /> onChange({ ...option, label })} RightIcon={isDefault ? IconCheck : undefined} /> - - } - dropdownComponents={ - - - {isDefault ? ( - { - onChange({ ...option, isDefault: false }); - closeActionsDropdown(); - }} - /> - ) : ( - { - onChange({ ...option, isDefault: true }); - closeActionsDropdown(); - }} - /> - )} - {!!onRemove && ( - { - onRemove(); - closeActionsDropdown(); - }} - /> - )} - - - } - /> - + } + dropdownComponents={ + + + {isDefault ? ( + { + onChange({ ...option, isDefault: false }); + closeActionsDropdown(); + }} + /> + ) : ( + { + onChange({ ...option, isDefault: true }); + closeActionsDropdown(); + }} + /> + )} + {!!onRemove && ( + { + onRemove(); + closeActionsDropdown(); + }} + /> + )} + + + } + /> ); }; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx index e93da2324..cf60f1357 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx @@ -12,7 +12,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { Section } from '@/ui/layout/section/components/Section'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; @@ -44,7 +43,7 @@ const StyledTag = styled(Tag)` height: ${({ theme }) => theme.spacing(6)}; `; -const dropdownScopeId = 'settings-object-edit-about-menu-dropdown'; +const dropdownId = 'settings-object-edit-about-menu-dropdown'; export const SettingsAboutSection = ({ iconKey = '', @@ -57,7 +56,7 @@ export const SettingsAboutSection = ({ const { getIcon } = useIcons(); const Icon = getIcon(iconKey); - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); const handleEdit = () => { onEdit(); @@ -83,32 +82,31 @@ export const SettingsAboutSection = ({ ) : ( )} - - - } - dropdownComponents={ - - - - - - - } - dropdownHotkeyScope={{ - scope: dropdownScopeId, - }} - /> - + + } + dropdownComponents={ + + + + + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + />
diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx index e739e882a..cdbfb0b6a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldActiveActionDropdown.tsx @@ -9,7 +9,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectFieldActiveActionDropdownProps = { @@ -25,9 +24,9 @@ export const SettingsObjectFieldActiveActionDropdown = ({ onEdit, scopeKey, }: SettingsObjectFieldActiveActionDropdownProps) => { - const dropdownScopeId = `${scopeKey}-settings-field-active-action-dropdown`; + const dropdownId = `${scopeKey}-settings-field-active-action-dropdown`; - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); const handleEdit = () => { onEdit(); @@ -40,33 +39,32 @@ export const SettingsObjectFieldActiveActionDropdown = ({ }; return ( - - - } - dropdownComponents={ - - + + } + dropdownComponents={ + + + + {!!onDisable && ( - {!!onDisable && ( - - )} - - - } - dropdownHotkeyScope={{ - scope: dropdownScopeId, - }} - /> - + )} + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> ); }; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx index a80638e4b..101d5aac2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDisabledActionDropdown.tsx @@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectFieldDisabledActionDropdownProps = { @@ -18,9 +17,9 @@ export const SettingsObjectFieldDisabledActionDropdown = ({ onActivate, scopeKey, }: SettingsObjectFieldDisabledActionDropdownProps) => { - const dropdownScopeId = `${scopeKey}-settings-field-disabled-action-dropdown`; + const dropdownId = `${scopeKey}-settings-field-disabled-action-dropdown`; - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); const handleActivate = () => { onActivate(); @@ -33,20 +32,20 @@ export const SettingsObjectFieldDisabledActionDropdown = ({ // }; return ( - - - } - dropdownComponents={ - - - - {/* {isCustomField && ( + + } + dropdownComponents={ + + + + {/* {isCustomField && ( )} */} - - - } - dropdownHotkeyScope={{ - scope: dropdownScopeId, - }} - /> - + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> ); }; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx index b2a5e4781..18bb9b5f2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx @@ -4,7 +4,6 @@ import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; type SettingsObjectDisabledMenuDropDownProps = { @@ -20,9 +19,9 @@ export const SettingsObjectDisabledMenuDropDown = ({ onErase, isCustomObject, }: SettingsObjectDisabledMenuDropDownProps) => { - const dropdownScopeId = `${scopeKey}-settings-object-disabled-menu-dropdown`; + const dropdownId = `${scopeKey}-settings-object-disabled-menu-dropdown`; - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); const handleActivate = () => { onActivate(); @@ -35,34 +34,33 @@ export const SettingsObjectDisabledMenuDropDown = ({ }; return ( - - - } - dropdownComponents={ - - + + } + dropdownComponents={ + + + + {isCustomObject && ( - {isCustomObject && ( - - )} - - - } - dropdownHotkeyScope={{ - scope: dropdownScopeId, - }} - /> - + )} + + + } + dropdownHotkeyScope={{ + scope: dropdownId, + }} + /> ); }; diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index 97182ec1c..bd6d27866 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -11,7 +11,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; @@ -23,7 +22,7 @@ import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope'; type IconPickerProps = { disabled?: boolean; - dropdownScopeId?: string; + dropdownId?: string; onChange: (params: { iconKey: string; Icon: IconComponent }) => void; selectedIconKey?: string; onClickOutside?: () => void; @@ -80,7 +79,7 @@ const IconPickerIcon = ({ export const IconPicker = ({ disabled, - dropdownScopeId = 'icon-picker', + dropdownId = 'icon-picker', onChange, selectedIconKey, onClickOutside, @@ -95,7 +94,7 @@ export const IconPicker = ({ setHotkeyScopeAndMemorizePreviousScope, } = usePreviousHotkeyScope(); - const { closeDropdown } = useDropdown(dropdownScopeId); + const { closeDropdown } = useDropdown(dropdownId); const { getIcons, getIcon } = useIcons(); const icons = getIcons(); @@ -126,71 +125,70 @@ export const IconPicker = ({ ); return ( - -
- - } - dropdownMenuWidth={176} - dropdownComponents={ - { - onChange({ iconKey, Icon: getIcon(iconKey) }); - closeDropdown(); - }} - > - - setSearchString(event.target.value)} - /> - -
{ - setHotkeyScopeAndMemorizePreviousScope( - IconPickerHotkeyScope.IconPicker, - ); - }} - onMouseLeave={goBackToPreviousHotkeyScope} - > - - - {iconKeys.map((iconKey) => ( - { - onChange({ iconKey, Icon: getIcon(iconKey) }); - closeDropdown(); - }} - selectedIconKey={selectedIconKey} - Icon={getIcon(iconKey)} - /> - ))} - - -
- - - } - onClickOutside={onClickOutside} - onClose={() => { - onClose?.(); - setSearchString(''); - }} - onOpen={onOpen} - /> -
- +
+ + } + dropdownMenuWidth={176} + dropdownComponents={ + { + onChange({ iconKey, Icon: getIcon(iconKey) }); + closeDropdown(); + }} + > + + setSearchString(event.target.value)} + /> + +
{ + setHotkeyScopeAndMemorizePreviousScope( + IconPickerHotkeyScope.IconPicker, + ); + }} + onMouseLeave={goBackToPreviousHotkeyScope} + > + + + {iconKeys.map((iconKey) => ( + { + onChange({ iconKey, Icon: getIcon(iconKey) }); + closeDropdown(); + }} + selectedIconKey={selectedIconKey} + Icon={getIcon(iconKey)} + /> + ))} + + +
+ + + } + onClickOutside={onClickOutside} + onClose={() => { + onClose?.(); + setSearchString(''); + }} + onOpen={onOpen} + /> +
); }; diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 56fca8ed9..c58404085 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -6,7 +6,6 @@ import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { SelectHotkeyScope } from '../types/SelectHotkeyScope'; @@ -98,31 +97,30 @@ export const Select = ({ {selectControl} ) : ( - -
- {!!label && {label}} - - {options.map((option) => ( - { - onChange?.(option.value); - closeDropdown(); - }} - /> - ))} - - } - dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }} - /> -
- +
+ {!!label && {label}} + + {options.map((option) => ( + { + onChange?.(option.value); + closeDropdown(); + }} + /> + ))} + + } + dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }} + /> +
); }; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx index 74eec4252..8f5aa8119 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx @@ -9,7 +9,6 @@ import { CountryCallingCode } from 'libphonenumber-js'; import { IconChevronDown, IconWorld } from '@/ui/display/icon'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; -import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { CountryPickerHotkeyScope } from '../types/CountryPickerHotkeyScope'; @@ -119,27 +118,26 @@ export const CountryPickerDropdownButton = ({ }, [countries, value]); return ( - - - - {selectedCountry ? : } - - - - } - dropdownComponents={ - - } - dropdownPlacement="bottom-start" - dropdownOffset={{ x: 0, y: 4 }} - /> - + + + {selectedCountry ? : } + + + + } + dropdownComponents={ + + } + dropdownPlacement="bottom-start" + dropdownOffset={{ x: 0, y: 4 }} + /> ); }; 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 2f9866221..57f1bc0b4 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 @@ -9,6 +9,7 @@ import { } from '@floating-ui/react'; import { Key } from 'ts-key-enum'; +import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; @@ -29,6 +30,7 @@ type DropdownProps = { scope: string; }; dropdownHotkeyScope: HotkeyScope; + dropdownId: string; dropdownPlacement?: Placement; dropdownMenuWidth?: number; dropdownOffset?: { x?: number; y?: number }; @@ -43,6 +45,7 @@ export const Dropdown = ({ dropdownComponents, dropdownMenuWidth, hotkey, + dropdownId, dropdownHotkeyScope, dropdownPlacement = 'bottom-end', dropdownOffset = { x: 0, y: 0 }, @@ -53,8 +56,7 @@ export const Dropdown = ({ const containerRef = useRef(null); const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } = - useDropdown(); - + useDropdown(dropdownId); const offsetMiddlewares = []; if (dropdownOffset.x) { @@ -87,6 +89,7 @@ export const Dropdown = ({ }); useInternalHotkeyScopeManagement({ + dropdownScopeId: `${dropdownId}-scope`, dropdownHotkeyScopeFromParent: dropdownHotkeyScope, }); @@ -100,36 +103,38 @@ export const Dropdown = ({ ); return ( -
- {clickableComponent && ( -
- {clickableComponent} -
- )} - {hotkey && ( - +
+ {clickableComponent && ( +
+ {clickableComponent} +
+ )} + {hotkey && ( + + )} + {isDropdownOpen && ( + + {dropdownComponents} + + )} + - )} - {isDropdownOpen && ( - - {dropdownComponents} - - )} - -
+
+ ); }; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx index ae11a6cff..0e2a412a6 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -12,7 +12,6 @@ import { MenuItemSelectAvatar } from '@/ui/navigation/menu-item/components/MenuI import { Avatar } from '@/users/components/Avatar'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { DropdownScope } from '../../scopes/DropdownScope'; import { Dropdown } from '../Dropdown'; import { DropdownMenuHeader } from '../DropdownMenuHeader'; import { DropdownMenuInput } from '../DropdownMenuInput'; @@ -25,18 +24,12 @@ const meta: Meta = { title: 'UI/Layout/Dropdown/Dropdown', component: Dropdown, - decorators: [ - ComponentDecorator, - (Story) => ( - - - - ), - ], + decorators: [ComponentDecorator, (Story) => ], args: { clickableComponent: