{"version":3,"file":"index.modern.mjs","sources":["../src/index.js"],"sourcesContent":["import { useLayoutEffect, useState, useRef } from 'react'\nimport { v4 as uuidv4 } from 'uuid'\n\nlet resizeObserver\nconst callbacks = {}\n\n/**\n * Returns current width and height of specified element.\n *\n * @param {Ref} ref element to use in size calculation\n * @param {Array} defaultSize dims to use server side and before the first measurement\n */\nconst useElementSize = (ref, defaultSize = [0, 0]) => {\n  // returns default dims for ssr\n  if (typeof window === 'undefined') return defaultSize\n\n  const [size, setSize] = useState(defaultSize)\n  // set unique id or reuse element's existing unique id\n  const existingId = ref?.current?.getAttribute('resize-id')\n  const elId = useRef(existingId || `resize-${uuidv4()}`)\n\n  const updateSizes = entries => {\n    entries?.forEach(entry => {\n      const target = entry.target.current || entry.target\n      callbacks[target.getAttribute('resize-id')].forEach(c => c(entry))\n    })\n  }\n\n  // all instances use the same observer\n  resizeObserver = resizeObserver || new ResizeObserver(updateSizes)\n\n  useLayoutEffect(() => {\n    if (!ref?.current) return\n\n    ref.current.setAttribute('resize-id', elId.current)\n\n    // set initial size\n    setSize([\n      ref?.current?.getBoundingClientRect().width,\n      ref?.current?.getBoundingClientRect().height,\n    ])\n\n    // add callback for this instance\n    // more than one callback can be added for an element\n    // in case of two instances watching the same ref\n    callbacks[elId.current] = [\n      ...callbacks[elId.current] || [],\n      entry => {\n      if (!entry) return\n\n      if (entry.contentBoxSize?.[0]) {\n        setSize([entry.contentBoxSize[0].inlineSize, entry.contentBoxSize[0].blockSize])\n      } else if (entry?.contentBoxSize) {\n        setSize([entry.contentBoxSize.inlineSize, entry.contentBoxSize[0].blockSize])\n      } else {\n        setSize([entry.contentRect.width, entry.contentRect.height])\n      }\n    }]\n\n    // remove existing watch\n    if (existingId) {\n      resizeObserver.unobserve(ref?.current)\n    }\n\n    // watch for size changes\n    resizeObserver.observe(ref?.current)\n\n    // eslint-disable-next-line consistent-return\n    return () => {\n      if (!ref?.current) return\n\n      resizeObserver.unobserve(ref?.current)\n    }\n  }, [ref?.current, existingId])\n\n  return size\n}\n\nexport default useElementSize\n"],"names":["callbacks","useElementSize","ref","defaultSize","_ref$current","window","size","setSize","useState","existingId","current","getAttribute","useRef","uuidv4","resizeObserver","entries","forEach","entry","target","c","useLayoutEffect","_ref$current2","_ref$current3","setAttribute","elId","getBoundingClientRect","width","height","contentBoxSize","_entry$contentBoxSize","inlineSize","blockSize","contentRect","unobserve","observe"],"mappings":"4FAGA,MACA,MAAeA,EAAG,GAQEC,EAAG,CAACC,EAAKC,EAAc,CAAC,EAAG,MAAO,IAAAC,EAEpD,GAAsB,oBAAXC,OAAwB,OAAOF,EAE1C,MAAOG,EAAMC,GAAWC,EAASL,GAE3BM,EAAaP,SAAH,QAAGA,EAAAA,EAAKQ,eAAR,IAAAN,OAAGF,EAAAE,EAAcO,aAAa,eACjCC,EAAOH,GAAe,UAASI,OAwD5C,OA9CAC,EAAiBA,GAAkB,mBARfC,IAClBA,SAAAA,EAASC,QAAQC,IAEfjB,GADeiB,EAAMC,OAAOR,SAAWO,EAAMC,QAC5BP,aAAa,cAAcK,QAAQG,GAAKA,EAAEF,QAO/DG,EAAgB,KAAM,IAAAC,EAAAC,EACpB,GAAKpB,SAAAA,EAAKQ,QAoCV,OAlCAR,EAAIQ,QAAQa,aAAa,YAAaC,EAAKd,SAG3CH,EAAQ,CACNL,SADM,QACNA,EAAAA,EAAKQ,eADC,IAAAW,OACNnB,EAAAmB,EAAcI,wBAAwBC,MACtCxB,SAFM,QAENA,EAAAA,EAAKQ,eAFC,IAAAY,OAENpB,EAAAoB,EAAcG,wBAAwBE,SAMxC3B,EAAUwB,EAAKd,SAAW,IACrBV,EAAUwB,EAAKd,UAAY,GAC9BO,UACKA,IAED,UAAAA,EAAMW,sBAAN,IAAAC,GAAAA,EAAuB,GACzBtB,EAAQ,CAACU,EAAMW,eAAe,GAAGE,WAAYb,EAAMW,eAAe,GAAGG,YAErExB,EADSU,SAAAA,EAAOW,eACR,CAACX,EAAMW,eAAeE,WAAYb,EAAMW,eAAe,GAAGG,WAE1D,CAACd,EAAMe,YAAYN,MAAOT,EAAMe,YAAYL,YAKpDlB,GACFK,EAAemB,UAAU/B,aAAzB,EAAyBA,EAAKQ,SAIhCI,EAAeoB,QAAQhC,aAAAA,EAAAA,EAAKQ,SAGrB,KACAR,SAAAA,EAAKQ,SAEVI,EAAemB,UAAU/B,aAAAA,EAAAA,EAAKQ,WAE/B,CAACR,aAAD,EAACA,EAAKQ,QAASD,IAGnBH"}