Function useFilterMenu

site/src/components/Filter/menu.ts:19–111

({
	id,
	value,
	getSelectedOption,
	getOptions,
	onChange,
	enabled,
}: UseFilterMenuOptions)

};

export const useFilterMenu = ({
	id,
	value,
	getSelectedOption,
	getOptions,
	onChange,
	enabled,
}: UseFilterMenuOptions) => {
	const selectedOptionsCacheRef = useRef<Record<string, SelectFilterOption>>(
		{},
	);
	const [query, setQuery] = useState("");
	const debouncedQuery = useDebouncedValue(query, FILTER_DEBOUNCE_MS);
	const selectedOptionQuery = useQuery({
		queryKey: [id, "autocomplete", "selected", value],
		queryFn: () => {
			if (!value) {
				return null;
			}

			const cachedOption = selectedOptionsCacheRef.current[value];
			if (cachedOption) {
				return cachedOption;
			}

			return getSelectedOption();
		},
		enabled,
		placeholderData: keepPreviousData,
	});
	const selectedOption = selectedOptionQuery.data;
	const searchOptionsQuery = useQuery({
		queryKey: [id, "autocomplete", "search", debouncedQuery],
		queryFn: () => getOptions(debouncedQuery),
		enabled,
	});
	const searchOptions = useMemo(() => {
		if (searchOptionsQuery.isFetching) {
			return undefined;
		}

		const isDataLoaded =
			searchOptionsQuery.isFetched && selectedOptionQuery.isFetched;

		if (!isDataLoaded) {
			return undefined;
		}

		let options = searchOptionsQuery.data ?? [];

		if (selectedOption) {
			options = options.filter(
				(option) => option.value !== selectedOption.value,
			);
			options = [selectedOption, ...options];
		}

		options = options.filter(