UNPKG

@copilotkit/a2ui-renderer

Version:

A2UI Renderer for CopilotKit - render A2UI surfaces in React applications

1 lines 3.97 kB
{"version":3,"file":"TextField.mjs","names":[],"sources":["../../../../../../src/react-renderer/a2ui-react/catalog/basic/components/TextField.tsx"],"sourcesContent":["/**\n * Copyright 2026 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from \"react\";\nimport { createReactComponent } from \"../../../adapter\";\nimport { TextFieldApi } from \"@a2ui/web_core/v0_9/basic_catalog\";\nimport { LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS } from \"../utils\";\n\nexport const TextField = createReactComponent(TextFieldApi, ({ props }) => {\n const onChange = (\n e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,\n ) => {\n props.setValue(e.target.value);\n };\n\n const isLong = props.variant === \"longText\";\n const type =\n props.variant === \"number\"\n ? \"number\"\n : props.variant === \"obscured\"\n ? \"password\"\n : \"text\";\n\n const style: React.CSSProperties = {\n padding: \"8px\",\n width: \"100%\",\n border: STANDARD_BORDER,\n borderRadius: STANDARD_RADIUS,\n boxSizing: \"border-box\",\n };\n\n // Note: To have a unique id without passing context we can use a random or provided id,\n // but the simplest is just relying on React's useId if we really need it.\n // For now, we'll omit the `id` from the label connection since we removed context.\n const uniqueId = React.useId();\n\n const hasError = props.validationErrors && props.validationErrors.length > 0;\n\n return (\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n width: \"100%\",\n margin: LEAF_MARGIN,\n }}\n >\n {props.label && (\n <label\n htmlFor={uniqueId}\n style={{ fontSize: \"14px\", fontWeight: \"bold\" }}\n >\n {props.label}\n </label>\n )}\n {isLong ? (\n <textarea\n id={uniqueId}\n style={{\n ...style,\n border: hasError ? \"1px solid red\" : STANDARD_BORDER,\n }}\n value={props.value || \"\"}\n onChange={onChange}\n />\n ) : (\n <input\n id={uniqueId}\n type={type}\n style={{\n ...style,\n border: hasError ? \"1px solid red\" : STANDARD_BORDER,\n }}\n value={props.value || \"\"}\n onChange={onChange}\n />\n )}\n {hasError && (\n <span style={{ fontSize: \"12px\", color: \"red\" }}>\n {props.validationErrors![0]}\n </span>\n )}\n </div>\n );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,YAAY,qBAAqB,eAAe,EAAE,YAAY;CACzE,MAAM,YACJ,MACG;AACH,QAAM,SAAS,EAAE,OAAO,MAAM;;CAGhC,MAAM,SAAS,MAAM,YAAY;CACjC,MAAM,OACJ,MAAM,YAAY,WACd,WACA,MAAM,YAAY,aAChB,aACA;CAER,MAAM,QAA6B;EACjC,SAAS;EACT,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CAKD,MAAM,WAAW,MAAM,OAAO;CAE9B,MAAM,WAAW,MAAM,oBAAoB,MAAM,iBAAiB,SAAS;AAE3E,QACE,qBAAC;EACC,OAAO;GACL,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;GACP,QAAQ;GACT;;GAEA,MAAM,SACL,oBAAC;IACC,SAAS;IACT,OAAO;KAAE,UAAU;KAAQ,YAAY;KAAQ;cAE9C,MAAM;KACD;GAET,SACC,oBAAC;IACC,IAAI;IACJ,OAAO;KACL,GAAG;KACH,QAAQ,WAAW,kBAAkB;KACtC;IACD,OAAO,MAAM,SAAS;IACZ;KACV,GAEF,oBAAC;IACC,IAAI;IACE;IACN,OAAO;KACL,GAAG;KACH,QAAQ,WAAW,kBAAkB;KACtC;IACD,OAAO,MAAM,SAAS;IACZ;KACV;GAEH,YACC,oBAAC;IAAK,OAAO;KAAE,UAAU;KAAQ,OAAO;KAAO;cAC5C,MAAM,iBAAkB;KACpB;;GAEL;EAER"}