diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx index b1c10cbbb6f1..e8067019754a 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx @@ -140,11 +140,13 @@ export const MultiRecordSelect = ({ {dropdownPlacement?.includes('end') && ( <> - - {createNewButton} - + {isDefined(onCreate) && ( + + {createNewButton} + + )} - {results} + {objectRecordsIdsMultiSelect?.length > 0 && results} {recordMultiSelectIsLoading && !relationPickerSearchFilter && ( <> @@ -171,13 +173,11 @@ export const MultiRecordSelect = ({ )} - {results} + {objectRecordsIdsMultiSelect?.length > 0 && results} {objectRecordsIdsMultiSelect?.length > 0 && ( )} - - {createNewButton} - + {isDefined(onCreate) &&
{createNewButton}
} )}
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx index e832cf0c2ed4..0e8a7b1e366f 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx @@ -1,15 +1,13 @@ import { isNonEmptyString } from '@sniptt/guards'; -import { Fragment, useRef } from 'react'; +import { useRef } from 'react'; import { useRecoilValue } from 'recoil'; import { Key } from 'ts-key-enum'; -import { IconComponent, IconPlus, MenuItemSelect } from 'twenty-ui'; +import { IconComponent, MenuItemSelect } from 'twenty-ui'; import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect'; import { SINGLE_ENTITY_SELECT_BASE_LIST } from '@/object-record/relation-picker/constants/SingleEntitySelectBaseList'; -import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton'; import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; -import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; @@ -26,8 +24,6 @@ export type SingleEntitySelectMenuItemsProps = { onCancel?: () => void; onEntitySelected: (entity?: EntityForSelect) => void; selectedEntity?: EntityForSelect; - onCreate?: () => void; - showCreateButton?: boolean; SelectAllIcon?: IconComponent; selectAllLabel?: string; isAllEntitySelected?: boolean; @@ -46,8 +42,6 @@ export const SingleEntitySelectMenuItems = ({ onCancel, onEntitySelected, selectedEntity, - onCreate, - showCreateButton, SelectAllIcon, selectAllLabel, isAllEntitySelected, @@ -59,14 +53,6 @@ export const SingleEntitySelectMenuItems = ({ }: SingleEntitySelectMenuItemsProps) => { const containerRef = useRef(null); - const createNewRecord = showCreateButton - ? { - __typename: '', - id: 'add-new', - name: 'Add New', - } - : null; - const selectNone = emptyLabel ? { __typename: '', @@ -88,7 +74,6 @@ export const SingleEntitySelectMenuItems = ({ selectNone, selectedEntity, ...entitiesToSelect, - createNewRecord, ].filter( (entity): entity is EntityForSelect => isDefined(entity) && isNonEmptyString(entity.name), @@ -98,10 +83,6 @@ export const SingleEntitySelectMenuItems = ({ SINGLE_ENTITY_SELECT_BASE_LIST, ); - const isSelectedAddNewButton = useRecoilValue( - isSelectedItemIdSelector('add-new'), - ); - const isSelectedSelectNoneButton = useRecoilValue( isSelectedItemIdSelector('select-none'), ); @@ -129,14 +110,10 @@ export const SingleEntitySelectMenuItems = ({ selectableItemIdArray={selectableItemIds} hotkeyScope={hotkeyScope} onEnter={(itemId) => { - if (itemId === 'add-new' && showCreateButton === true) { - onCreate?.(); - } else { - const entityIndex = entitiesInDropdown.findIndex( - (entity) => entity.id === itemId, - ); - onEntitySelected(entitiesInDropdown[entityIndex]); - } + const entityIndex = entitiesInDropdown.findIndex( + (entity) => entity.id === itemId, + ); + onEntitySelected(entitiesInDropdown[entityIndex]); resetSelectedItem(); }} > @@ -146,32 +123,10 @@ export const SingleEntitySelectMenuItems = ({ ) : entitiesInDropdown.length === 0 && !isAllEntitySelectShown && !loading ? ( - <> - {entitiesToSelect.length > 0 && } - - + <> ) : ( entitiesInDropdown?.map((entity) => { switch (entity.id) { - case 'add-new': { - return ( - - {entitiesToSelect.length > 0 && } - - - ); - } case 'select-none': { return ( emptyLabel && ( diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx index 9b8e56262977..6654da7ec86e 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx @@ -4,9 +4,12 @@ import { } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItems'; import { useEntitySelectSearch } from '@/object-record/relation-picker/hooks/useEntitySelectSearch'; import { useRelationPickerEntitiesOptions } from '@/object-record/relation-picker/hooks/useRelationPickerEntitiesOptions'; +import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { Placement } from '@floating-ui/react'; +import { IconPlus } from 'twenty-ui'; import { isDefined } from '~/utils/isDefined'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; @@ -49,21 +52,13 @@ export const SingleEntitySelectMenuItemsWithSearch = ({ excludedRelationRecordIds, }); - const showCreateButton = isDefined(onCreate); - - let onCreateWithInput = undefined; - - if (isDefined(onCreate)) { - onCreateWithInput = () => { - if (onCreate.length > 0) { - (onCreate as (searchInput?: string) => void)( - relationPickerSearchFilter, - ); - } else { - (onCreate as () => void)(); - } - }; - } + const createNewButton = isDefined(onCreate) && ( + onCreate?.(relationPickerSearchFilter)} + LeftIcon={IconPlus} + text="Add New" + /> + ); const results = ( ); @@ -92,7 +85,11 @@ export const SingleEntitySelectMenuItemsWithSearch = ({ <> {dropdownPlacement?.includes('end') && ( <> - {results} + + {createNewButton} + + {entities.entitiesToSelect.length > 0 && } + {entities.entitiesToSelect.length > 0 && results} )} @@ -101,7 +98,15 @@ export const SingleEntitySelectMenuItemsWithSearch = ({ isUndefinedOrNull(dropdownPlacement)) && ( <> - {results} + {entities.entitiesToSelect.length > 0 && results} + {entities.entitiesToSelect.length > 0 && isDefined(onCreate) && ( + + )} + {isDefined(onCreate) && ( + + {createNewButton} + + )} )} 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 2ec7a8471f96..92b334321cd5 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -7,7 +7,7 @@ import { size, useFloating, } from '@floating-ui/react'; -import { MouseEvent, ReactNode, useRef } from 'react'; +import { MouseEvent, ReactNode, useEffect, useRef } from 'react'; import { Keys } from 'react-hotkeys-hook'; import { Key } from 'ts-key-enum'; @@ -65,8 +65,13 @@ export const Dropdown = ({ }: DropdownProps) => { const containerRef = useRef(null); - const { isDropdownOpen, toggleDropdown, closeDropdown, dropdownWidth } = - useDropdown(dropdownId); + const { + isDropdownOpen, + toggleDropdown, + closeDropdown, + dropdownWidth, + setDropdownPlacement, + } = useDropdown(dropdownId); const offsetMiddlewares = []; @@ -78,7 +83,7 @@ export const Dropdown = ({ offsetMiddlewares.push(offset({ mainAxis: dropdownOffset.y })); } - const { refs, floatingStyles } = useFloating({ + const { refs, floatingStyles, placement } = useFloating({ placement: dropdownPlacement, middleware: [ flip(), @@ -100,6 +105,10 @@ export const Dropdown = ({ strategy: dropdownStrategy, }); + useEffect(() => { + setDropdownPlacement(placement); + }, [placement, setDropdownPlacement]); + const handleHotkeyTriggered = () => { toggleDropdown(); };