Blame · Dropdown.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import type {ReactNode} from 'react';
b69ab31	9	import type {ReactProps} from './utils';
b69ab31	10
b69ab31	11	import * as stylex from '@stylexjs/stylex';
b69ab31	12	import {useId} from 'react';
b69ab31	13
b69ab31	14	const styles = stylex.create({
b69ab31	15	label: {
b69ab31	16	marginBlock: '0px',
b69ab31	17	},
b69ab31	18	select: {
b69ab31	19	fontFamily: 'var(--font-family)',
b69ab31	20	boxSizing: 'border-box',
b69ab31	21	padding: '3px 6px',
b69ab31	22	background: 'var(--input-background)',
b69ab31	23	color: 'var(--input-foreground)',
b69ab31	24	border: '1px solid var(--dropdown-border)',
b69ab31	25	outline: {
b69ab31	26	default: 'none',
b69ab31	27	':focus-visible': '1px solid var(--focus-border)',
b69ab31	28	},
b69ab31	29	outlineOffset: '-1px',
b69ab31	30	},
b69ab31	31	disabled: {
b69ab31	32	opacity: 0.4,
b69ab31	33	cursor: 'not-allowed',
b69ab31	34	},
b69ab31	35	});
b69ab31	36
b69ab31	37	export function Dropdown<T extends string \| {value: string; name: string; disabled?: boolean}>({
b69ab31	38	options,
b69ab31	39	children,
b69ab31	40	xstyle,
b69ab31	41	value,
b69ab31	42	disabled,
b69ab31	43	...rest
b69ab31	44	}: {
b69ab31	45	options: Array<T>;
b69ab31	46	children?: ReactNode;
b69ab31	47	value?: T extends string ? T : T extends {value: string; name: string} ? T['value'] : never;
b69ab31	48	disabled?: boolean;
b69ab31	49	xstyle?: stylex.StyleXStyles;
b69ab31	50	} & ReactProps<HTMLSelectElement>) {
b69ab31	51	const id = useId();
b69ab31	52	return (
b69ab31	53	<select
b69ab31	54	{...stylex.props(styles.select, xstyle, disabled && styles.disabled)}
b69ab31	55	{...rest}
b69ab31	56	disabled={disabled \|\| options.length === 0}
b69ab31	57	value={value}>
b69ab31	58	{children && (
b69ab31	59	<label htmlFor={id} {...stylex.props(styles.label)}>
b69ab31	60	{children}
b69ab31	61	</label>
b69ab31	62	)}
b69ab31	63	{options.map((option, index) => {
b69ab31	64	const val = typeof option === 'string' ? option : option.value;
b69ab31	65	const name = typeof option === 'string' ? option : option.name;
b69ab31	66	const disabled = typeof option === 'string' ? false : option.disabled;
b69ab31	67	return (
b69ab31	68	<option key={index} value={val} disabled={disabled}>
b69ab31	69	{name}
b69ab31	70	</option>
b69ab31	71	);
b69ab31	72	})}
b69ab31	73	</select>
b69ab31	74	);
b69ab31	75	}