var $ksDzM$react = require("react"); var $ksDzM$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect"); function $parcel$export(e, n, v, s) { Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); } $parcel$export(module.exports, "useSize", () => $d2c1d285af17635b$export$1ab7ae714698c4b8); function $d2c1d285af17635b$export$1ab7ae714698c4b8(element) { const [size, setSize] = $ksDzM$react.useState(undefined); $ksDzM$radixuireactuselayouteffect.useLayoutEffect(()=>{ if (element) { // provide size as early as possible setSize({ width: element.offsetWidth, height: element.offsetHeight }); const resizeObserver = new ResizeObserver((entries)=>{ if (!Array.isArray(entries)) return; // Since we only observe the one element, we don't need to loop over the // array if (!entries.length) return; const entry = entries[0]; let width; let height; if ('borderBoxSize' in entry) { const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry; width = borderSize['inlineSize']; height = borderSize['blockSize']; } else { // for browsers that don't support `borderBoxSize` // we calculate it ourselves to get the correct border box. width = element.offsetWidth; height = element.offsetHeight; } setSize({ width: width, height: height }); }); resizeObserver.observe(element, { box: 'border-box' }); return ()=>resizeObserver.unobserve(element) ; } else // We only want to reset to `undefined` when the element becomes `null`, // not if it changes to another element. setSize(undefined); }, [ element ]); return size; } //# sourceMappingURL=index.js.map