{"version":3,"sources":["../call-control-sdk/lib/pages/common/components/SearchBar.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { TextField, InputAdornment, IconButton } from \"@mui/material\";\r\nimport SearchIcon from \"@mui/icons-material/Search\";\r\nimport CloseIcon from \"@mui/icons-material/Close\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\n\r\ninterface SearchBarProps {\r\n  value: string;\r\n  onChange: (value: string) => void;\r\n  placeholder?: string;\r\n  iconPosition?: \"start\" | \"end\";\r\n  showClear?: boolean;\r\n  width?: number | string | Record<string, number | string>;\r\n  borderRadius?: number | string;\r\n  autoFocus?: boolean;\r\n  inputRef?: React.Ref<any>;\r\n  sx?: SxProps<Theme>;\r\n}\r\n\r\nexport default function SearchBar({\r\n  value,\r\n  onChange,\r\n  placeholder = \"Search...\",\r\n  iconPosition = \"start\",\r\n  showClear = true,\r\n  width = 250,\r\n  borderRadius = \"50px\",\r\n  autoFocus = false,\r\n  inputRef,\r\n  sx,\r\n}: SearchBarProps) {\r\n  const searchAdornment = (\r\n    <InputAdornment position={iconPosition}>\r\n      <SearchIcon sx={{ color: \"#1A5F6C\", fontSize: 18 }} />\r\n    </InputAdornment>\r\n  );\r\n\r\n  const clearButton =\r\n    showClear && value ? (\r\n      <InputAdornment position=\"end\">\r\n        <IconButton size=\"small\" onClick={() => onChange(\"\")} edge=\"end\">\r\n          <CloseIcon sx={{ fontSize: 16, color: \"#94a3b8\" }} />\r\n        </IconButton>\r\n      </InputAdornment>\r\n    ) : null;\r\n\r\n  const startAdornment = iconPosition === \"start\" ? searchAdornment : undefined;\r\n  const endAdornment =\r\n    iconPosition === \"end\" ? (\r\n      <>\r\n        {clearButton}\r\n        {searchAdornment}\r\n      </>\r\n    ) : (\r\n      clearButton || undefined\r\n    );\r\n\r\n  return (\r\n    <TextField\r\n      size=\"small\"\r\n      placeholder={placeholder}\r\n      value={value}\r\n      autoFocus={autoFocus}\r\n      inputRef={inputRef}\r\n      onChange={(e) => onChange(e.target.value)}\r\n      InputProps={{ startAdornment, endAdornment }}\r\n      sx={{\r\n        width,\r\n        \"& .MuiOutlinedInput-root\": {\r\n          borderRadius,\r\n          height: 36,\r\n          backgroundColor: \"#f5f7f8\",\r\n          \"& fieldset\": { borderColor: \"#dde3e8\" },\r\n          \"&:hover fieldset\": { borderColor: \"#1A5F6C\" },\r\n          \"&.Mui-focused fieldset\": { borderColor: \"#1A5F6C\", borderWidth: \"1.5px\" },\r\n        },\r\n        \"& .MuiInputBase-input\": {\r\n          fontSize: \"0.85rem\",\r\n          \"&::placeholder\": { color: \"#94a3b8\", opacity: 1 },\r\n        },\r\n        ...((sx as object) || {}),\r\n      }}\r\n    />\r\n  );\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAiCM,SAgBA,UAhBA,KAgBA,YAhBA;AAdS,SAAR,UAA2B;AAAA,EAChC;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAmB;AACjB,QAAM,kBACJ,oBAAC,0BAAe,UAAU,cACxB,8BAAC,kBAAW,IAAI,EAAE,OAAO,WAAW,UAAU,GAAG,GAAG,GACtD;AAGF,QAAM,cACJ,aAAa,QACX,oBAAC,0BAAe,UAAS,OACvB,8BAAC,sBAAW,MAAK,SAAQ,SAAS,MAAM,SAAS,EAAE,GAAG,MAAK,OACzD,8BAAC,iBAAU,IAAI,EAAE,UAAU,IAAI,OAAO,UAAU,GAAG,GACrD,GACF,IACE;AAEN,QAAM,iBAAiB,iBAAiB,UAAU,kBAAkB;AACpE,QAAM,eACJ,iBAAiB,QACf,iCACG;AAAA;AAAA,IACA;AAAA,KACH,IAEA,eAAe;AAGnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,MACxC,YAAY,EAAE,gBAAgB,aAAa;AAAA,MAC3C,IAAI;AAAA,QACF;AAAA,QACA,4BAA4B;AAAA,UAC1B;AAAA,UACA,QAAQ;AAAA,UACR,iBAAiB;AAAA,UACjB,cAAc,EAAE,aAAa,UAAU;AAAA,UACvC,oBAAoB,EAAE,aAAa,UAAU;AAAA,UAC7C,0BAA0B,EAAE,aAAa,WAAW,aAAa,QAAQ;AAAA,QAC3E;AAAA,QACA,yBAAyB;AAAA,UACvB,UAAU;AAAA,UACV,kBAAkB,EAAE,OAAO,WAAW,SAAS,EAAE;AAAA,QACnD;AAAA,SACK,MAAiB,CAAC;AAAA;AAAA,EAE3B;AAEJ;","names":[]}