{"version":3,"file":"TextArea.jsx","names":["stylex","memo","useCallback","useEffect","useImperativeHandle","useRef","controlColor","font","size","styles","create","area","resize","borderWidth","borderStyle","borderColor","default","inputBorder","inputActiveBorder","inputInvalidBorder","inputDisabledBorder","borderRadius","color","inputColor","inputActiveColor","inputDisabledColor","padding","px2","px3","fontSize","rem4","fontWeight","fontFamily","main","width","inputPlaceholderColor","background","inputBackground","inputActiveBackground","inputDisabledBackground","cursor","outline","fieldSizing","fullHeight","height","noAutoGrow","TextArea","props","onChange","e","target","value","innerRef","ref","focus","current","r","handler","metaKey","ctrlKey","key","currentTarget","form","requestSubmit","stopPropagation","preventDefault","addEventListener","removeEventListener","placeholder","name","required","disabled","minLength","maxLength","title","autoFocus","defaultValue"],"sources":["../src/TextArea.tsx"],"sourcesContent":["import * as stylex from \"@stylexjs/stylex\";\nimport {\n\ttype Ref,\n\tmemo,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from \"react\";\nimport { controlColor } from \"./theme.stylex\";\nimport { font, size } from \"./tokens.stylex\";\n\n/**\n * Properties and some behavior of this TextArea is based on the Text Field of MUI:\n * https://mui.com/material-ui/react-text-field/\n */\nexport interface TextAreaProps {\n\t// Commonly used text props\n\tname?: string;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tmaxLength?: number;\n\tminLength?: number;\n\ttitle?: string;\n\tautoFocus?: boolean;\n\tdefaultValue?: string;\n\n\t/** If set, height will be 100% */\n\tfullHeight?: boolean;\n\n\t/** Auto-grow is default. However, it is only best-effort (only works in browsers that support `field-sizing`). This prop turns it off completely. */\n\tnoAutoGrow?: boolean;\n\n\t/** `value` and `onChange` are optional because we want to be able to use the control in an uncontrolled manner as well (for example, in forms) */\n\tvalue?: string;\n\tonChange?: (value: string) => void;\n\n\tref?: Ref<{ focus: () => void }>;\n}\n\nconst styles = stylex.create({\n\tarea: {\n\t\tresize: \"vertical\",\n\n\t\tborderWidth: \"1px\",\n\t\tborderStyle: \"solid\",\n\n\t\tborderColor: {\n\t\t\tdefault: controlColor.inputBorder,\n\t\t\t\":focus\": controlColor.inputActiveBorder,\n\t\t\t// https://web.dev/articles/user-valid-and-user-invalid-pseudo-classes\n\t\t\t\":user-invalid\": controlColor.inputInvalidBorder,\n\t\t\t\":disabled\": controlColor.inputDisabledBorder,\n\t\t},\n\n\t\tborderRadius: 0,\n\n\t\tcolor: {\n\t\t\tdefault: controlColor.inputColor,\n\t\t\t\":focus\": controlColor.inputActiveColor,\n\t\t\t\":disabled\": controlColor.inputDisabledColor,\n\t\t},\n\n\t\tpadding: `${size.px2} ${size.px3}`,\n\t\tfontSize: size.rem4,\n\t\tfontWeight: 400,\n\t\tfontFamily: font.main,\n\n\t\twidth: \"100%\",\n\n\t\t\"::placeholder\": {\n\t\t\tcolor: controlColor.inputPlaceholderColor,\n\t\t},\n\n\t\tbackground: {\n\t\t\tdefault: controlColor.inputBackground,\n\t\t\t\":focus\": controlColor.inputActiveBackground,\n\t\t\t\":disabled\": controlColor.inputDisabledBackground,\n\t\t},\n\n\t\tcursor: {\n\t\t\t\":disabled\": \"not-allowed\",\n\t\t},\n\t\toutline: {\n\t\t\t\":focus\": \"none\",\n\t\t},\n\n\t\tfieldSizing: \"content\",\n\t},\n\n\tfullHeight: {\n\t\theight: \"100%\",\n\t},\n\n\tnoAutoGrow: {\n\t\tfieldSizing: \"content\",\n\t},\n});\n\n/**\n * @remarks Currently does not support submitting a form by pressing `Ctrl+Enter`.\n * TODO: Support this if the need arises: https://stackoverflow.com/q/1684196\n */\nexport default memo(function TextArea(props: TextAreaProps) {\n\tconst onChange = useCallback(\n\t\t(e: React.ChangeEvent) => {\n\t\t\tprops.onChange?.(e.target.value);\n\t\t},\n\t\t[props.onChange],\n\t);\n\n\tconst innerRef = useRef(null);\n\n\tuseImperativeHandle(\n\t\tprops.ref,\n\t\t() => ({\n\t\t\tfocus: () => innerRef.current?.focus(),\n\t\t}),\n\t\t[],\n\t);\n\n\tuseEffect(() => {\n\t\tconst r = innerRef.current;\n\t\tif (!r) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handler = (e: KeyboardEvent) => {\n\t\t\tif ((e.metaKey || e.ctrlKey) && e.key === \"Enter\") {\n\t\t\t\tconst target = e.currentTarget as HTMLTextAreaElement | null;\n\t\t\t\t// If there are any issues, see: https://gist.github.com/KacperKozak/9736160\n\t\t\t\t// When using .submit(), this error is thrown:\n\t\t\t\t// > A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead.\n\t\t\t\ttarget?.form?.requestSubmit();\n\t\t\t\te.stopPropagation();\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tr.addEventListener(\"keydown\", handler);\n\t\treturn () => r.removeEventListener(\"keydown\", handler);\n\t}, []);\n\n\treturn (\n\t\t\n\t);\n});\n"],"mappings":"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","ignoreList":[]}