{"version":3,"file":"Search-CnBtGB11.js","sources":["../../../frontend/src/Components/Dashboard/Tables/Search.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { IconButton, InputAdornment, TextField } from '@mui/material';\nimport { styled } from '@mui/material/styles';\nimport ClearIcon from '@mui/icons-material/Clear';\nimport SearchIcon from '@mui/icons-material/Search';\nimport { useIntl } from 'react-intl';\nimport { useSearchParams } from 'react-router-dom';\nimport useMediaQuery from '@mui/material/useMediaQuery';\nimport { useTheme } from '@mui/material/styles';\n\ninterface SearchProps {\n  queryStringKey?: string;\n  expandable?: boolean;\n}\n\n// Styled component for the TextField\nconst StyledTextField = styled(TextField, {\n  shouldForwardProp: (prop: string) =>\n    !['$expandable', '$focused', '$hasValue', '$isLg'].includes(prop),\n})<{\n  $expandable: boolean;\n  $focused: boolean;\n  $hasValue: boolean;\n  $isLg: boolean;\n}>(({ $expandable, $focused, $hasValue, $isLg }) => ({\n  width: $isLg && $expandable ? ($focused || $hasValue ? '100%' : '28%') : 'auto',\n  transition: 'width 0.3s ease',\n}));\n\nfunction Search({ queryStringKey = 'q', expandable = false }: SearchProps) {\n  const intl = useIntl();\n  const [searchParams, setSearchParams] = useSearchParams();\n  const search = searchParams.get(queryStringKey);\n  const [focused, setFocused] = useState(false);\n  const value = search || '';\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const theme = useTheme();\n  const isMd = useMediaQuery(theme.breakpoints.up('md'));\n\n  const setValue = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (!event.target.value) {\n      searchParams.delete(queryStringKey);\n    } else {\n      searchParams.set(queryStringKey, event.target.value);\n    }\n    setSearchParams(searchParams);\n  };\n\n  useEffect(() => {\n    if (focused) {\n      inputRef.current?.focus();\n    }\n  }, [focused]);\n\n  const clear = (\n    <IconButton\n      onClick={() => {\n        setValue({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);\n        inputRef.current?.focus();\n      }}\n      size=\"large\"\n      sx={{ visibility: value ? 'visible' : 'hidden' }}\n    >\n      <ClearIcon color=\"disabled\" />\n    </IconButton>\n  );\n\n  return (\n    <StyledTextField\n      inputRef={inputRef}\n      value={value}\n      variant=\"outlined\"\n      onChange={setValue}\n      placeholder={intl.formatMessage({ id: 'SEARCH.INPUT_PLACEHOLDER' })}\n      onFocus={() => setFocused(true)}\n      onClick={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      $expandable={expandable}\n      $focused={focused}\n      $hasValue={!!value}\n      $isLg={isMd}\n      InputProps={{\n        startAdornment: (\n          <InputAdornment position=\"start\">\n            <SearchIcon color=\"disabled\" />\n          </InputAdornment>\n        ),\n        endAdornment: <InputAdornment position=\"end\">{clear}</InputAdornment>,\n      }}\n      inputProps={{\n        'aria-label': 'search',\n      }}\n    />\n  );\n}\n\nexport default Search;\n"],"names":["StyledTextField","styled","TextField","shouldForwardProp","prop","includes","_ref","$expandable","$focused","$hasValue","$isLg","width","transition","Search","_ref2","_ref2$queryStringKey","queryStringKey","_ref2$expandable","expandable","intl","useIntl","_useSearchParams","useSearchParams","_useSearchParams2","_slicedToArray","searchParams","setSearchParams","search","get","_useState","useState","_useState2","focused","setFocused","value","inputRef","useRef","theme","useTheme","isMd","useMediaQuery","breakpoints","up","setValue","event","target","set","useEffect","_inputRef$current","current","focus","clear","createElement","IconButton","onClick","_inputRef$current2","size","sx","visibility","ClearIcon","color","React","variant","onChange","placeholder","formatMessage","id","onFocus","onBlur","InputProps","startAdornment","InputAdornment","position","SearchIcon","endAdornment","inputProps"],"mappings":";u1BAgBA,IAAMA,EAAkBC,EAAOC,EAAW,CACxCC,kBAAmB,SAACC,EAAY,CAC9B,MAAA,CAAC,CAAC,cAAe,WAAY,YAAa,OAAO,EAAEC,SAASD,CAAI,CAAA,CACpE,CAAC,EAKE,SAAAE,EAAA,CAAGC,IAAAA,EAAWD,EAAXC,YAAaC,EAAQF,EAARE,SAAUC,EAASH,EAATG,UAAWC,EAAKJ,EAALI,MAAa,MAAA,CACnDC,MAAOD,GAASH,EAAeC,GAAYC,EAAY,OAAS,MAAS,OACzEG,WAAY,iBACd,CAAC,CAAC,EAEF,SAASC,EAAMC,EAA4D,CAAA,IAAAC,EAAAD,EAAzDE,eAAAA,EAAcD,IAAG,OAAA,IAAGA,EAAAE,EAAAH,EAAEI,WAAAA,EAAUD,IAAG,OAAA,GAAKA,EAClDE,EAAOC,EAAQ,EACrBC,EAAwCC,EAAAA,EAAiBC,EAAAC,EAAAH,EAAA,CAAA,EAAlDI,EAAYF,EAAA,CAAA,EAAEG,EAAeH,EAAA,CAAA,EAC9BI,EAASF,EAAaG,IAAIZ,CAAc,EAC9Ca,EAA8BC,EAAAA,SAAS,EAAK,EAACC,EAAAP,EAAAK,EAAA,CAAA,EAAtCG,EAAOD,EAAA,CAAA,EAAEE,EAAUF,EAAA,CAAA,EACpBG,EAAQP,GAAU,GAClBQ,EAAWC,SAAgC,IAAI,EAE/CC,EAAQC,EAAS,EACjBC,EAAOC,EAAcH,EAAMI,YAAYC,GAAG,IAAI,CAAC,EAE/CC,EAAW,SAACC,EAA+C,CAC1DA,EAAMC,OAAOX,MAGhBT,EAAaqB,IAAI9B,EAAgB4B,EAAMC,OAAOX,KAAK,EAFvCT,EAAA,OAAQT,CAAc,EAIpCU,EAAgBD,CAAY,CAC9B,EAEAsB,EAAAA,UAAU,UAAM,CACd,GAAIf,EAAS,CAAAgB,IAAAA,GACXA,EAAAb,EAASc,WAAO,MAAAD,IAAA,QAAhBA,EAAkBE,MAAM,CAAA,CAC1B,EACC,CAAClB,CAAO,CAAC,EAENmB,IAAAA,EACJC,EAAAA,cAACC,EAAU,CACTC,QAAS,UAAM,CAAAC,IAAAA,EACJZ,EAAA,CAAEE,OAAQ,CAAEX,MAAO,EAAA,CAAG,CAA0C,GACzEqB,EAAApB,EAASc,WAAO,MAAAM,IAAA,QAAhBA,EAAkBL,MAAM,CAC1B,EACAM,KAAK,QACLC,GAAI,CAAEC,WAAYxB,EAAQ,UAAY,QAAA,CAAS,EAE/CkB,EAAAA,cAACO,EAAS,CAACC,MAAM,UAAA,CAAY,CACnB,EAIZC,OAAAA,EAAAT,cAACpD,EAAe,CACdmC,SAAAA,EACAD,MAAAA,EACA4B,QAAQ,WACRC,SAAUpB,EACVqB,YAAa7C,EAAK8C,cAAc,CAAEC,GAAI,0BAAA,CAA4B,EAClEC,QAAS,UAAF,CAAA,OAAQlC,EAAW,EAAI,CAAC,EAC/BqB,QAAS,UAAF,CAAA,OAAQrB,EAAW,EAAI,CAAC,EAC/BmC,OAAQ,UAAF,CAAA,OAAQnC,EAAW,EAAK,CAAC,EAC/B1B,YAAaW,EACbV,SAAUwB,EACVvB,UAAW,CAAC,CAACyB,EACbxB,MAAO6B,EACP8B,WAAY,CACVC,eACElB,EAAAA,cAACmB,EAAc,CAACC,SAAS,OAAA,EACvBpB,EAAAA,cAACqB,EAAU,CAACb,MAAM,UAAA,CAAY,CAChB,EAElBc,aAActB,EAAAA,cAACmB,EAAc,CAACC,SAAS,KAAA,EAAOrB,CAAsB,CACtE,EACAwB,WAAY,CACV,aAAc,QAAA,CAChB,CACD,CAEL"}