koval-ui/dist/src/internal/hooks/useResizeObserverNew.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"useResizeObserverNew.cjs","sources":["../../../../src/internal/hooks/useResizeObserverNew.ts"],"sourcesContent":["import {type MutableRefObject, useEffect, useMemo, useRef, useState} from 'react';\n\n// Unfinished. TODO: make it work.\nexport function useResizeObserver<TElement extends HTMLElement | null>(\n    ref: MutableRefObject<TElement>\n) {\n    const frameID = useRef(0);\n\n    const [size, setSize] = useState<ResizeObserverSize>();\n\n    const result = useMemo(\n        () => ({width: size?.inlineSize, height: size?.blockSize}),\n        [size?.blockSize, size?.inlineSize]\n    );\n\n    const observer = useMemo(\n        () =>\n            typeof window !== 'undefined'\n                ? new ResizeObserver((entries: ResizeObserverEntry[]) => {\n                      const entry = entries[0];\n\n                      if (entry) {\n                          cancelAnimationFrame(frameID.current);\n\n                          frameID.current = requestAnimationFrame(() => {\n                              if (ref.current) {\n                                  setSize(entry.borderBoxSize[0]);\n                              }\n                          });\n                      }\n                  })\n                : null,\n        [] // eslint-disable-line react-hooks/exhaustive-deps\n    );\n\n    useEffect(() => {\n        if (ref.current) {\n            observer?.observe(ref.current, {box: 'border-box'});\n        }\n\n        return () => {\n            observer?.disconnect();\n\n            if (frameID.current) {\n                cancelAnimationFrame(frameID.current);\n            }\n        };\n    }, [ref.current]); // eslint-disable-line react-hooks/exhaustive-deps\n\n    return result;\n}\n\nexport function useElementSize<TElement extends HTMLElement | null>(\n    ref: MutableRefObject<TElement>\n) {\n    const {width, height} = useResizeObserver(ref);\n    return {width, height};\n}\n"],"names":["useResizeObserver","ref","frameID","useRef","size","setSize","useState","result","useMemo","observer","entries","entry","useEffect"],"mappings":"sHAGO,SAASA,EACZC,EACF,CACQ,MAAAC,EAAUC,SAAO,CAAC,EAElB,CAACC,EAAMC,CAAO,EAAIC,WAA6B,EAE/CC,EAASC,EAAA,QACX,KAAO,CAAC,MAAOJ,GAAA,YAAAA,EAAM,WAAY,OAAQA,GAAA,YAAAA,EAAM,YAC/C,CAACA,GAAA,YAAAA,EAAM,UAAWA,GAAA,YAAAA,EAAM,UAAU,CACtC,EAEMK,EAAWD,EAAA,QACb,IACI,OAAO,OAAW,IACZ,IAAI,eAAgBE,GAAmC,CAC7C,MAAAC,EAAQD,EAAQ,CAAC,EAEnBC,IACA,qBAAqBT,EAAQ,OAAO,EAE5BA,EAAA,QAAU,sBAAsB,IAAM,CACtCD,EAAI,SACII,EAAAM,EAAM,cAAc,CAAC,CAAC,CAClC,CACH,EAER,CAAA,EACD,KACV,CAAA,CACJ,EAEAC,OAAAA,EAAAA,UAAU,KACFX,EAAI,UACJQ,GAAA,MAAAA,EAAU,QAAQR,EAAI,QAAS,CAAC,IAAK,gBAGlC,IAAM,CACTQ,GAAA,MAAAA,EAAU,aAENP,EAAQ,SACR,qBAAqBA,EAAQ,OAAO,CAE5C,GACD,CAACD,EAAI,OAAO,CAAC,EAETM,CACX"}