{"version":3,"file":"index.esm.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","useState","size","_useState","setSize","current","getAttribute","elId","useRef","existingId","uuidv4","resizeObserver","entries","forEach","entry","target","c","useLayoutEffect","_ref$current2","_ref$current3","setAttribute","getBoundingClientRect","width","height","contentBoxSize","_entry$contentBoxSize","inlineSize","blockSize","contentRect","unobserve","observe"],"mappings":"4FAGA,MACeA,EAAG,GAQEC,EAAG,SAACC,EAAKC,GAAyB,IAAAC,EAEpD,QAFoD,IAAzBD,IAAAA,EAAc,CAAC,EAAG,IAEvB,oBAAXE,OAAwB,OAAOF,EAE1C,IAAwBG,EAAAA,EAASH,GAA1BI,EAAPC,EAAA,GAAaC,EAEbD,EAAA,KAAmBN,SAAH,QAAAE,EAAGF,EAAKQ,eAAR,IAAAN,OAAA,EAAGA,EAAcO,aAAa,aACpCC,EAAGC,EAAOC,GAAU,UAAcC,KAwD5C,OA9CAC,EAAiBA,GAAkB,mBARf,SAAAC,GAClBA,SAAAA,EAASC,QAAQ,SAAAC,GAEfnB,GADemB,EAAMC,OAAOV,SAAWS,EAAMC,QAC5BT,aAAa,cAAcO,QAAQ,SAAAG,UAAMA,EAACF,SAO/DG,EAAgB,WAAM,IAAAC,EAAAC,EACpB,GAAKtB,SAAAA,EAAKQ,QAoCV,OAlCAR,EAAIQ,QAAQe,aAAa,YAAab,EAAKF,SAG3CD,EAAQ,CACNP,SAAA,QAAAA,EAAAA,EAAKQ,eAAL,IAAAa,OAAArB,EAAAqB,EAAcG,wBAAwBC,MACtCzB,SAFM,QAENA,EAAAA,EAAKQ,eAFC,IAAAc,OAENtB,EAAAsB,EAAcE,wBAAwBE,SAMxC5B,EAAUY,EAAKF,mBACVV,EAAUY,EAAKF,UAAY,GAC9B,CAAA,SAAAS,SACKA,IAEL,UAAIA,EAAMU,sBAAV,IAAAC,GAAIA,EAAuB,GACzBrB,EAAQ,CAACU,EAAMU,eAAe,GAAGE,WAAYZ,EAAMU,eAAe,GAAGG,YAErEvB,EADSU,SAAAA,EAAOU,eACR,CAACV,EAAMU,eAAeE,WAAYZ,EAAMU,eAAe,GAAGG,WAE1D,CAACb,EAAMc,YAAYN,MAAOR,EAAMc,YAAYL,aAKpDd,GACFE,EAAekB,UAAUhC,aAAzB,EAAyBA,EAAKQ,SAIhCM,EAAemB,QAAQjC,aAAvB,EAAuBA,EAAKQ,oBAIrBR,SAAAA,EAAKQ,SAEVM,EAAekB,UAAUhC,aAAAA,EAAAA,EAAKQ,WAE/B,CAACR,aAAD,EAACA,EAAKQ,QAASI,IAGnBP"}