my-links/inertia/components/common/form/selector.tsx

import { useTheme } from '@emotion/react';
import { InputHTMLAttributes, ReactNode, useEffect, useState } from 'react';
import Select, {
	FormatOptionLabelMeta,
	GroupBase,
	OptionsOrGroups,
} from 'react-select';
import FormField from '~/components/common/form/_form_field';

type Option = { label: string | number; value: string | number };

interface SelectorProps
	extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
	label: string;
	name: string;
	errors?: string[];
	options: OptionsOrGroups<Option, GroupBase<Option>>;
	value: number | string;
	onChangeCallback?: (value: number | string) => void;
	formatOptionLabel?: (
		data: Option,
		formatOptionLabelMeta: FormatOptionLabelMeta<Option>
	) => ReactNode;
}

export default function Selector({
	name,
	label,
	value,
	errors = [],
	options,
	onChangeCallback,
	formatOptionLabel,
	required = false,
	...props
}: SelectorProps): JSX.Element {
	const theme = useTheme();
	const [selectorValue, setSelectorValue] = useState<Option>();

	useEffect(() => {
		if (options.length === 0) return;

		const option = options.find((o: any) => o.value === value);
		if (option) {
			setSelectorValue(option as Option);
		}
	}, [options, value]);

	const handleChange = (selectedOption: Option) => {
		setSelectorValue(selectedOption);
		if (onChangeCallback) {
			onChangeCallback(selectedOption.value);
		}
	};

	return (
		<FormField required={required}>
			{label && (
				<label htmlFor={name} title={`${name} field`}>
					{label}
				</label>
			)}
			<Select
				value={selectorValue}
				onChange={(newValue) => handleChange(newValue as Option)}
				options={options}
				isDisabled={props.disabled}
				menuPlacement="auto"
				formatOptionLabel={
					formatOptionLabel
						? (val, formatOptionLabelMeta) =>
								formatOptionLabel(val, formatOptionLabelMeta)
						: undefined
				}
				css={{ color: theme.colors.black }}
			/>
		</FormField>
	);
}