klz-cables.com/.pnpm-store/v10/files/61/073faa2daa185ac6780d9b998da6545e0379e7137ea6e571065d1d0d0eb0b599c1ba6c1f8ffd16b6ecfffc233e82cd99ebd1c517851b43e2469b280e356a75

{"version":3,"file":"index.js","names":["React","useEffect","useRef","useState","useDebounce","baseClass","SearchFilter","props","handleChange","initialParams","label","searchQueryParam","searchParam","search","setSearch","undefined","shouldUpdateState","previousSearch","debouncedSearch","current","_jsx","className","id","onChange","e","target","value","placeholder","type"],"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useEffect, useRef, useState } from 'react'\n\nimport type { SearchFilterProps } from './types.js'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport './index.scss'\n\nconst baseClass = 'search-filter'\n\nexport function SearchFilter(props: SearchFilterProps) {\n  const { handleChange, initialParams, label, searchQueryParam } = props\n  const searchParam = initialParams?.search || searchQueryParam\n  const [search, setSearch] = useState(typeof searchParam === 'string' ? searchParam : undefined)\n\n  /**\n   * Tracks whether the state should be updated based on the search value.\n   * If the value is updated from the URL, we don't want to update the state as it causes additional renders.\n   */\n  const shouldUpdateState = useRef(true)\n\n  /**\n   * Tracks the previous search value to compare with the current debounced search value.\n   */\n  const previousSearch = useRef(typeof searchParam === 'string' ? searchParam : undefined)\n\n  const debouncedSearch = useDebounce(search, 300)\n\n  useEffect(() => {\n    if (searchParam !== previousSearch.current) {\n      shouldUpdateState.current = false\n      setSearch(searchParam as string)\n      previousSearch.current = searchParam as string\n    }\n\n    return () => {\n      shouldUpdateState.current = true\n      previousSearch.current = undefined\n    }\n  }, [searchParam])\n\n  useEffect(() => {\n    if (debouncedSearch !== previousSearch.current && shouldUpdateState.current) {\n      if (handleChange) {\n        handleChange(debouncedSearch)\n      }\n\n      previousSearch.current = debouncedSearch\n    }\n  }, [debouncedSearch, handleChange])\n\n  return (\n    <div className={baseClass}>\n      <input\n        aria-label={label}\n        className={`${baseClass}__input`}\n        id=\"search-filter-input\"\n        onChange={(e) => {\n          shouldUpdateState.current = true\n          setSearch(e.target.value)\n        }}\n        placeholder={label}\n        type=\"text\"\n        value={search || ''}\n      />\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,IAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAInD,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,OAAO,SAASC,aAAaC,KAAwB;EACnD,MAAM;IAAEC,YAAY;IAAEC,aAAa;IAAEC,KAAK;IAAEC;EAAgB,CAAE,GAAGJ,KAAA;EACjE,MAAMK,WAAA,GAAcH,aAAA,EAAeI,MAAA,IAAUF,gBAAA;EAC7C,MAAM,CAACE,MAAA,EAAQC,SAAA,CAAU,GAAGX,QAAA,CAAS,OAAOS,WAAA,KAAgB,WAAWA,WAAA,GAAcG,SAAA;EAErF;;;;EAIA,MAAMC,iBAAA,GAAoBd,MAAA,CAAO;EAEjC;;;EAGA,MAAMe,cAAA,GAAiBf,MAAA,CAAO,OAAOU,WAAA,KAAgB,WAAWA,WAAA,GAAcG,SAAA;EAE9E,MAAMG,eAAA,GAAkBd,WAAA,CAAYS,MAAA,EAAQ;EAE5CZ,SAAA,CAAU;IACR,IAAIW,WAAA,KAAgBK,cAAA,CAAeE,OAAO,EAAE;MAC1CH,iBAAA,CAAkBG,OAAO,GAAG;MAC5BL,SAAA,CAAUF,WAAA;MACVK,cAAA,CAAeE,OAAO,GAAGP,WAAA;IAC3B;IAEA,OAAO;MACLI,iBAAA,CAAkBG,OAAO,GAAG;MAC5BF,cAAA,CAAeE,OAAO,GAAGJ,SAAA;IAC3B;EACF,GAAG,CAACH,WAAA,CAAY;EAEhBX,SAAA,CAAU;IACR,IAAIiB,eAAA,KAAoBD,cAAA,CAAeE,OAAO,IAAIH,iBAAA,CAAkBG,OAAO,EAAE;MAC3E,IAAIX,YAAA,EAAc;QAChBA,YAAA,CAAaU,eAAA;MACf;MAEAD,cAAA,CAAeE,OAAO,GAAGD,eAAA;IAC3B;EACF,GAAG,CAACA,eAAA,EAAiBV,YAAA,CAAa;EAElC,oBACEY,IAAA,CAAC;IAAIC,SAAA,EAAWhB,SAAA;cACd,aAAAe,IAAA,CAAC;MACC,cAAYV,KAAA;MACZW,SAAA,EAAW,GAAGhB,SAAA,SAAkB;MAChCiB,EAAA,EAAG;MACHC,QAAA,EAAWC,CAAA;QACTR,iBAAA,CAAkBG,OAAO,GAAG;QAC5BL,SAAA,CAAUU,CAAA,CAAEC,MAAM,CAACC,KAAK;MAC1B;MACAC,WAAA,EAAajB,KAAA;MACbkB,IAAA,EAAK;MACLF,KAAA,EAAOb,MAAA,IAAU;;;AAIzB","ignoreList":[]}