AstralRinth/apps/frontend/src/components/ui/servers/TeleportDropdownMenu.vue

<template>
	<div class="relative inline-block h-9 w-full max-w-80">
		<button
			ref="triggerRef"
			type="button"
			aria-haspopup="listbox"
			:aria-expanded="dropdownVisible"
			:aria-controls="listboxId"
			:aria-labelledby="listboxId"
			class="duration-50 flex h-full w-full cursor-pointer select-none appearance-none items-center justify-between gap-4 rounded-xl border-none bg-button-bg px-4 py-2 shadow-sm !outline-none transition-all ease-in-out"
			:class="triggerClasses"
			@click="toggleDropdown"
			@keydown="handleTriggerKeyDown"
		>
			<span>{{ selectedOption }}</span>
			<DropdownIcon
				class="transition-transform duration-200 ease-in-out"
				:class="{ 'rotate-180': dropdownVisible }"
			/>
		</button>

		<Teleport to="#teleports">
			<transition
				enter-active-class="transition-opacity duration-200 ease-out"
				enter-from-class="opacity-0"
				enter-to-class="opacity-100"
				leave-active-class="transition-opacity duration-200 ease-in"
				leave-from-class="opacity-100"
				leave-to-class="opacity-0"
			>
				<div
					v-if="dropdownVisible"
					:id="listboxId"
					ref="optionsContainer"
					role="listbox"
					tabindex="-1"
					:aria-activedescendant="activeDescendant"
					class="experimental-styles-within fixed z-50 bg-button-bg shadow-lg outline-none"
					:class="{
						'rounded-b-xl': !isRenderingUp,
						'rounded-t-xl': isRenderingUp,
					}"
					:style="positionStyle"
					@keydown="handleListboxKeyDown"
				>
					<div
						class="overflow-y-auto"
						:style="{ height: `${virtualListHeight}px` }"
						@scroll="handleScroll"
					>
						<div :style="{ height: `${totalHeight}px`, position: 'relative' }">
							<div
								v-for="item in visibleOptions"
								:key="item.index"
								:style="{
									position: 'absolute',
									top: 0,
									transform: `translateY(${item.index * ITEM_HEIGHT}px)`,
									width: '100%',
									height: `${ITEM_HEIGHT}px`,
								}"
							>
								<div
									:id="`${listboxId}-option-${item.index}`"
									role="option"
									:aria-selected="selectedValue === item.option"
									class="hover:brightness-85 flex h-full cursor-pointer select-none items-center px-4 transition-colors duration-150 ease-in-out"
									:class="{
										'bg-brand font-bold text-brand-inverted': selectedValue === item.option,
										'bg-bg-raised': focusedOptionIndex === item.index,
										'rounded-b-xl': item.index === props.options.length - 1 && !isRenderingUp,
										'rounded-t-xl': item.index === 0 && isRenderingUp,
									}"
									@click="selectOption(item.option, item.index)"
									@mousemove="focusedOptionIndex = item.index"
								>
									{{ displayName(item.option) }}
								</div>
							</div>
						</div>
					</div>
				</div>
			</transition>
		</Teleport>
	</div>
</template>

<script setup lang="ts">
import { DropdownIcon } from '@modrinth/assets'
import type { CSSProperties } from 'vue'
import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

const ITEM_HEIGHT = 44
const BUFFER_ITEMS = 5

type OptionValue = string | number | Record<string, any>

interface Props {
	options: OptionValue[]
	name: string
	defaultValue?: OptionValue | null
	placeholder?: string | number | null
	modelValue?: OptionValue | null
	renderUp?: boolean
	disabled?: boolean
	displayName?: (option: OptionValue) => string
}

const props = withDefaults(defineProps<Props>(), {
	defaultValue: null,
	placeholder: null,
	modelValue: null,
	renderUp: false,
	disabled: false,
	displayName: (option: OptionValue) => String(option),
})

const emit = defineEmits<{
	(e: 'input' | 'update:modelValue', value: OptionValue): void
	(e: 'change', value: { option: OptionValue; index: number }): void
}>()

const dropdownVisible = ref(false)
const selectedValue = ref<OptionValue | null>(props.modelValue || props.defaultValue)
const focusedOptionIndex = ref<number | null>(null)
const optionsContainer = ref<HTMLElement | null>(null)
const scrollTop = ref(0)
const isRenderingUp = ref(false)
const virtualListHeight = ref(300)
const isOpen = ref(false)
const openDropdownCount = ref(0)
const listboxId = `pyro-listbox-${Math.random().toString(36).substring(2, 11)}`
const triggerRef = ref<HTMLButtonElement | null>(null)

