(\n ComponentInner: ComponentType,\n options: ComponentsProps = {}\n) {\n class ResizeDetectorHOC extends Component<\n PropsWithoutResizeDetectorDimensions & { forwardedRef: ForwardedRef }\n > {\n ref = createRef();\n\n render() {\n const { forwardedRef, ...rest } = this.props;\n const targetRef = forwardedRef ?? this.ref;\n\n return (\n }>\n \n \n );\n }\n }\n\n function forwardRefWrapper(props: PropsWithoutResizeDetectorDimensions, ref: ForwardedRef) {\n return ;\n }\n\n const name = ComponentInner.displayName || ComponentInner.name;\n forwardRefWrapper.displayName = `withResizeDetector(${name})`;\n\n return forwardRef(forwardRefWrapper);\n}\n\n// Just Pick would be sufficient for this, but I'm trying to avoid unnecessary mapping over union types\n// https://github.com/Microsoft/TypeScript/issues/28339\ntype PropsWithoutResizeDetectorDimensions = Without, 'width'>, 'height'>;\ntype Without = Key extends keyof T ? Omit : T;\ntype OptionalKey = Key extends keyof T ? Omit & { [K in Key]?: T[K] } : T;\n\nexport default withResizeDetector;\n","import { useLayoutEffect, useEffect, useState, useRef, MutableRefObject } from 'react';\n\nimport { patchResizeHandler, createNotifier, isSSR } from './utils';\n\nimport { Props, ReactResizeDetectorDimensions } from './ResizeDetector';\n\nconst useEnhancedEffect = isSSR() ? useEffect : useLayoutEffect;\n\ninterface FunctionProps extends Props {\n targetRef?: ReturnType;\n}\n\nfunction useResizeDetector(props: FunctionProps = {}): UseResizeDetectorReturn {\n const {\n skipOnMount = false,\n refreshMode,\n refreshRate = 1000,\n refreshOptions,\n handleWidth = true,\n handleHeight = true,\n targetRef,\n observerOptions,\n onResize\n } = props;\n\n const skipResize: MutableRefObject = useRef(skipOnMount);\n const localRef = useRef(null);\n const ref = (targetRef ?? localRef) as MutableRefObject;\n const resizeHandler = useRef();\n\n const [size, setSize] = useState({\n width: undefined,\n height: undefined\n });\n\n useEnhancedEffect(() => {\n if (isSSR()) {\n return;\n }\n\n const notifyResize = createNotifier(onResize, setSize, handleWidth, handleHeight);\n\n const resizeCallback: ResizeObserverCallback = entries => {\n if (!handleWidth && !handleHeight) return;\n\n entries.forEach(entry => {\n const { width, height } = (entry && entry.contentRect) || {};\n\n const shouldSetSize = !skipResize.current && !isSSR();\n if (shouldSetSize) {\n notifyResize({ width, height });\n }\n\n skipResize.current = false;\n });\n };\n\n resizeHandler.current = patchResizeHandler(resizeCallback, refreshMode, refreshRate, refreshOptions);\n\n const resizeObserver = new window.ResizeObserver(resizeHandler.current as ResizeObserverCallback);\n\n if (ref.current) {\n // Something wrong with typings here...\n resizeObserver.observe(ref.current as any, observerOptions);\n }\n\n return () => {\n resizeObserver.disconnect();\n const patchedResizeHandler = resizeHandler.current as any;\n if (patchedResizeHandler && patchedResizeHandler.cancel) {\n patchedResizeHandler.cancel();\n }\n };\n }, [refreshMode, refreshRate, refreshOptions, handleWidth, handleHeight, onResize, observerOptions, ref.current]);\n\n return { ref, ...size };\n}\n\nexport default useResizeDetector;\n\nexport interface UseResizeDetectorReturn extends ReactResizeDetectorDimensions {\n ref: MutableRefObject;\n}\n","var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];\n\nvar rectChanged = function rectChanged(a, b) {\n if (a === void 0) {\n a = {};\n }\n\n if (b === void 0) {\n b = {};\n }\n\n return props.some(function (prop) {\n return a[prop] !== b[prop];\n });\n};\n\nvar observedNodes =\n/*#__PURE__*/\nnew Map();\nvar rafId;\n\nvar run = function run() {\n var changedStates = [];\n observedNodes.forEach(function (state, node) {\n var newRect = node.getBoundingClientRect();\n\n if (rectChanged(newRect, state.rect)) {\n state.rect = newRect;\n changedStates.push(state);\n }\n });\n changedStates.forEach(function (state) {\n state.callbacks.forEach(function (cb) {\n return cb(state.rect);\n });\n });\n rafId = window.requestAnimationFrame(run);\n};\n\nfunction observeRect(node, cb) {\n return {\n observe: function observe() {\n var wasEmpty = observedNodes.size === 0;\n\n if (observedNodes.has(node)) {\n observedNodes.get(node).callbacks.push(cb);\n } else {\n observedNodes.set(node, {\n rect: undefined,\n hasRectChanged: false,\n callbacks: [cb]\n });\n }\n\n if (wasEmpty) run();\n },\n unobserve: function unobserve() {\n var state = observedNodes.get(node);\n\n if (state) {\n // Remove the callback\n var index = state.callbacks.indexOf(cb);\n if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference\n\n if (!state.callbacks.length) observedNodes[\"delete\"](node); // Stop the loop\n\n if (!observedNodes.size) cancelAnimationFrame(rafId);\n }\n }\n };\n}\n\nexport default observeRect;\n//# sourceMappingURL=observe-rect.esm.js.map\n","import React from 'react'\n\nexport default typeof window !== 'undefined'\n ? React.useLayoutEffect\n : React.useEffect\n","import React from 'react'\nimport observeRect from '@reach/observe-rect'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\n\nexport default function useRect(\n nodeRef,\n initialRect = { width: 0, height: 0 }\n) {\n const [element, setElement] = React.useState(nodeRef.current)\n const [rect, dispatch] = React.useReducer(rectReducer, initialRect)\n const initialRectSet = React.useRef(false)\n\n useIsomorphicLayoutEffect(() => {\n if (nodeRef.current !== element) {\n setElement(nodeRef.current)\n }\n })\n\n useIsomorphicLayoutEffect(() => {\n if (element && !initialRectSet.current) {\n initialRectSet.current = true\n const rect = element.getBoundingClientRect()\n dispatch({ rect })\n }\n }, [element])\n\n React.useEffect(() => {\n if (!element) {\n return\n }\n\n const observer = observeRect(element, rect => {\n dispatch({ rect })\n })\n\n observer.observe()\n\n return () => {\n observer.unobserve()\n }\n }, [element])\n\n return rect\n}\n\nfunction rectReducer(state, action) {\n const rect = action.rect\n if (state.height !== rect.height || state.width !== rect.width) {\n return rect\n }\n return state\n}\n","import React from 'react'\nimport useRect from './useRect'\nimport useIsomorphicLayoutEffect from './useIsomorphicLayoutEffect'\n\nconst defaultEstimateSize = () => 50\n\nconst defaultKeyExtractor = index => index\n\nconst defaultMeasureSize = (el, horizontal) => {\n const key = horizontal ? 'offsetWidth' : 'offsetHeight'\n\n return el[key]\n}\n\nexport const defaultRangeExtractor = range => {\n const start = Math.max(range.start - range.overscan, 0)\n const end = Math.min(range.end + range.overscan, range.size - 1)\n\n const arr = []\n\n for (let i = start; i <= end; i++) {\n arr.push(i)\n }\n\n return arr\n}\n\nexport function useVirtual({\n size = 0,\n estimateSize = defaultEstimateSize,\n overscan = 1,\n paddingStart = 0,\n paddingEnd = 0,\n parentRef,\n horizontal,\n scrollToFn,\n useObserver,\n initialRect,\n onScrollElement,\n scrollOffsetFn,\n keyExtractor = defaultKeyExtractor,\n measureSize = defaultMeasureSize,\n rangeExtractor = defaultRangeExtractor,\n}) {\n const sizeKey = horizontal ? 'width' : 'height'\n const scrollKey = horizontal ? 'scrollLeft' : 'scrollTop'\n\n const latestRef = React.useRef({\n scrollOffset: 0,\n measurements: [],\n })\n\n const [scrollOffset, setScrollOffset] = React.useState(0)\n latestRef.current.scrollOffset = scrollOffset\n\n const useMeasureParent = useObserver || useRect\n\n const { [sizeKey]: outerSize } = useMeasureParent(parentRef, initialRect)\n\n latestRef.current.outerSize = outerSize\n\n const defaultScrollToFn = React.useCallback(\n offset => {\n if (parentRef.current) {\n parentRef.current[scrollKey] = offset\n }\n },\n [parentRef, scrollKey]\n )\n\n const resolvedScrollToFn = scrollToFn || defaultScrollToFn\n\n scrollToFn = React.useCallback(\n offset => {\n resolvedScrollToFn(offset, defaultScrollToFn)\n },\n [defaultScrollToFn, resolvedScrollToFn]\n )\n\n const [measuredCache, setMeasuredCache] = React.useState({})\n\n const measure = React.useCallback(() => setMeasuredCache({}), [])\n\n const pendingMeasuredCacheIndexesRef = React.useRef([])\n\n const measurements = React.useMemo(() => {\n const min =\n pendingMeasuredCacheIndexesRef.current.length > 0\n ? Math.min(...pendingMeasuredCacheIndexesRef.current)\n : 0\n pendingMeasuredCacheIndexesRef.current = []\n\n const measurements = latestRef.current.measurements.slice(0, min)\n\n for (let i = min; i < size; i++) {\n const key = keyExtractor(i)\n const measuredSize = measuredCache[key]\n const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart\n const size =\n typeof measuredSize === 'number' ? measuredSize : estimateSize(i)\n const end = start + size\n measurements[i] = { index: i, start, size, end, key }\n }\n return measurements\n }, [estimateSize, measuredCache, paddingStart, size, keyExtractor])\n\n const totalSize = (measurements[size - 1]?.end || paddingStart) + paddingEnd\n\n latestRef.current.measurements = measurements\n latestRef.current.totalSize = totalSize\n\n const element = onScrollElement ? onScrollElement.current : parentRef.current\n\n const scrollOffsetFnRef = React.useRef(scrollOffsetFn)\n scrollOffsetFnRef.current = scrollOffsetFn\n\n useIsomorphicLayoutEffect(() => {\n if (!element) {\n setScrollOffset(0)\n\n return\n }\n\n const onScroll = event => {\n const offset = scrollOffsetFnRef.current\n ? scrollOffsetFnRef.current(event)\n : element[scrollKey]\n\n setScrollOffset(offset)\n }\n\n onScroll()\n\n element.addEventListener('scroll', onScroll, {\n capture: false,\n passive: true,\n })\n\n return () => {\n element.removeEventListener('scroll', onScroll)\n }\n }, [element, scrollKey])\n\n const { start, end } = calculateRange(latestRef.current)\n\n const indexes = React.useMemo(\n () =>\n rangeExtractor({\n start,\n end,\n overscan,\n size: measurements.length,\n }),\n [start, end, overscan, measurements.length, rangeExtractor]\n )\n\n const measureSizeRef = React.useRef(measureSize)\n measureSizeRef.current = measureSize\n\n const virtualItems = React.useMemo(() => {\n const virtualItems = []\n\n for (let k = 0, len = indexes.length; k < len; k++) {\n const i = indexes[k]\n const measurement = measurements[i]\n\n const item = {\n ...measurement,\n measureRef: el => {\n if (el) {\n const measuredSize = measureSizeRef.current(el, horizontal)\n\n if (measuredSize !== item.size) {\n const { scrollOffset } = latestRef.current\n\n if (item.start < scrollOffset) {\n defaultScrollToFn(scrollOffset + (measuredSize - item.size))\n }\n\n pendingMeasuredCacheIndexesRef.current.push(i)\n\n setMeasuredCache(old => ({\n ...old,\n [item.key]: measuredSize,\n }))\n }\n }\n },\n }\n\n virtualItems.push(item)\n }\n\n return virtualItems\n }, [indexes, defaultScrollToFn, horizontal, measurements])\n\n const mountedRef = React.useRef(false)\n\n useIsomorphicLayoutEffect(() => {\n if (mountedRef.current) {\n setMeasuredCache({})\n }\n mountedRef.current = true\n }, [estimateSize])\n\n const scrollToOffset = React.useCallback(\n (toOffset, { align = 'start' } = {}) => {\n const { scrollOffset, outerSize } = latestRef.current\n\n if (align === 'auto') {\n if (toOffset <= scrollOffset) {\n align = 'start'\n } else if (toOffset >= scrollOffset + outerSize) {\n align = 'end'\n } else {\n align = 'start'\n }\n }\n\n if (align === 'start') {\n scrollToFn(toOffset)\n } else if (align === 'end') {\n scrollToFn(toOffset - outerSize)\n } else if (align === 'center') {\n scrollToFn(toOffset - outerSize / 2)\n }\n },\n [scrollToFn]\n )\n\n const tryScrollToIndex = React.useCallback(\n (index, { align = 'auto', ...rest } = {}) => {\n const { measurements, scrollOffset, outerSize } = latestRef.current\n\n const measurement = measurements[Math.max(0, Math.min(index, size - 1))]\n\n if (!measurement) {\n return\n }\n\n if (align === 'auto') {\n if (measurement.end >= scrollOffset + outerSize) {\n align = 'end'\n } else if (measurement.start <= scrollOffset) {\n align = 'start'\n } else {\n return\n }\n }\n\n const toOffset =\n align === 'center'\n ? measurement.start + measurement.size / 2\n : align === 'end'\n ? measurement.end\n : measurement.start\n\n scrollToOffset(toOffset, { align, ...rest })\n },\n [scrollToOffset, size]\n )\n\n const scrollToIndex = React.useCallback(\n (...args) => {\n // We do a double request here because of\n // dynamic sizes which can cause offset shift\n // and end up in the wrong spot. Unfortunately,\n // we can't know about those dynamic sizes until\n // we try and render them. So double down!\n tryScrollToIndex(...args)\n requestAnimationFrame(() => {\n tryScrollToIndex(...args)\n })\n },\n [tryScrollToIndex]\n )\n\n return {\n virtualItems,\n totalSize,\n scrollToOffset,\n scrollToIndex,\n measure,\n }\n}\n\nconst findNearestBinarySearch = (low, high, getCurrentValue, value) => {\n while (low <= high) {\n let middle = ((low + high) / 2) | 0\n let currentValue = getCurrentValue(middle)\n\n if (currentValue < value) {\n low = middle + 1\n } else if (currentValue > value) {\n high = middle - 1\n } else {\n return middle\n }\n }\n\n if (low > 0) {\n return low - 1\n } else {\n return 0\n }\n}\n\nfunction calculateRange({ measurements, outerSize, scrollOffset }) {\n const size = measurements.length - 1\n const getOffset = index => measurements[index].start\n\n let start = findNearestBinarySearch(0, size, getOffset, scrollOffset)\n let end = start\n\n while (end < size && measurements[end].end < scrollOffset + outerSize) {\n end++\n }\n\n return { start, end }\n}\n","/** @license React v17.0.2\n * react.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';var l=require(\"object-assign\"),n=60103,p=60106;exports.Fragment=60107;exports.StrictMode=60108;exports.Profiler=60114;var q=60109,r=60110,t=60112;exports.Suspense=60113;var u=60115,v=60116;\nif(\"function\"===typeof Symbol&&Symbol.for){var w=Symbol.for;n=w(\"react.element\");p=w(\"react.portal\");exports.Fragment=w(\"react.fragment\");exports.StrictMode=w(\"react.strict_mode\");exports.Profiler=w(\"react.profiler\");q=w(\"react.provider\");r=w(\"react.context\");t=w(\"react.forward_ref\");exports.Suspense=w(\"react.suspense\");u=w(\"react.memo\");v=w(\"react.lazy\")}var x=\"function\"===typeof Symbol&&Symbol.iterator;\nfunction y(a){if(null===a||\"object\"!==typeof a)return null;a=x&&a[x]||a[\"@@iterator\"];return\"function\"===typeof a?a:null}function z(a){for(var b=\"https://reactjs.org/docs/error-decoder.html?invariant=\"+a,c=1;c