{"version":3,"file":"bundle.esm-CgVPyL4z-chunk.js","sources":["../../../node_modules/use-resize-observer/dist/bundle.esm.js"],"sourcesContent":["import { useRef, useEffect, useCallback, useState, useMemo } from 'react';\n\n// This could've been more streamlined with internal state instead of abusing\n// refs to such extent, but then composing hooks and components could not opt out of unnecessary renders.\nfunction useResolvedElement(subscriber, refOrElement) {\n  var lastReportRef = useRef(null);\n  var refOrElementRef = useRef(null);\n  refOrElementRef.current = refOrElement;\n  var cbElementRef = useRef(null); // Calling re-evaluation after each render without using a dep array,\n  // as the ref object's current value could've changed since the last render.\n\n  useEffect(function () {\n    evaluateSubscription();\n  });\n  var evaluateSubscription = useCallback(function () {\n    var cbElement = cbElementRef.current;\n    var refOrElement = refOrElementRef.current; // Ugly ternary. But smaller than an if-else block.\n\n    var element = cbElement ? cbElement : refOrElement ? refOrElement instanceof Element ? refOrElement : refOrElement.current : null;\n\n    if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.subscriber === subscriber) {\n      return;\n    }\n\n    if (lastReportRef.current && lastReportRef.current.cleanup) {\n      lastReportRef.current.cleanup();\n    }\n\n    lastReportRef.current = {\n      element: element,\n      subscriber: subscriber,\n      // Only calling the subscriber, if there's an actual element to report.\n      // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.\n      cleanup: element ? subscriber(element) : undefined\n    };\n  }, [subscriber]); // making sure we call the cleanup function on unmount\n\n  useEffect(function () {\n    return function () {\n      if (lastReportRef.current && lastReportRef.current.cleanup) {\n        lastReportRef.current.cleanup();\n        lastReportRef.current = null;\n      }\n    };\n  }, []);\n  return useCallback(function (element) {\n    cbElementRef.current = element;\n    evaluateSubscription();\n  }, [evaluateSubscription]);\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nfunction extractSize(entry, boxProp, sizeType) {\n  if (!entry[boxProp]) {\n    if (boxProp === \"contentBoxSize\") {\n      // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n      // See the 6th step in the description for the RO algorithm:\n      // https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n      // > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n      // In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n      return entry.contentRect[sizeType === \"inlineSize\" ? \"width\" : \"height\"];\n    }\n\n    return undefined;\n  } // A couple bytes smaller than calling Array.isArray() and just as effective here.\n\n\n  return entry[boxProp][0] ? entry[boxProp][0][sizeType] : // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n  // @ts-ignore\n  entry[boxProp][sizeType];\n}\n\nfunction useResizeObserver(opts) {\n  if (opts === void 0) {\n    opts = {};\n  }\n\n  // Saving the callback as a ref. With this, I don't need to put onResize in the\n  // effect dep array, and just passing in an anonymous function without memoising\n  // will not reinstantiate the hook's ResizeObserver.\n  var onResize = opts.onResize;\n  var onResizeRef = useRef(undefined);\n  onResizeRef.current = onResize;\n  var round = opts.round || Math.round; // Using a single instance throughout the hook's lifetime\n\n  var resizeObserverRef = useRef();\n\n  var _useState = useState({\n    width: undefined,\n    height: undefined\n  }),\n      size = _useState[0],\n      setSize = _useState[1]; // In certain edge cases the RO might want to report a size change just after\n  // the component unmounted.\n\n\n  var didUnmount = useRef(false);\n  useEffect(function () {\n    didUnmount.current = false;\n    return function () {\n      didUnmount.current = true;\n    };\n  }, []); // Using a ref to track the previous width / height to avoid unnecessary renders.\n\n  var previous = useRef({\n    width: undefined,\n    height: undefined\n  }); // This block is kinda like a useEffect, only it's called whenever a new\n  // element could be resolved based on the ref option. It also has a cleanup\n  // function.\n\n  var refCallback = useResolvedElement(useCallback(function (element) {\n    // We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n    // This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n    if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {\n      resizeObserverRef.current = {\n        box: opts.box,\n        round: round,\n        instance: new ResizeObserver(function (entries) {\n          var entry = entries[0];\n          var boxProp = opts.box === \"border-box\" ? \"borderBoxSize\" : opts.box === \"device-pixel-content-box\" ? \"devicePixelContentBoxSize\" : \"contentBoxSize\";\n          var reportedWidth = extractSize(entry, boxProp, \"inlineSize\");\n          var reportedHeight = extractSize(entry, boxProp, \"blockSize\");\n          var newWidth = reportedWidth ? round(reportedWidth) : undefined;\n          var newHeight = reportedHeight ? round(reportedHeight) : undefined;\n\n          if (previous.current.width !== newWidth || previous.current.height !== newHeight) {\n            var newSize = {\n              width: newWidth,\n              height: newHeight\n            };\n            previous.current.width = newWidth;\n            previous.current.height = newHeight;\n\n            if (onResizeRef.current) {\n              onResizeRef.current(newSize);\n            } else {\n              if (!didUnmount.current) {\n                setSize(newSize);\n              }\n            }\n          }\n        })\n      };\n    }\n\n    resizeObserverRef.current.instance.observe(element, {\n      box: opts.box\n    });\n    return function () {\n      if (resizeObserverRef.current) {\n        resizeObserverRef.current.instance.unobserve(element);\n      }\n    };\n  }, [opts.box, round]), opts.ref);\n  return useMemo(function () {\n    return {\n      ref: refCallback,\n      width: size.width,\n      height: size.height\n    };\n  }, [refCallback, size.width, size.height]);\n}\n\nexport { useResizeObserver as default };\n"],"names":["useResolvedElement","subscriber","refOrElement","lastReportRef","useRef","refOrElementRef","cbElementRef","useEffect","evaluateSubscription","useCallback","cbElement","element","extractSize","entry","boxProp","sizeType","useResizeObserver","opts","onResize","onResizeRef","round","resizeObserverRef","_useState","useState","size","setSize","didUnmount","previous","refCallback","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","useMemo"],"mappings":"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","x_google_ignoreList":[0]}