Blame · TextField.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 {ForwardedRef, ReactNode} from 'react';
b69ab31	9	import type {ReactProps} from './utils';
b69ab31	10
b69ab31	11	import * as stylex from '@stylexjs/stylex';
b69ab31	12	import {forwardRef, useId} from 'react';
b69ab31	13	import {Column} from './Flex';
b69ab31	14
b69ab31	15	export const textFieldStyles = stylex.create({
b69ab31	16	root: {
b69ab31	17	gap: 0,
b69ab31	18	},
b69ab31	19	label: {
b69ab31	20	marginBlock: '1px',
b69ab31	21	},
b69ab31	22	input: {
b69ab31	23	boxSizing: 'border-box',
b69ab31	24	height: '26px',
b69ab31	25	padding: '0 9px',
b69ab31	26	marginBlock: 0,
b69ab31	27	minWidth: '100px',
b69ab31	28	width: '100%',
b69ab31	29	background: 'var(--input-background)',
b69ab31	30	color: 'var(--input-foreground)',
b69ab31	31	border: '1px solid var(--dropdown-border)',
b69ab31	32	outline: {
b69ab31	33	default: 'none',
b69ab31	34	':focus-visible': '1px solid var(--focus-border)',
b69ab31	35	},
b69ab31	36	outlineOffset: '-1px',
b69ab31	37	},
b69ab31	38	});
b69ab31	39
b69ab31	40	export const TextField = forwardRef(
b69ab31	41	(
b69ab31	42	{
b69ab31	43	children,
b69ab31	44	xstyle,
b69ab31	45	containerXstyle,
b69ab31	46	value,
b69ab31	47	width,
b69ab31	48	...rest
b69ab31	49	}: {
b69ab31	50	children?: ReactNode;
b69ab31	51	xstyle?: stylex.StyleXStyles;
b69ab31	52	containerXstyle?: stylex.StyleXStyles;
b69ab31	53	value?: string;
b69ab31	54	width?: string;
b69ab31	55	placeholder?: string;
b69ab31	56	readOnly?: boolean;
b69ab31	57	} & ReactProps<HTMLInputElement>,
b69ab31	58	ref: ForwardedRef<HTMLInputElement>,
b69ab31	59	) => {
b69ab31	60	const id = useId();
b69ab31	61	return (
b69ab31	62	<Column xstyle={[textFieldStyles.root, containerXstyle ?? null]} style={{width}} alignStart>
b69ab31	63	{children && (
b69ab31	64	<label htmlFor={id} {...stylex.props(textFieldStyles.label)}>
b69ab31	65	{children}
b69ab31	66	</label>
b69ab31	67	)}
b69ab31	68	<input
b69ab31	69	{...stylex.props(textFieldStyles.input, xstyle)}
b69ab31	70	type="text"
b69ab31	71	id={id}
b69ab31	72	value={value}
b69ab31	73	{...rest}
b69ab31	74	ref={ref}
b69ab31	75	/>
b69ab31	76	</Column>
b69ab31	77	);
b69ab31	78	},
b69ab31	79	);