Blame · TextArea.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
b69ab31	10	import * as stylex from '@stylexjs/stylex';
b69ab31	11	import {forwardRef, useId} from 'react';
b69ab31	12	import {Column} from './Flex';
b69ab31	13
b69ab31	14	const styles = stylex.create({
b69ab31	15	root: {
b69ab31	16	gap: '2px',
b69ab31	17	},
b69ab31	18	label: {
b69ab31	19	marginBlock: '0px',
b69ab31	20	},
b69ab31	21	textarea: {
b69ab31	22	fontFamily: 'var(--font-family)',
b69ab31	23	boxSizing: 'border-box',
b69ab31	24	padding: '8px',
b69ab31	25	minWidth: '100px',
b69ab31	26	minHeight: '42px',
b69ab31	27	width: '100%',
b69ab31	28	background: 'var(--input-background)',
b69ab31	29	color: 'var(--input-foreground)',
b69ab31	30	border: '1px solid var(--dropdown-border)',
b69ab31	31	outline: {
b69ab31	32	default: 'none',
b69ab31	33	':focus-visible': '1px solid var(--focus-border)',
b69ab31	34	},
b69ab31	35	outlineOffset: '-1px',
b69ab31	36	},
b69ab31	37	});
b69ab31	38
b69ab31	39	export type TextAreaProps = {
b69ab31	40	children?: ReactNode;
b69ab31	41	xstyle?: stylex.StyleXStyles;
b69ab31	42	containerXstyle?: stylex.StyleXStyles;
b69ab31	43	resize?: 'none' \| 'vertical' \| 'horizontal' \| 'both';
b69ab31	44	} & React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
b69ab31	45
b69ab31	46	export const TextArea = forwardRef(
b69ab31	47	(
b69ab31	48	{children, xstyle, containerXstyle, resize = 'none', ...rest}: TextAreaProps,
b69ab31	49	ref: ForwardedRef<HTMLTextAreaElement>,
b69ab31	50	) => {
b69ab31	51	const id = useId();
b69ab31	52	return (
b69ab31	53	<Column xstyle={[styles.root, containerXstyle ?? null]} alignStart>
b69ab31	54	{children && (
b69ab31	55	<label htmlFor={id} {...stylex.props(styles.label)}>
b69ab31	56	{children}
b69ab31	57	</label>
b69ab31	58	)}
b69ab31	59	<textarea
b69ab31	60	ref={ref}
b69ab31	61	style={{resize}}
b69ab31	62	{...stylex.props(styles.textarea, xstyle)}
b69ab31	63	id={id}
b69ab31	64	{...rest}
b69ab31	65	/>
b69ab31	66	</Column>
b69ab31	67	);
b69ab31	68	},
b69ab31	69	);