const positionStyle = ref<CSSProperties>({
	position: 'fixed',
	top: '0px',
	left: '0px',
	width: '0px',
	zIndex: 999,
})

const totalHeight = computed(() => props.options.length * ITEM_HEIGHT)

const visibleOptions = computed(() => {
	const startIndex = Math.floor(scrollTop.value / ITEM_HEIGHT) - BUFFER_ITEMS
	const visibleCount = Math.ceil(virtualListHeight.value / ITEM_HEIGHT) + 2 * BUFFER_ITEMS

	return Array.from({ length: visibleCount }, (_, i) => {
		const index = startIndex + i
		if (index >= 0 && index < props.options.length) {
			return {
				index,
				option: props.options[index],
			}
		}
		return null
	}).filter((item): item is { index: number; option: OptionValue } => item !== null)
})

const selectedOption = computed(() => {
	if (selectedValue.value !== null && selectedValue.value !== undefined) {
		return props.displayName(selectedValue.value as OptionValue)
	}
	return props.placeholder || 'Select an option'
})

const radioValue = computed<OptionValue>({
	get() {
		return props.modelValue ?? selectedValue.value ?? ''
	},
	set(newValue: OptionValue) {
		emit('update:modelValue', newValue)
		selectedValue.value = newValue
	},
})

const triggerClasses = computed(() => ({
	'!cursor-not-allowed opacity-50 grayscale': props.disabled,
	'rounded-b-none': dropdownVisible.value && !isRenderingUp.value && !props.disabled,
	'rounded-t-none': dropdownVisible.value && isRenderingUp.value && !props.disabled,
}))

const updatePosition = async () => {
	if (!triggerRef.value) return

	await nextTick()
	const triggerRect = triggerRef.value.getBoundingClientRect()
	const viewportHeight = window.innerHeight
	const margin = 8

	const contentHeight = props.options.length * ITEM_HEIGHT
	const preferredHeight = Math.min(contentHeight, 300)

	const spaceBelow = viewportHeight - triggerRect.bottom
	const spaceAbove = triggerRect.top

	isRenderingUp.value = spaceBelow < preferredHeight && spaceAbove > spaceBelow

	virtualListHeight.value = isRenderingUp.value
		? Math.min(spaceAbove - margin, preferredHeight)
		: Math.min(spaceBelow - margin, preferredHeight)

	positionStyle.value = {
		position: 'fixed',
		left: `${triggerRect.left}px`,
		width: `${triggerRect.width}px`,
		zIndex: 999,
		...(isRenderingUp.value
			? { bottom: `${viewportHeight - triggerRect.top}px`, top: 'auto' }
			: { top: `${triggerRect.bottom}px`, bottom: 'auto' }),
	}
}

const toggleDropdown = () => {
	if (!props.disabled) {
		if (dropdownVisible.value) {
			closeDropdown()
		} else {
			openDropdown()
		}
	}
}

const handleResize = () => {
	if (dropdownVisible.value) {
		requestAnimationFrame(() => {
			updatePosition()
		})
	}
}

const handleScroll = (event: Event) => {
	const target = event.target as HTMLElement
	scrollTop.value = target.scrollTop
}

const closeAllDropdowns = () => {
	const event = new CustomEvent('close-all-dropdowns')
	window.dispatchEvent(event)
}

const selectOption = (option: OptionValue, index: number) => {
	radioValue.value = option
	emit('change', { option, index })
	closeDropdown()
}

const focusNextOption = () => {
	if (focusedOptionIndex.value === null) {
		focusedOptionIndex.value = 0
	} else {
		focusedOptionIndex.value = (focusedOptionIndex.value + 1) % props.options.length
	}
	scrollToFocused()
}

const focusPreviousOption = () => {
	if (focusedOptionIndex.value === null) {
		focusedOptionIndex.value = props.options.length - 1
	} else {
		focusedOptionIndex.value =
			(focusedOptionIndex.value - 1 + props.options.length) % props.options.length
	}
	scrollToFocused()
}

const scrollToFocused = () => {
	if (focusedOptionIndex.value === null) return

	const optionsElement = optionsContainer.value?.querySelector('.overflow-y-auto')
	if (!optionsElement) return

	const targetScrollTop = focusedOptionIndex.value * ITEM_HEIGHT
	const scrollBottom = optionsElement.clientHeight

	if (targetScrollTop < optionsElement.scrollTop) {
		optionsElement.scrollTop = targetScrollTop
	} else if (targetScrollTop + ITEM_HEIGHT > optionsElement.scrollTop + scrollBottom) {
		optionsElement.scrollTop = targetScrollTop - scrollBottom + ITEM_HEIGHT
	}
}

