{"version":3,"sources":["../src/components/gui/components/XGUISelectOptionField.tsx"],"names":["React","Divider","MenuItem","Select","Stack","Typography","compareProps","prevProps","nextProps","XGUISelectOptionField","field","currentValue","onChange","options","id","bp","useBreakpoint","e","opt","XGUISelectOptionField_default"],"mappings":"sEAAA,UAAYA,MAAW,QAOvB,OAAS,WAAAC,EAAS,YAAAC,EAAU,UAAAC,EAAQ,SAAAC,EAAO,cAAAC,MAAkB,gBAG7D,IAAMC,EAAe,CAACC,EAAgBC,IAE7BD,EAAU,eAAiBC,EAAU,aASxCC,EAAoE,OACxE,CAAC,CAAE,MAAAC,EAAO,aAAAC,EAAc,SAAAC,EAAU,QAAAC,EAAU,CAAC,CAAE,IAAM,CACnD,IAAMC,EAAK,cAAcJ,EAAM,OACzBK,EAAKC,EAAc,EAEzB,OACE,gCACE,gBAACZ,EAAA,CACC,UAAU,mBACV,UAAU,MACV,eAAe,gBACf,WAAW,SACX,GAAI,GAEJ,gBAACC,EAAA,CAAW,UAAU,QAAQ,QAASS,EAAI,MAAM,OAC9CJ,EAAM,KACT,EACA,gBAACP,EAAA,CACC,GAAIW,EACJ,GAAI,CAAE,GAAI,CAAE,EACZ,UAAS,GACT,MAAOH,GAAgBD,EAAM,aAC7B,SAAWO,GAAM,CACfL,EAASK,EAAE,OAAO,MAAOP,EAAM,KAAMK,CAAE,CACzC,EACA,KAAK,QACL,UAAW,CACT,GAAI,CACF,gBAAiB,CACf,EAAG,EAEH,sBAAuB,CACrB,SAAU,GACV,GAAI,EACJ,WAAY,IACZ,UAAW,QACb,CACF,CACF,CACF,GAECF,EAAQ,IAAKK,GACZ,gBAAChB,EAAA,CAAS,IAAKgB,EAAI,MAAO,MAAOA,EAAI,OAClCA,EAAI,OAASA,EAAI,KACpB,CACD,CACH,CACF,EACA,gBAACjB,EAAA,CAAQ,GAAI,CAAE,YAAa,wBAAyB,GAAI,CAAE,EAAG,CAChE,CAEJ,EACAK,CACF,EAEOa,EAAQV","sourcesContent":["import * as React from \"react\";\nimport {\n  IXGUIFieldBase,\n  TOnChange,\n  TXGUISelectOptionItem,\n} from \"../../../utils/interfaces/gui/fields.interfaces\";\n\nimport { Divider, MenuItem, Select, Stack, Typography } from \"@mui/material\";\nimport { useBreakpoint } from \"../../../hooks/useBreakpoint\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  // return isEqual(prevProps, nextProps);\n  return prevProps.currentValue === nextProps.currentValue;\n};\n\ninterface XGUISelectOptionFieldProps extends IXGUIFieldBase {\n  onChange: TOnChange<string>;\n  currentValue: string;\n  options: TXGUISelectOptionItem[];\n}\n\nconst XGUISelectOptionField: React.FC<XGUISelectOptionFieldProps> = React.memo(\n  ({ field, currentValue, onChange, options = [] }) => {\n    const id = `XGUI-FIELD-${field.name}`;\n    const bp = useBreakpoint();\n\n    return (\n      <>\n        <Stack\n          className=\"XGUISelectOption\"\n          direction=\"row\"\n          justifyContent=\"space-between\"\n          alignItems=\"center\"\n          mb={1}\n        >\n          <Typography component=\"label\" htmlFor={id} width=\"40%\">\n            {field.label}\n          </Typography>\n          <Select\n            id={id}\n            sx={{ ml: 1 }}\n            fullWidth\n            value={currentValue ?? field.defaultValue}\n            onChange={(e) => {\n              onChange(e.target.value, field.name, bp);\n            }}\n            size=\"small\"\n            MenuProps={{\n              sx: {\n                \".MuiList-root\": {\n                  p: 0,\n\n                  \".MuiButtonBase-root\": {\n                    fontSize: 10,\n                    px: 1,\n                    fontWeight: 600,\n                    textAlign: \"center\",\n                  },\n                },\n              },\n            }}\n          >\n            {options.map((opt) => (\n              <MenuItem key={opt.value} value={opt.value}>\n                {opt.label ?? opt.value}\n              </MenuItem>\n            ))}\n          </Select>\n        </Stack>\n        <Divider sx={{ borderColor: \"rgba(255,255,255,0.1)\", mb: 1 }} />\n      </>\n    );\n  },\n  compareProps\n);\n\nexport default XGUISelectOptionField;\n"]}