{"version":3,"file":"TextBox.jsx","names":["stylex","memo","useCallback","controlColor","font","size","TextBox","styles","create","box","background","default","inputBackground","inputActiveBackground","inputDisabledBackground","borderWidth","borderStyle","borderColor","inputBorder","inputActiveBorder","inputInvalidBorder","inputDisabledBorder","borderRadius","color","inputColor","inputActiveColor","inputDisabledColor","width","fontFamily","main","inputPlaceholderColor","outline","cursor","upperCase","textTransform","variants","small","padding","rem1","rem2","fontSize","rem4","medium","px2","px3","fontWeight","large","rem6","props","onChange","e","currentTarget","value","ref","type","placeholder","name","required","disabled","autoComplete","inputMode","autoFocus","minLength","maxLength","min","max","pattern","list","title","onKeyDown","defaultValue","form"],"sources":["../src/TextBox.tsx"],"sourcesContent":["import * as stylex from \"@stylexjs/stylex\";\nimport {\n\ttype ChangeEvent,\n\ttype KeyboardEvent,\n\ttype Ref,\n\tmemo,\n\tuseCallback,\n} from \"react\";\n\nimport { controlColor } from \"./theme.stylex\";\nimport { font, size } from \"./tokens.stylex\";\n\n// Properties and some behavior of this textbox is based on the Text Field of MUI:\n// https://mui.com/material-ui/react-text-field/\nexport interface TextBoxProps {\n\t// Commonly used text props\n\tname?: string;\n\n\t/**\n\t * Try to avoid using placeholders as labels:\n\t * - They are not accessible to screen readers.\n\t * - They offer bad contrast.\n\t * - They disappear when you start typing.\n\t * See: https://www.nngroup.com/articles/form-design-placeholders/\n\t * @example Consider using this instead:\n\t * ```tsx\n\t * \t<TextBoxLabel label=\"Betreff\">\n\t * \t\t<TextBox />\n\t * \t</TextBoxLabel>\n\t * ```\n\t */\n\tplaceholder?: string;\n\t\"aria-label\"?: string;\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tautoComplete?: TextBoxAutoCompleteValue;\n\tautoFocus?: boolean;\n\tmaxLength?: number;\n\tminLength?: number;\n\tpattern?: string;\n\ttitle?: string;\n\tdefaultValue?: string;\n\tform?: string;\n\t/**\n\t * Hints at the type of data that might be entered by the user while editing the element or its contents\n\t * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute\n\t */\n\tinputMode?:\n\t\t| \"none\"\n\t\t| \"text\"\n\t\t| \"tel\"\n\t\t| \"url\"\n\t\t| \"email\"\n\t\t| \"numeric\"\n\t\t| \"decimal\"\n\t\t| \"search\"\n\t\t| undefined;\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, e: ChangeEvent<HTMLInputElement>) => void;\n\n\tonKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n\n\t/**\n\t * @remarks - Don't use `date` or `datetime-local`. Use the `DateInput` component instead.\n\t */\n\ttype?: // | \"number\" TODO: We don't support \"number\" yet because that is more complicated and most likely will be in a different component.\n\t\t| \"text\"\n\t\t| \"password\"\n\t\t| \"email\"\n\t\t| \"tel\"\n\t\t| \"url\"\n\t\t| \"search\"\n\t\t| \"date\"\n\t\t| \"datetime-local\";\n\n\t/** @remarks Don't use this. It is intended for internal use for {@link DateInput}. */\n\tmin?: string;\n\t/** @remarks Don't use this. It is intended for internal use for {@link DateInput}. */\n\tmax?: string;\n\n\tsize?: \"small\" | \"medium\" | \"large\";\n\n\ttextTransform?: \"uppercase\";\n\n\t/**\n\t * Used for datalists. May be removed in the future. We still need to evaluate if this is a good way to do it.\n\t */\n\tlist?: string;\n\n\t/**\n\t * @remarks For internal use only.\n\t * @internal\n\t * */\n\tref?: Ref<HTMLInputElement>;\n}\n\nexport default memo(TextBox);\n\nconst styles = stylex.create({\n\tbox: {\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\tborderWidth: \"1px\",\n\t\tborderStyle: \"solid\",\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\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\twidth: \"100%\",\n\t\tfontFamily: font.main,\n\n\t\t\"::placeholder\": {\n\t\t\tcolor: controlColor.inputPlaceholderColor,\n\t\t},\n\n\t\toutline: {\n\t\t\t\":focus\": \"none\",\n\t\t},\n\t\tcursor: {\n\t\t\t\":disabled\": \"not-allowed\",\n\t\t},\n\t},\n\tupperCase: {\n\t\ttextTransform: \"uppercase\",\n\t},\n});\n\nconst variants = stylex.create({\n\tsmall: {\n\t\tpadding: `${size.rem1} ${size.rem2}`,\n\t\tfontSize: size.rem4,\n\t},\n\tmedium: {\n\t\tpadding: `${size.px2} ${size.px3}`,\n\t\tfontSize: size.rem4,\n\t\tfontWeight: 400,\n\t},\n\tlarge: {\n\t\tpadding: `${size.rem1} ${size.rem2}`,\n\t\tfontSize: size.rem6, // TODO: ASK-UX:So we have small/large text fields?\n\t},\n});\n\nfunction TextBox(props: TextBoxProps) {\n\tconst onChange = useCallback(\n\t\t(e: ChangeEvent<HTMLInputElement>) => {\n\t\t\tprops.onChange?.(e.currentTarget.value, e);\n\t\t},\n\t\t[props.onChange],\n\t);\n\n\treturn (\n\t\t<input\n\t\t\tref={props.ref}\n\t\t\t{...stylex.props(\n\t\t\t\tstyles.box,\n\t\t\t\tvariants[props.size ?? \"small\"],\n\t\t\t\tprops.textTransform === \"uppercase\" && styles.upperCase,\n\t\t\t)}\n\t\t\taria-label={props[\"aria-label\"]}\n\t\t\ttype={props.type ?? \"text\"}\n\t\t\tplaceholder={props.placeholder}\n\t\t\tname={props.name}\n\t\t\trequired={props.required}\n\t\t\tdisabled={props.disabled}\n\t\t\tautoComplete={props.autoComplete}\n\t\t\tinputMode={props.inputMode}\n\t\t\t// biome-ignore lint/a11y/noAutofocus: We're just passing it down\n\t\t\tautoFocus={props.autoFocus}\n\t\t\tminLength={props.minLength}\n\t\t\tmaxLength={props.maxLength}\n\t\t\tmin={props.min}\n\t\t\tmax={props.max}\n\t\t\tpattern={props.pattern}\n\t\t\tlist={props.list}\n\t\t\ttitle={props.title}\n\t\t\tvalue={props.value}\n\t\t\tonChange={onChange}\n\t\t\tonKeyDown={props.onKeyDown}\n\t\t\tdefaultValue={props.defaultValue}\n\t\t\tform={props.form}\n\t\t/>\n\t);\n}\n\n/**\n * See: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\n * MDN link: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\n */\nexport type TextBoxAutoCompleteValue =\n\t| \"off\"\n\t| \"name\"\n\t| \"email\"\n\t| \"honorific-prefix\"\n\t| \"given-name\"\n\t| \"additional-name\"\n\t| \"family-name\"\n\t| \"honorific-suffix\"\n\t| \"nickname\"\n\t| \"username\"\n\t| \"new-password\"\n\t| \"current-password\"\n\t| \"one-time-code\"\n\t| \"organization-title\"\n\t| \"organization\"\n\t| \"street-address\"\n\t| \"address-line1\"\n\t| \"address-line2\"\n\t| \"address-line3\"\n\t| \"address-level4\"\n\t| \"address-level3\"\n\t| \"address-level2\"\n\t| \"address-level1\"\n\t| \"country\"\n\t| \"country-name\"\n\t| \"postal-code\"\n\t| \"cc-name\"\n\t| \"cc-given-name\"\n\t| \"cc-additional-name\"\n\t| \"cc-family-name\"\n\t| \"cc-number\"\n\t| \"cc-exp\"\n\t| \"cc-exp-month\"\n\t| \"cc-exp-year\"\n\t| \"cc-csc\"\n\t| \"cc-type\"\n\t| \"transaction-currency\"\n\t| \"transaction-amount\"\n\t| \"language\"\n\t| \"bday\"\n\t| \"bday-day\"\n\t| \"bday-month\"\n\t| \"bday-year\"\n\t| \"sex\"\n\t| \"url\"\n\t| \"photo\";\n"],"mappings":"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","ignoreList":[]}