const openDropdown = async () => {
	if (!props.disabled) {
		closeAllDropdowns()
		dropdownVisible.value = true
		isOpen.value = true
		openDropdownCount.value++
		document.body.style.overflow = 'hidden'
		await updatePosition()

		nextTick(() => {
			optionsContainer.value?.focus()
		})
	}
}

const closeDropdown = () => {
	if (isOpen.value) {
		dropdownVisible.value = false
		isOpen.value = false
		openDropdownCount.value--
		if (openDropdownCount.value === 0) {
			document.body.style.overflow = ''
		}
		focusedOptionIndex.value = null
		triggerRef.value?.focus()
	}
}

const handleTriggerKeyDown = (event: KeyboardEvent) => {
	switch (event.key) {
		case 'ArrowDown':
		case 'ArrowUp':
			event.preventDefault()
			if (!dropdownVisible.value) {
				openDropdown()
				focusedOptionIndex.value = event.key === 'ArrowUp' ? props.options.length - 1 : 0
			} else if (event.key === 'ArrowDown') {
				focusNextOption()
			} else {
				focusPreviousOption()
			}
			break
		case 'Enter':
		case ' ':
			event.preventDefault()
			if (!dropdownVisible.value) {
				openDropdown()
				focusedOptionIndex.value = 0
			} else if (focusedOptionIndex.value !== null) {
				selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value)
			}
			break
		case 'Escape':
			event.preventDefault()
			closeDropdown()
			break
		case 'Tab':
			if (dropdownVisible.value) {
				event.preventDefault()
			}
			break
	}
}

const handleListboxKeyDown = (event: KeyboardEvent) => {
	switch (event.key) {
		case 'Enter':
		case ' ':
			event.preventDefault()
			if (focusedOptionIndex.value !== null) {
				selectOption(props.options[focusedOptionIndex.value], focusedOptionIndex.value)
			}
			break
		case 'ArrowDown':
			event.preventDefault()
			focusNextOption()
			break
		case 'ArrowUp':
			event.preventDefault()
			focusPreviousOption()
			break
		case 'Escape':
			event.preventDefault()
			closeDropdown()
			break
		case 'Tab':
			event.preventDefault()
			break
		case 'Home':
			event.preventDefault()
			focusedOptionIndex.value = 0
			scrollToFocused()
			break
		case 'End':
			event.preventDefault()
			focusedOptionIndex.value = props.options.length - 1
			scrollToFocused()
			break
		default:
			if (event.key.length === 1) {
				const char = event.key.toLowerCase()
				const index = props.options.findIndex((option) =>
					props.displayName(option).toLowerCase().startsWith(char),
				)
				if (index !== -1) {
					focusedOptionIndex.value = index
					scrollToFocused()
				}
			}
			break
	}
}

onMounted(() => {
	window.addEventListener('resize', handleResize)
	window.addEventListener('scroll', handleResize, true)
	window.addEventListener('click', (event) => {
		if (!isChildOfDropdown(event.target as HTMLElement)) {
			closeDropdown()
		}
	})
	window.addEventListener('close-all-dropdowns', closeDropdown)

	if (selectedValue.value) {
		focusedOptionIndex.value = props.options.findIndex((option) => option === selectedValue.value)
	}
})

onUnmounted(() => {
	window.removeEventListener('resize', handleResize)
	window.removeEventListener('scroll', handleResize, true)
	window.removeEventListener('click', (event) => {
		if (!isChildOfDropdown(event.target as HTMLElement)) {
			closeDropdown()
		}
	})
	window.removeEventListener('close-all-dropdowns', closeDropdown)

	if (isOpen.value) {
		openDropdownCount.value--
		if (openDropdownCount.value === 0) {
			document.body.style.overflow = ''
		}
	}
})

watch(
	() => props.modelValue,
	(newValue) => {
		selectedValue.value = newValue
	},
)

watch(dropdownVisible, async (newValue) => {
	if (newValue) {
		await updatePosition()
		scrollTop.value = 0
	}
})

const activeDescendant = computed(() =>
	focusedOptionIndex.value !== null ? `${listboxId}-option-${focusedOptionIndex.value}` : undefined,
)

const isChildOfDropdown = (element: HTMLElement | null): boolean => {
	let currentNode: HTMLElement | null = element
	while (currentNode) {
		if (currentNode === triggerRef.value || currentNode === optionsContainer.value) {
			return true
		}
		currentNode = currentNode.parentElement
	}
	return false
}
</script>