{"version":3,"file":"useMediaQuery.mjs","sources":["../../../../../../../../web/src/ui/hooks/useMediaQuery.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\n/**\n * Return true if media query matches. The value is bound to media query list change event\n * so it will update automatically and trigger re-render when it changes. Pass in undefined\n * to disable this and cause it to return false.\n */\nexport function useMediaQuery(mediaQuery: string | undefined) {\n  const query = useMemo(() => (mediaQuery ? matchMedia(mediaQuery) : undefined), [mediaQuery]);\n  const [match, setMatch] = useState(() => query?.matches ?? false);\n  useEffect(() => {\n    if (!query) {\n      setMatch(false);\n      return;\n    }\n\n    const abortController = new AbortController();\n    query.addEventListener('change', (evt) => setMatch(evt.matches), { signal: abortController.signal });\n    return () => abortController.abort();\n  }, [query]);\n  return match;\n}\n"],"names":["useMediaQuery","mediaQuery","query","useMemo","matchMedia","undefined","match","setMatch","useState","matches","useEffect","abortController","AbortController","addEventListener","evt","signal","abort"],"mappings":";;;AAEA;;;;IAKO,SAASA,aAAAA,CAAcC,UAA8B,EAAA;AAC1D,IAAA,MAAMC,QAAQC,CAAAA,CAAQ,IAAOF,UAAAA,GAAaG,UAAAA,CAAWH,cAAcI,SAAAA,EAAY;AAACJ,QAAAA;AAAW,KAAA,CAAA;AAC3F,IAAA,MAAM,CAACK,KAAAA,EAAOC,QAAAA,CAAS,GAAGC,CAAAA,CAAS,IAAMN,OAAOO,OAAAA,IAAW,KAAA,CAAA;IAC3DC,CAAAA,CAAU,IAAA;AACR,QAAA,IAAI,CAACR,KAAAA,EAAO;YACVK,QAAAA,CAAS,KAAA,CAAA;AACT,YAAA;AACF,QAAA;AAEA,QAAA,MAAMI,kBAAkB,IAAIC,eAAAA,EAAAA;QAC5BV,KAAAA,CAAMW,gBAAgB,CAAC,QAAA,EAAU,CAACC,MAAQP,QAAAA,CAASO,GAAAA,CAAIL,OAAO,CAAA,EAAG;AAAEM,YAAAA,MAAAA,EAAQJ,gBAAgBI;AAAO,SAAA,CAAA;QAClG,OAAO,IAAMJ,gBAAgBK,KAAK,EAAA;IACpC,CAAA,EAAG;AAACd,QAAAA;AAAM,KAAA,CAAA;IACV,OAAOI,KAAAA;AACT;;;;"}