@copilotkit/a2ui-renderer/dist/react-renderer/a2ui-react/catalog/basic/components/ChoicePicker.cjs.map

A2UI Renderer for CopilotKit - render A2UI surfaces in React applications

{"version":3,"file":"ChoicePicker.cjs","names":["createReactComponent","ChoicePickerApi","LEAF_MARGIN","STANDARD_BORDER","STANDARD_RADIUS"],"sources":["../../../../../../src/react-renderer/a2ui-react/catalog/basic/components/ChoicePicker.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, { useState } from \"react\";\nimport { createReactComponent } from \"../../../adapter\";\nimport { ChoicePickerApi } from \"@a2ui/web_core/v0_9/basic_catalog\";\nimport { LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS } from \"../utils\";\n\n// The type of an option is deeply nested into the ChoicePickerApi schema, and\n// it seems z.infer is not inferring it correctly (?). We use `any` for now.\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype _Option = any;\n\nexport const ChoicePicker = createReactComponent(\n  ChoicePickerApi,\n  ({ props, context }) => {\n    const [filter, setFilter] = useState(\"\");\n\n    const values = Array.isArray(props.value) ? props.value : [];\n    const isMutuallyExclusive = props.variant === \"mutuallyExclusive\";\n\n    const onToggle = (val: string) => {\n      if (isMutuallyExclusive) {\n        props.setValue([val]);\n      } else {\n        const newValues = values.includes(val)\n          ? values.filter((v: string) => v !== val)\n          : [...values, val];\n        props.setValue(newValues);\n      }\n    };\n\n    const options = (props.options || []).filter(\n      (opt: _Option) =>\n        !props.filterable ||\n        filter === \"\" ||\n        String(opt.label).toLowerCase().includes(filter.toLowerCase()),\n    );\n\n    const containerStyle: React.CSSProperties = {\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap: \"8px\",\n      margin: LEAF_MARGIN,\n      width: \"100%\",\n    };\n\n    const listStyle: React.CSSProperties = {\n      display: \"flex\",\n      flexDirection: props.displayStyle === \"chips\" ? \"row\" : \"column\",\n      flexWrap: props.displayStyle === \"chips\" ? \"wrap\" : \"nowrap\",\n      gap: \"8px\",\n    };\n\n    return (\n      <div style={containerStyle}>\n        {props.label && (\n          <strong style={{ fontSize: \"14px\" }}>{props.label}</strong>\n        )}\n        {props.filterable && (\n          <input\n            type=\"text\"\n            placeholder=\"Filter options...\"\n            value={filter}\n            onChange={(e) => setFilter(e.target.value)}\n            style={{\n              padding: \"4px 8px\",\n              border: STANDARD_BORDER,\n              borderRadius: STANDARD_RADIUS,\n            }}\n          />\n        )}\n        <div style={listStyle}>\n          {options.map((opt: _Option, i: number) => {\n            const isSelected = values.includes(opt.value);\n            if (props.displayStyle === \"chips\") {\n              return (\n                <button\n                  key={i}\n                  onClick={() => onToggle(opt.value)}\n                  style={{\n                    padding: \"4px 12px\",\n                    borderRadius: \"16px\",\n                    border: isSelected\n                      ? \"1px solid var(--a2ui-primary-color, #007bff)\"\n                      : STANDARD_BORDER,\n                    backgroundColor: isSelected\n                      ? \"var(--a2ui-primary-color, #007bff)\"\n                      : \"#fff\",\n                    color: isSelected ? \"#fff\" : \"inherit\",\n                    cursor: \"pointer\",\n                    fontSize: \"12px\",\n                  }}\n                >\n                  {opt.label}\n                </button>\n              );\n            }\n            return (\n              <label\n                key={i}\n                style={{\n                  display: \"flex\",\n                  alignItems: \"center\",\n                  gap: \"8px\",\n                  cursor: \"pointer\",\n                }}\n              >\n                <input\n                  type={isMutuallyExclusive ? \"radio\" : \"checkbox\"}\n                  checked={isSelected}\n                  onChange={() => onToggle(opt.value)}\n                  name={\n                    isMutuallyExclusive\n                      ? `choice-${context.componentModel.id}`\n                      : undefined\n                  }\n                />\n                <span style={{ fontSize: \"14px\" }}>{opt.label}</span>\n              </label>\n            );\n          })}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,eAAeA,qCAC1BC,oDACC,EAAE,OAAO,cAAc;CACtB,MAAM,CAAC,QAAQ,iCAAsB,GAAG;CAExC,MAAM,SAAS,MAAM,QAAQ,MAAM,MAAM,GAAG,MAAM,QAAQ,EAAE;CAC5D,MAAM,sBAAsB,MAAM,YAAY;CAE9C,MAAM,YAAY,QAAgB;AAChC,MAAI,oBACF,OAAM,SAAS,CAAC,IAAI,CAAC;OAChB;GACL,MAAM,YAAY,OAAO,SAAS,IAAI,GAClC,OAAO,QAAQ,MAAc,MAAM,IAAI,GACvC,CAAC,GAAG,QAAQ,IAAI;AACpB,SAAM,SAAS,UAAU;;;CAI7B,MAAM,WAAW,MAAM,WAAW,EAAE,EAAE,QACnC,QACC,CAAC,MAAM,cACP,WAAW,MACX,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,OAAO,aAAa,CAAC,CACjE;CAED,MAAM,iBAAsC;EAC1C,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQC;EACR,OAAO;EACR;CAED,MAAM,YAAiC;EACrC,SAAS;EACT,eAAe,MAAM,iBAAiB,UAAU,QAAQ;EACxD,UAAU,MAAM,iBAAiB,UAAU,SAAS;EACpD,KAAK;EACN;AAED,QACE,4CAAC;EAAI,OAAO;;GACT,MAAM,SACL,2CAAC;IAAO,OAAO,EAAE,UAAU,QAAQ;cAAG,MAAM;KAAe;GAE5D,MAAM,cACL,2CAAC;IACC,MAAK;IACL,aAAY;IACZ,OAAO;IACP,WAAW,MAAM,UAAU,EAAE,OAAO,MAAM;IAC1C,OAAO;KACL,SAAS;KACT,QAAQC;KACR,cAAcC;KACf;KACD;GAEJ,2CAAC;IAAI,OAAO;cACT,QAAQ,KAAK,KAAc,MAAc;KACxC,MAAM,aAAa,OAAO,SAAS,IAAI,MAAM;AAC7C,SAAI,MAAM,iBAAiB,QACzB,QACE,2CAAC;MAEC,eAAe,SAAS,IAAI,MAAM;MAClC,OAAO;OACL,SAAS;OACT,cAAc;OACd,QAAQ,aACJ,iDACAD;OACJ,iBAAiB,aACb,uCACA;OACJ,OAAO,aAAa,SAAS;OAC7B,QAAQ;OACR,UAAU;OACX;gBAEA,IAAI;QAhBA,EAiBE;AAGb,YACE,4CAAC;MAEC,OAAO;OACL,SAAS;OACT,YAAY;OACZ,KAAK;OACL,QAAQ;OACT;iBAED,2CAAC;OACC,MAAM,sBAAsB,UAAU;OACtC,SAAS;OACT,gBAAgB,SAAS,IAAI,MAAM;OACnC,MACE,sBACI,UAAU,QAAQ,eAAe,OACjC;QAEN,EACF,2CAAC;OAAK,OAAO,EAAE,UAAU,QAAQ;iBAAG,IAAI;QAAa;QAlBhD,EAmBC;MAEV;KACE;;GACF;EAGX"}