import { useRecoilCallback, useRecoilState } 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 { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue'; import { useCallback } from 'react'; import { isDefined } from 'twenty-shared'; export const useDropdown = (dropdownId?: string) => { const { scopeId, dropdownWidthState, isDropdownOpenState, dropdownPlacementState, } = useDropdownStates({ dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId), }); const { setActiveDropdownFocusIdAndMemorizePrevious } = useSetActiveDropdownFocusIdAndMemorizePrevious(); const { goBackToPreviousDropdownFocusId } = useGoBackToPreviousDropdownFocusId(); const { setHotkeyScopeAndMemorizePreviousScope, goBackToPreviousHotkeyScope, } = usePreviousHotkeyScope(); const [dropdownWidth, setDropdownWidth] = useRecoilState(dropdownWidthState); const [dropdownPlacement, setDropdownPlacement] = useRecoilState( dropdownPlacementState, ); const [isDropdownOpen, setIsDropdownOpen] = useRecoilState(isDropdownOpenState); const closeDropdown = useCallback(() => { if (isDropdownOpen) { goBackToPreviousHotkeyScope(); setIsDropdownOpen(false); goBackToPreviousDropdownFocusId(); } }, [ isDropdownOpen, goBackToPreviousHotkeyScope, setIsDropdownOpen, goBackToPreviousDropdownFocusId, ]); const openDropdown = useRecoilCallback( ({ snapshot }) => (dropdownHotkeyScopeFromProps?: HotkeyScope) => { if (!isDropdownOpen) { setIsDropdownOpen(true); setActiveDropdownFocusIdAndMemorizePrevious(dropdownId ?? scopeId); const dropdownHotkeyScope = getSnapshotValue( snapshot, dropdownHotkeyComponentState({ scopeId: dropdownId ?? scopeId, }), ); const dropdownHotkeyScopeForOpening = dropdownHotkeyScopeFromProps ?? dropdownHotkeyScope; if (isDefined(dropdownHotkeyScopeForOpening)) { setHotkeyScopeAndMemorizePreviousScope( dropdownHotkeyScopeForOpening.scope, dropdownHotkeyScopeForOpening.customScopes, ); } } }, [ isDropdownOpen, setIsDropdownOpen, setActiveDropdownFocusIdAndMemorizePrevious, dropdownId, scopeId, setHotkeyScopeAndMemorizePreviousScope, ], ); const toggleDropdown = () => { if (isDropdownOpen) { closeDropdown(); } else { openDropdown(); } }; return { scopeId, isDropdownOpen, closeDropdown, toggleDropdown, openDropdown, dropdownWidth, setDropdownWidth, dropdownPlacement, setDropdownPlacement, }; };