virtua/lib/index.mjs.map

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.

{"version":3,"file":"index.mjs","sources":["../src/src/core/utils.ts","../src/src/core/cache.ts","../src/src/core/environment.ts","../src/src/core/store.ts","../src/src/core/scroller.ts","../src/src/core/resizer.ts","../src/src/react/useIsomorphicLayoutEffect.ts","../src/src/react/utils.ts","../src/src/react/useStatic.ts","../src/src/react/useLatestRef.ts","../src/src/react/ListItem.tsx","../src/src/react/useChildren.ts","../src/src/react/Virtualizer.tsx","../src/src/react/VList.tsx","../src/src/react/WindowVirtualizer.tsx","../src/src/react/useMergeRefs.ts","../src/src/react/VGrid.tsx"],"sourcesContent":["/** @internal */\nexport const NULL = null;\n\n/** @internal */\nexport const { min, max, abs, floor } = Math;\n\n/**\n * @internal\n */\nexport const clamp = (\n  value: number,\n  minValue: number,\n  maxValue: number\n): number => min(maxValue, max(minValue, value));\n\n/**\n * @internal\n */\nexport const sort = <T extends number>(arr: readonly T[]): T[] => {\n  return [...arr].sort((a, b) => a - b);\n};\n\n/**\n * @internal\n */\nexport const microtask: (fn: () => void) => void =\n  typeof queueMicrotask === \"function\"\n    ? queueMicrotask\n    : (fn) => {\n        Promise.resolve().then(fn);\n      };\n\n/**\n * @internal\n */\nexport const once = <T>(fn: () => T): (() => T) => {\n  let cache: T;\n\n  return () => {\n    if (fn) {\n      cache = fn();\n      fn = undefined!;\n    }\n    return cache;\n  };\n};\n","import { type InternalCacheSnapshot, type ItemsRange } from \"./types\";\nimport { clamp, floor, max, min, sort } from \"./utils\";\n\ntype Writeable<T> = {\n  -readonly [key in keyof T]: Writeable<T[key]>;\n};\n\n/** @internal */\nexport const UNCACHED = -1;\n\n/**\n * @internal\n */\nexport type Cache = {\n  readonly _length: number;\n  // sizes\n  readonly _sizes: number[];\n  readonly _defaultItemSize: number;\n  // offsets\n  readonly _computedOffsetIndex: number;\n  readonly _offsets: number[];\n};\n\nconst fill = (array: number[], length: number, prepend?: boolean): number[] => {\n  const key = prepend ? \"unshift\" : \"push\";\n  for (let i = 0; i < length; i++) {\n    array[key](UNCACHED);\n  }\n  return array;\n};\n\n/**\n * @internal\n */\nexport const getItemSize = (cache: Cache, index: number): number => {\n  const size = cache._sizes[index]!;\n  return size === UNCACHED ? cache._defaultItemSize : size;\n};\n\n/**\n * @internal\n */\nexport const setItemSize = (\n  cache: Writeable<Cache>,\n  index: number,\n  size: number\n): boolean => {\n  const isInitialMeasurement = cache._sizes[index] === UNCACHED;\n  cache._sizes[index] = size;\n  // mark as dirty\n  cache._computedOffsetIndex = min(index, cache._computedOffsetIndex);\n  return isInitialMeasurement;\n};\n\n/**\n * @internal\n */\nexport const computeOffset = (\n  cache: Writeable<Cache>,\n  index: number\n): number => {\n  if (!cache._length) return 0;\n  if (cache._computedOffsetIndex >= index) {\n    return cache._offsets[index]!;\n  }\n\n  if (cache._computedOffsetIndex < 0) {\n    // first offset must be 0 to avoid returning NaN, which can cause infinite rerender.\n    // https://github.com/inokawa/virtua/pull/160\n    cache._offsets[0] = 0;\n    cache._computedOffsetIndex = 0;\n  }\n  let i = cache._computedOffsetIndex;\n  let top = cache._offsets[i]!;\n  while (i < index) {\n    top += getItemSize(cache, i);\n    cache._offsets[++i] = top;\n  }\n  // mark as measured\n  cache._computedOffsetIndex = index;\n  return top;\n};\n\n/**\n * @internal\n */\nexport const computeTotalSize = (cache: Cache): number => {\n  if (!cache._length) return 0;\n  return (\n    computeOffset(cache, cache._length - 1) +\n    getItemSize(cache, cache._length - 1)\n  );\n};\n\n/**\n * Finds the index of an item in the cache whose computed offset is closest to the specified offset.\n *\n * @internal\n */\nexport const findIndex = (\n  cache: Cache,\n  offset: number,\n  low: number = 0,\n  high: number = cache._length - 1\n): number => {\n  // Find with binary search\n  while (low <= high) {\n    const mid = floor((low + high) / 2);\n    const itemOffset = computeOffset(cache, mid);\n    if (itemOffset <= offset) {\n      if (itemOffset + getItemSize(cache, mid) > offset) {\n        return mid;\n      }\n      low = mid + 1;\n    } else {\n      high = mid - 1;\n    }\n  }\n  return clamp(low, 0, cache._length - 1);\n};\n\n/**\n * @internal\n */\nexport const computeRange = (\n  cache: Cache,\n  scrollOffset: number,\n  viewportSize: number,\n  prevStartIndex: number\n): ItemsRange => {\n  // Clamp because prevStartIndex may exceed the limit when children decreased a lot after scrolling\n  prevStartIndex = min(prevStartIndex, cache._length - 1);\n\n  if (computeOffset(cache, prevStartIndex) <= scrollOffset) {\n    // search forward\n    // start <= end, prevStartIndex <= start\n    const end = findIndex(cache, scrollOffset + viewportSize, prevStartIndex);\n    return [findIndex(cache, scrollOffset, prevStartIndex, end), end];\n  } else {\n    // search backward\n    // start <= end, start <= prevStartIndex\n    const start = findIndex(cache, scrollOffset, undefined, prevStartIndex);\n    return [start, findIndex(cache, scrollOffset + viewportSize, start)];\n  }\n};\n\n/**\n * @internal\n */\nexport const estimateDefaultItemSize = (\n  cache: Writeable<Cache>,\n  startIndex: number\n): number => {\n  let measuredCountBeforeStart = 0;\n  // This function will be called after measurement so measured size array must be longer than 0\n  const measuredSizes: number[] = [];\n  cache._sizes.forEach((s, i) => {\n    if (s !== UNCACHED) {\n      measuredSizes.push(s);\n      if (i < startIndex) {\n        measuredCountBeforeStart++;\n      }\n    }\n  });\n\n  // Discard cache for now\n  cache._computedOffsetIndex = -1;\n\n  // Calculate median\n  const sorted = sort(measuredSizes);\n  const len = sorted.length;\n  const mid = (len / 2) | 0;\n  const median =\n    len % 2 === 0 ? (sorted[mid - 1]! + sorted[mid]!) / 2 : sorted[mid]!;\n\n  const prevDefaultItemSize = cache._defaultItemSize;\n\n  // Calculate diff of unmeasured items before start\n  return (\n    ((cache._defaultItemSize = median) - prevDefaultItemSize) *\n    max(startIndex - measuredCountBeforeStart, 0)\n  );\n};\n\n/**\n * @internal\n */\nexport const initCache = (\n  length: number,\n  itemSize: number,\n  snapshot?: InternalCacheSnapshot\n): Cache => {\n  return {\n    _defaultItemSize: snapshot ? snapshot[1] : itemSize,\n    _sizes:\n      snapshot && snapshot[0]\n        ? // https://github.com/inokawa/virtua/issues/441\n          fill(\n            snapshot[0].slice(0, min(length, snapshot[0].length)),\n            max(0, length - snapshot[0].length)\n          )\n        : fill([], length),\n    _length: length,\n    _computedOffsetIndex: -1,\n    _offsets: fill([], length),\n  };\n};\n\n/**\n * @internal\n */\nexport const takeCacheSnapshot = (cache: Cache): InternalCacheSnapshot => {\n  return [cache._sizes.slice(), cache._defaultItemSize];\n};\n\n/**\n * @internal\n */\nexport const updateCacheLength = (\n  cache: Writeable<Cache>,\n  length: number,\n  isShift?: boolean\n): number => {\n  const diff = length - cache._length;\n\n  cache._computedOffsetIndex = isShift\n    ? // Discard cache for now\n      -1\n    : min(length - 1, cache._computedOffsetIndex);\n  cache._length = length;\n\n  if (diff > 0) {\n    // Added\n    fill(cache._offsets, diff);\n    fill(cache._sizes, diff, isShift);\n    return cache._defaultItemSize * diff;\n  } else {\n    // Removed\n    cache._offsets.splice(diff);\n    return (\n      isShift ? cache._sizes.splice(0, -diff) : cache._sizes.splice(diff)\n    ).reduce(\n      (acc, removed) =>\n        acc - (removed === UNCACHED ? cache._defaultItemSize : removed),\n      0\n    );\n  }\n};\n","import { once } from \"./utils\";\n\n/**\n * @internal\n */\nexport const isBrowser = typeof window !== \"undefined\";\n\nconst getDocumentElement = () => document.documentElement;\n\n/**\n * @internal\n */\nexport const getCurrentDocument = (node: HTMLElement): Document =>\n  node.ownerDocument;\n\n/**\n * @internal\n */\nexport const getCurrentWindow = (doc: Document) => doc.defaultView!;\n\n/**\n * @internal\n */\nexport const isRTLDocument = /*#__PURE__*/ once((): boolean => {\n  // TODO support SSR in rtl\n  return isBrowser\n    ? getComputedStyle(getDocumentElement()).direction === \"rtl\"\n    : false;\n});\n\n/**\n * Currently, all browsers on iOS/iPadOS are WebKit, including WebView.\n * @internal\n */\nexport const isIOSWebKit = /*#__PURE__*/ once((): boolean => {\n  return /iP(hone|od|ad)/.test(navigator.userAgent);\n});\n\n/**\n * @internal\n */\nexport const isSmoothScrollSupported = /*#__PURE__*/ once((): boolean => {\n  return \"scrollBehavior\" in getDocumentElement().style;\n});\n","import {\n  initCache,\n  getItemSize as _getItemSize,\n  computeTotalSize,\n  computeOffset as computeStartOffset,\n  UNCACHED,\n  setItemSize,\n  estimateDefaultItemSize,\n  updateCacheLength,\n  computeRange,\n  takeCacheSnapshot,\n  findIndex,\n} from \"./cache\";\nimport { isIOSWebKit } from \"./environment\";\nimport type {\n  CacheSnapshot,\n  InternalCacheSnapshot,\n  ItemResize,\n  ItemsRange,\n} from \"./types\";\nimport { abs, max, min, NULL } from \"./utils\";\n\nconst MAX_INT_32 = 0x7fffffff;\n\nconst SCROLL_IDLE = 0;\nconst SCROLL_DOWN = 1;\nconst SCROLL_UP = 2;\ntype ScrollDirection =\n  | typeof SCROLL_IDLE\n  | typeof SCROLL_DOWN\n  | typeof SCROLL_UP;\n\nconst SCROLL_BY_NATIVE = 0;\nconst SCROLL_BY_MANUAL_SCROLL = 1;\nconst SCROLL_BY_SHIFT = 2;\ntype ScrollMode =\n  | typeof SCROLL_BY_NATIVE\n  | typeof SCROLL_BY_MANUAL_SCROLL\n  | typeof SCROLL_BY_SHIFT;\n\n/** @internal */\nexport const ACTION_SCROLL = 1;\n/** @internal */\nexport const ACTION_SCROLL_END = 2;\n/** @internal */\nexport const ACTION_ITEM_RESIZE = 3;\n/** @internal */\nexport const ACTION_VIEWPORT_RESIZE = 4;\n/** @internal */\nexport const ACTION_ITEMS_LENGTH_CHANGE = 5;\n/** @internal */\nexport const ACTION_START_OFFSET_CHANGE = 6;\n/** @internal */\nexport const ACTION_MANUAL_SCROLL = 7;\n/** @internal */\nexport const ACTION_BEFORE_MANUAL_SMOOTH_SCROLL = 8;\n\ntype Actions =\n  | [type: typeof ACTION_SCROLL, offset: number]\n  | [type: typeof ACTION_SCROLL_END, dummy?: void]\n  | [type: typeof ACTION_ITEM_RESIZE, entries: ItemResize[]]\n  | [type: typeof ACTION_VIEWPORT_RESIZE, size: number]\n  | [\n      type: typeof ACTION_ITEMS_LENGTH_CHANGE,\n      arg: [length: number, isShift?: boolean | undefined],\n    ]\n  | [type: typeof ACTION_START_OFFSET_CHANGE, offset: number]\n  | [type: typeof ACTION_MANUAL_SCROLL, dummy?: void]\n  | [type: typeof ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, offset: number];\n\n/** @internal */\nexport const UPDATE_VIRTUAL_STATE = 0b0001;\n/** @internal */\nexport const UPDATE_SIZE_EVENT = 0b0010;\n/** @internal */\nexport const UPDATE_SCROLL_EVENT = 0b0100;\n/** @internal */\nexport const UPDATE_SCROLL_END_EVENT = 0b1000;\n\n/**\n * @internal\n */\nexport const getScrollSize = (store: VirtualStore): number => {\n  return max(store.$getTotalSize(), store.$getViewportSize());\n};\n\n/**\n * @internal\n */\nexport const isInitialMeasurementDone = (store: VirtualStore): boolean => {\n  return !!store.$getViewportSize();\n};\n\ntype Subscriber = (sync?: boolean) => void;\n\n/** @internal */\nexport type StateVersion =\n  number & {} /* hack for typescript to pretend as not falsy */;\n\n/**\n * @internal\n */\nexport type VirtualStore = {\n  $getStateVersion(): StateVersion;\n  $getCacheSnapshot(): CacheSnapshot;\n  $getRange(): ItemsRange;\n  $findStartIndex(): number;\n  $findEndIndex(): number;\n  $isUnmeasuredItem(index: number): boolean;\n  $getItemOffset(index: number): number;\n  $getItemSize(index: number): number;\n  $getItemsLength(): number;\n  $getScrollOffset(): number;\n  $isScrolling(): boolean;\n  $getViewportSize(): number;\n  $getStartSpacerSize(): number;\n  $getTotalSize(): number;\n  _flushJump(): [number, boolean];\n  $subscribe(target: number, cb: Subscriber): () => void;\n  $update(...action: Actions): void;\n  _hasUnmeasuredItemsInFrozenRange(): boolean;\n};\n\n/**\n * @internal\n */\nexport const createVirtualStore = (\n  elementsCount: number,\n  itemSize: number = 40,\n  overscan: number = 4,\n  ssrCount: number = 0,\n  cacheSnapshot?: CacheSnapshot | undefined,\n  shouldAutoEstimateItemSize: boolean = false\n): VirtualStore => {\n  let isSSR = !!ssrCount;\n  let stateVersion: StateVersion = 1;\n  let viewportSize = 0;\n  let startSpacerSize = 0;\n  let scrollOffset = 0;\n  let jump = 0;\n  let pendingJump = 0;\n  let _flushedJump = 0;\n  let _scrollDirection: ScrollDirection = SCROLL_IDLE;\n  let _scrollMode: ScrollMode = SCROLL_BY_NATIVE;\n  let _frozenRange: ItemsRange | null = isSSR\n    ? [0, max(ssrCount - 1, 0)]\n    : NULL;\n  let _prevRange: ItemsRange = [0, 0];\n  let _totalMeasuredSize = 0;\n\n  const cache = initCache(\n    elementsCount,\n    itemSize,\n    cacheSnapshot as unknown as InternalCacheSnapshot | undefined\n  );\n  const subscribers = new Set<[number, Subscriber]>();\n  const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;\n  const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;\n  const getRange = (offset: number) => {\n    return computeRange(cache, offset, viewportSize, _prevRange[0]);\n  };\n  const getTotalSize = (): number => computeTotalSize(cache);\n  const getItemOffset = (index: number): number => {\n    return computeStartOffset(cache, index) - pendingJump;\n  };\n  const getItemSize = (index: number): number => {\n    return _getItemSize(cache, index);\n  };\n\n  const applyJump = (j: number) => {\n    if (j) {\n      // In iOS WebKit browsers, updating scroll position will stop scrolling so it have to be deferred during scrolling.\n      if (isIOSWebKit() && _scrollDirection !== SCROLL_IDLE) {\n        pendingJump += j;\n      } else {\n        jump += j;\n      }\n    }\n  };\n\n  return {\n    $getStateVersion: () => stateVersion,\n    $getCacheSnapshot: () => {\n      return takeCacheSnapshot(cache) as unknown as CacheSnapshot;\n    },\n    $getRange: () => {\n      let startIndex: number;\n      let endIndex: number;\n      if (_flushedJump) {\n        // Return previous range for consistent render until next scroll event comes in.\n        // And it must be clamped. https://github.com/inokawa/virtua/issues/597\n        [startIndex, endIndex] = _prevRange;\n      } else {\n        [startIndex, endIndex] = _prevRange = getRange(\n          max(0, getVisibleOffset())\n        );\n        if (_frozenRange) {\n          startIndex = min(startIndex, _frozenRange[0]);\n          endIndex = max(endIndex, _frozenRange[1]);\n        }\n      }\n\n      if (_scrollDirection !== SCROLL_DOWN) {\n        startIndex -= max(0, overscan);\n      }\n      if (_scrollDirection !== SCROLL_UP) {\n        endIndex += max(0, overscan);\n      }\n      return [max(startIndex, 0), min(endIndex, cache._length - 1)];\n    },\n    $findStartIndex: () => findIndex(cache, getVisibleOffset()),\n    $findEndIndex: () => findIndex(cache, getVisibleOffset() + viewportSize),\n    $isUnmeasuredItem: (index) => cache._sizes[index] === UNCACHED,\n    _hasUnmeasuredItemsInFrozenRange: () => {\n      if (!_frozenRange) return false;\n      return cache._sizes\n        .slice(\n          max(0, _frozenRange[0] - 1),\n          min(cache._length - 1, _frozenRange[1] + 1) + 1\n        )\n        .includes(UNCACHED);\n    },\n    $getItemOffset: getItemOffset,\n    $getItemSize: getItemSize,\n    $getItemsLength: () => cache._length,\n    $getScrollOffset: () => scrollOffset,\n    $isScrolling: () => _scrollDirection !== SCROLL_IDLE,\n    $getViewportSize: () => viewportSize,\n    $getStartSpacerSize: () => startSpacerSize,\n    $getTotalSize: getTotalSize,\n    _flushJump: () => {\n      _flushedJump = jump;\n      jump = 0;\n      return [\n        _flushedJump,\n        // Use absolute position not to exceed scrollable bounds\n        _scrollMode === SCROLL_BY_SHIFT ||\n          // https://github.com/inokawa/virtua/discussions/475\n          getRelativeScrollOffset() + viewportSize >= getTotalSize(),\n      ];\n    },\n    $subscribe: (target, cb) => {\n      const sub: [number, Subscriber] = [target, cb];\n      subscribers.add(sub);\n      return () => {\n        subscribers.delete(sub);\n      };\n    },\n    $update: (type, payload): void => {\n      let shouldFlushPendingJump: boolean | undefined;\n      let shouldSync: boolean | undefined;\n      let mutated = 0;\n\n      switch (type) {\n        case ACTION_SCROLL: {\n          const flushedJump = _flushedJump;\n          _flushedJump = 0;\n\n          const delta = payload - scrollOffset;\n          const distance = abs(delta);\n\n          // Scroll event after jump compensation is not reliable because it may result in the opposite direction.\n          // The delta of artificial scroll may not be equal with the jump because it may be batched with other scrolls.\n          // And at least in latest Chrome/Firefox/Safari in 2023, setting value to scrollTop/scrollLeft can lose subpixel because its integer (sometimes float probably depending on dpr).\n          const isJustJumped = flushedJump && distance < abs(flushedJump) + 1;\n\n          // Scroll events are dispatched enough so it's ok to skip some of them.\n          if (\n            !isJustJumped &&\n            // Ignore until manual scrolling\n            _scrollMode === SCROLL_BY_NATIVE\n          ) {\n            _scrollDirection = delta < 0 ? SCROLL_UP : SCROLL_DOWN;\n          }\n\n          // TODO This will cause glitch in reverse infinite scrolling. Disable this until better solution is found.\n          // if (\n          //   pendingJump &&\n          //   ((_scrollDirection === SCROLL_UP &&\n          //     payload - max(pendingJump, 0) <= 0) ||\n          //     (_scrollDirection === SCROLL_DOWN &&\n          //       payload - min(pendingJump, 0) >= getScrollOffsetMax()))\n          // ) {\n          //   // Flush if almost reached to start or end\n          //   shouldFlushPendingJump = true;\n          // }\n\n          if (isSSR) {\n            _frozenRange = NULL;\n            isSSR = false;\n          }\n\n          scrollOffset = payload;\n          mutated = UPDATE_SCROLL_EVENT;\n\n          // Skip if offset is not changed\n          // Scroll offset may exceed min or max especially in Safari's elastic scrolling.\n          const relativeOffset = getRelativeScrollOffset();\n          if (\n            relativeOffset >= -viewportSize &&\n            relativeOffset <= getTotalSize()\n          ) {\n            mutated += UPDATE_VIRTUAL_STATE;\n\n            // Update synchronously if scrolled a lot\n            shouldSync = distance > viewportSize;\n          }\n          break;\n        }\n        case ACTION_SCROLL_END: {\n          mutated = UPDATE_SCROLL_END_EVENT;\n          if (_scrollDirection !== SCROLL_IDLE) {\n            shouldFlushPendingJump = true;\n            mutated += UPDATE_VIRTUAL_STATE;\n          }\n          _scrollDirection = SCROLL_IDLE;\n          _scrollMode = SCROLL_BY_NATIVE;\n          _frozenRange = NULL;\n          break;\n        }\n        case ACTION_ITEM_RESIZE: {\n          const updated = payload.filter(\n            ([index, size]) => cache._sizes[index] !== size\n          );\n\n          // Skip if all items are cached and not updated\n          if (!updated.length) {\n            break;\n          }\n\n          // Calculate jump by resize to minimize junks in appearance\n          applyJump(\n            updated.reduce((acc, [index, size]) => {\n              if (\n                // Keep distance from end during shifting\n                _scrollMode === SCROLL_BY_SHIFT ||\n                (_frozenRange\n                  ? // https://github.com/inokawa/virtua/issues/380\n                    // https://github.com/inokawa/virtua/issues/590\n                    !isSSR && index < _frozenRange[0]\n                  : // Otherwise we should maintain visible position\n                    getItemOffset(index) +\n                      // https://github.com/inokawa/virtua/issues/385\n                      (_scrollDirection === SCROLL_IDLE &&\n                      _scrollMode === SCROLL_BY_NATIVE\n                        ? getItemSize(index)\n                        : 0) <\n                    getRelativeScrollOffset())\n              ) {\n                acc += size - getItemSize(index);\n              }\n              return acc;\n            }, 0)\n          );\n\n          // Update item sizes\n          for (const [index, size] of updated) {\n            const prevSize = getItemSize(index);\n            const isInitialMeasurement = setItemSize(cache, index, size);\n\n            if (shouldAutoEstimateItemSize) {\n              _totalMeasuredSize += isInitialMeasurement\n                ? size\n                : size - prevSize;\n            }\n          }\n\n          // Estimate initial item size from measured sizes\n          if (\n            shouldAutoEstimateItemSize &&\n            viewportSize &&\n            // If the total size is lower than the viewport, the item may be a empty state\n            _totalMeasuredSize > viewportSize\n          ) {\n            applyJump(\n              estimateDefaultItemSize(\n                cache,\n                findIndex(cache, getVisibleOffset())\n              )\n            );\n            shouldAutoEstimateItemSize = false;\n          }\n\n          mutated = UPDATE_VIRTUAL_STATE + UPDATE_SIZE_EVENT;\n\n          // Synchronous update is necessary in current design to minimize visible glitch in concurrent rendering.\n          // However this seems to be the main cause of the errors from ResizeObserver.\n          // https://github.com/inokawa/virtua/issues/470\n          //\n          // And in React, synchronous update with flushSync after asynchronous update will overtake the asynchronous one.\n          // If items resize happens just after scroll, race condition can occur depending on implementation.\n          shouldSync = true;\n          break;\n        }\n        case ACTION_VIEWPORT_RESIZE: {\n          if (viewportSize !== payload) {\n            viewportSize = payload;\n            mutated = UPDATE_VIRTUAL_STATE + UPDATE_SIZE_EVENT;\n          }\n          break;\n        }\n        case ACTION_ITEMS_LENGTH_CHANGE: {\n          if (payload[1]) {\n            applyJump(updateCacheLength(cache, payload[0], true));\n            _scrollMode = SCROLL_BY_SHIFT;\n            mutated = UPDATE_VIRTUAL_STATE;\n          } else {\n            updateCacheLength(cache, payload[0]);\n            // https://github.com/inokawa/virtua/issues/552\n            // https://github.com/inokawa/virtua/issues/557\n            mutated = UPDATE_VIRTUAL_STATE;\n          }\n          break;\n        }\n        case ACTION_START_OFFSET_CHANGE: {\n          startSpacerSize = payload;\n          break;\n        }\n        case ACTION_MANUAL_SCROLL: {\n          _scrollMode = SCROLL_BY_MANUAL_SCROLL;\n          break;\n        }\n        case ACTION_BEFORE_MANUAL_SMOOTH_SCROLL: {\n          _frozenRange = getRange(payload);\n          mutated = UPDATE_VIRTUAL_STATE;\n          break;\n        }\n      }\n\n      if (mutated) {\n        stateVersion = (stateVersion & MAX_INT_32) + 1;\n\n        if (shouldFlushPendingJump && pendingJump) {\n          jump += pendingJump;\n          pendingJump = 0;\n        }\n\n        subscribers.forEach(([target, cb]) => {\n          // Early return to skip React's computation\n          if (!(mutated & target)) {\n            return;\n          }\n          // https://github.com/facebook/react/issues/25191\n          // https://github.com/facebook/react/blob/a5fc797db14c6e05d4d5c4dbb22a0dd70d41f5d5/packages/react-reconciler/src/ReactFiberWorkLoop.js#L1443-L1447\n          cb(shouldSync);\n        });\n      }\n    },\n  };\n};\n","import {\n  getCurrentDocument,\n  getCurrentWindow,\n  isIOSWebKit,\n  isRTLDocument,\n  isSmoothScrollSupported,\n} from \"./environment\";\nimport {\n  ACTION_SCROLL,\n  type VirtualStore,\n  ACTION_SCROLL_END,\n  UPDATE_SIZE_EVENT,\n  ACTION_MANUAL_SCROLL,\n  ACTION_BEFORE_MANUAL_SMOOTH_SCROLL,\n  ACTION_START_OFFSET_CHANGE,\n  isInitialMeasurementDone,\n} from \"./store\";\nimport { type ScrollToIndexOpts } from \"./types\";\nimport { clamp, microtask, NULL } from \"./utils\";\n\nconst timeout = setTimeout;\n\nconst debounce = <T extends () => void>(fn: T, ms: number) => {\n  let id: ReturnType<typeof setTimeout> | undefined | null;\n\n  const cancel = () => {\n    if (id != NULL) {\n      clearTimeout(id);\n    }\n  };\n  const debouncedFn = () => {\n    cancel();\n    id = timeout(() => {\n      id = NULL;\n      fn();\n    }, ms);\n  };\n  debouncedFn._cancel = cancel;\n  return debouncedFn;\n};\n\n/**\n * scrollLeft is negative value in rtl direction.\n *\n * left  right\n * 0     100    spec compliant (ltr)\n * -100  0      spec compliant (rtl)\n * https://github.com/othree/jquery.rtl-scroll-type\n */\nconst normalizeOffset = (offset: number, isHorizontal: boolean): number => {\n  if (isHorizontal && isRTLDocument()) {\n    return -offset;\n  } else {\n    return offset;\n  }\n};\n\nconst createScrollObserver = (\n  store: VirtualStore,\n  viewport: HTMLElement | Window,\n  isHorizontal: boolean,\n  getScrollOffset: () => number,\n  updateScrollOffset: (\n    value: number,\n    shift: boolean,\n    isMomentumScrolling: boolean\n  ) => void,\n  getStartOffset?: () => number\n) => {\n  const now = Date.now;\n\n  let lastScrollTime = 0;\n  let wheeling = false;\n  let touching = false;\n  let justTouchEnded = false;\n  let stillMomentumScrolling = false;\n\n  const onScrollEnd = debounce(() => {\n    if (wheeling || touching) {\n      wheeling = false;\n\n      // Wait while wheeling or touching\n      onScrollEnd();\n      return;\n    }\n\n    justTouchEnded = false;\n\n    store.$update(ACTION_SCROLL_END);\n  }, 150);\n\n  const onScroll = () => {\n    lastScrollTime = now();\n\n    if (justTouchEnded) {\n      stillMomentumScrolling = true;\n    }\n\n    if (getStartOffset) {\n      store.$update(ACTION_START_OFFSET_CHANGE, getStartOffset());\n    }\n    store.$update(ACTION_SCROLL, getScrollOffset());\n\n    onScrollEnd();\n  };\n\n  // Infer scroll state also from wheel events\n  // Sometimes scroll events do not fire when frame dropped even if the visual have been already scrolled\n  const onWheel = ((e: WheelEvent) => {\n    if (\n      wheeling ||\n      // Scroll start should be detected with scroll event\n      !store.$isScrolling() ||\n      // Probably a pinch-to-zoom gesture\n      e.ctrlKey\n    ) {\n      return;\n    }\n\n    const timeDelta = now() - lastScrollTime;\n    if (\n      // Check if wheel event occurs some time after scrolling\n      150 > timeDelta &&\n      50 < timeDelta &&\n      // Get delta before checking deltaMode for firefox behavior\n      // https://github.com/w3c/uievents/issues/181#issuecomment-392648065\n      // https://bugzilla.mozilla.org/show_bug.cgi?id=1392460#c34\n      (isHorizontal ? e.deltaX : e.deltaY)\n    ) {\n      wheeling = true;\n    }\n  }) as (e: Event) => void; // FIXME type error. why only here?\n\n  const onTouchStart = () => {\n    touching = true;\n    justTouchEnded = stillMomentumScrolling = false;\n  };\n  const onTouchEnd = () => {\n    touching = false;\n    if (isIOSWebKit()) {\n      justTouchEnded = true;\n    }\n  };\n\n  viewport.addEventListener(\"scroll\", onScroll);\n  viewport.addEventListener(\"wheel\", onWheel, { passive: true });\n  viewport.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n  viewport.addEventListener(\"touchend\", onTouchEnd, { passive: true });\n\n  return {\n    _dispose: () => {\n      viewport.removeEventListener(\"scroll\", onScroll);\n      viewport.removeEventListener(\"wheel\", onWheel);\n      viewport.removeEventListener(\"touchstart\", onTouchStart);\n      viewport.removeEventListener(\"touchend\", onTouchEnd);\n      onScrollEnd._cancel();\n    },\n    _fixScrollJump: () => {\n      const [jump, shift] = store._flushJump();\n      if (!jump) return;\n      updateScrollOffset(\n        normalizeOffset(jump, isHorizontal),\n        shift,\n        stillMomentumScrolling\n      );\n      stillMomentumScrolling = false;\n\n      if (shift && store.$getViewportSize() > store.$getTotalSize()) {\n        // In this case applying jump may not cause scroll.\n        // Current logic expects scroll event occurs after applying jump so we dispatch it manually.\n        store.$update(ACTION_SCROLL, getScrollOffset());\n      }\n    },\n  };\n};\n\ntype ScrollObserver = ReturnType<typeof createScrollObserver>;\n\n/**\n * @internal\n */\nexport type Scroller = {\n  $observe: (viewportElement: HTMLElement) => void;\n  $dispose(): void;\n  $scrollTo: (offset: number) => void;\n  $scrollBy: (offset: number) => void;\n  $scrollToIndex: (index: number, opts?: ScrollToIndexOpts) => void;\n  $fixScrollJump: () => void;\n};\n\n/**\n * @internal\n */\nexport const createScroller = (\n  store: VirtualStore,\n  isHorizontal: boolean\n): Scroller => {\n  let viewportElement: HTMLElement | undefined;\n  let scrollObserver: ScrollObserver | undefined;\n  let cancelScroll: (() => void) | undefined;\n  const scrollOffsetKey = isHorizontal ? \"scrollLeft\" : \"scrollTop\";\n  const overflowKey = isHorizontal ? \"overflowX\" : \"overflowY\";\n\n  // The given offset will be clamped by browser\n  // https://drafts.csswg.org/cssom-view/#dom-element-scrolltop\n  const scheduleImperativeScroll = async (\n    getTargetOffset: () => number,\n    smooth?: boolean\n  ) => {\n    if (!viewportElement) {\n      // Wait for element assign. The element may be undefined if scrollRef prop is used and scroll is scheduled on mount.\n      microtask(() => scheduleImperativeScroll(getTargetOffset, smooth));\n      return;\n    }\n\n    if (cancelScroll) {\n      // Cancel waiting scrollTo\n      cancelScroll();\n    }\n\n    const waitForMeasurement = (): [Promise<void>, () => void] => {\n      // Wait for the scroll destination items to be measured.\n      // The measurement will be done asynchronously and the timing is not predictable so we use promise.\n      let queue: (() => void) | undefined;\n      return [\n        new Promise<void>((resolve, reject) => {\n          queue = resolve;\n          cancelScroll = reject;\n\n          // Resize event may not happen when the window/tab is not visible, or during browser back in Safari.\n          // We have to wait for the initial measurement to avoid failing imperative scroll on mount.\n          // https://github.com/inokawa/virtua/issues/450\n          if (isInitialMeasurementDone(store)) {\n            // Reject when items around scroll destination completely measured\n            timeout(reject, 150);\n          }\n        }),\n        store.$subscribe(UPDATE_SIZE_EVENT, () => {\n          queue && queue();\n        }),\n      ];\n    };\n\n    if (smooth && isSmoothScrollSupported()) {\n      while (true) {\n        store.$update(ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, getTargetOffset());\n\n        if (!store._hasUnmeasuredItemsInFrozenRange()) {\n          break;\n        }\n\n        const [promise, unsubscribe] = waitForMeasurement();\n\n        try {\n          await promise;\n        } catch (e) {\n          // canceled\n          return;\n        } finally {\n          unsubscribe();\n        }\n      }\n\n      viewportElement.scrollTo({\n        [isHorizontal ? \"left\" : \"top\"]: normalizeOffset(\n          getTargetOffset(),\n          isHorizontal\n        ),\n        behavior: \"smooth\",\n      });\n    } else {\n      while (true) {\n        const [promise, unsubscribe] = waitForMeasurement();\n\n        try {\n          viewportElement[scrollOffsetKey] = normalizeOffset(\n            getTargetOffset(),\n            isHorizontal\n          );\n          store.$update(ACTION_MANUAL_SCROLL);\n\n          await promise;\n        } catch (e) {\n          // canceled or finished\n          return;\n        } finally {\n          unsubscribe();\n        }\n      }\n    }\n  };\n\n  return {\n    $observe(viewport) {\n      viewportElement = viewport;\n\n      scrollObserver = createScrollObserver(\n        store,\n        viewport,\n        isHorizontal,\n        () => normalizeOffset(viewport[scrollOffsetKey], isHorizontal),\n        (jump, shift, isMomentumScrolling) => {\n          // If we update scroll position while touching on iOS, the position will be reverted.\n          // However iOS WebKit fires touch events only once at the beginning of momentum scrolling.\n          // That means we have no reliable way to confirm still touched or not if user touches more than once during momentum scrolling...\n          // This is a hack for the suspectable situations, inspired by https://github.com/prud/ios-overflow-scroll-to-top\n          if (isMomentumScrolling) {\n            const style = viewport.style;\n            const prev = style[overflowKey];\n            style[overflowKey] = \"hidden\";\n            timeout(() => {\n              style[overflowKey] = prev;\n            });\n          }\n\n          if (shift) {\n            viewport[scrollOffsetKey] = store.$getScrollOffset() + jump;\n            // https://github.com/inokawa/virtua/issues/357\n            cancelScroll && cancelScroll();\n          } else {\n            viewport[scrollOffsetKey] += jump;\n          }\n        }\n      );\n    },\n    $dispose() {\n      scrollObserver && scrollObserver._dispose();\n    },\n    $scrollTo(offset) {\n      scheduleImperativeScroll(() => offset);\n    },\n    $scrollBy(offset) {\n      offset += store.$getScrollOffset();\n      scheduleImperativeScroll(() => offset);\n    },\n    $scrollToIndex(index, { align, smooth, offset = 0 } = {}) {\n      index = clamp(index, 0, store.$getItemsLength() - 1);\n\n      if (align === \"nearest\") {\n        const itemOffset = store.$getItemOffset(index);\n        const scrollOffset = store.$getScrollOffset();\n\n        if (itemOffset < scrollOffset) {\n          align = \"start\";\n        } else if (\n          itemOffset + store.$getItemSize(index) >\n          scrollOffset + store.$getViewportSize()\n        ) {\n          align = \"end\";\n        } else {\n          // already completely visible\n          return;\n        }\n      }\n\n      scheduleImperativeScroll(() => {\n        return (\n          offset +\n          store.$getStartSpacerSize() +\n          store.$getItemOffset(index) +\n          (align === \"end\"\n            ? store.$getItemSize(index) - store.$getViewportSize()\n            : align === \"center\"\n              ? (store.$getItemSize(index) - store.$getViewportSize()) / 2\n              : 0)\n        );\n      }, smooth);\n    },\n    $fixScrollJump: () => {\n      scrollObserver && scrollObserver._fixScrollJump();\n    },\n  };\n};\n\n/**\n * @internal\n */\nexport type WindowScroller = {\n  $observe(containerElement: HTMLElement): void;\n  $dispose(): void;\n  $scrollToIndex: (index: number, opts?: ScrollToIndexOpts) => void;\n  $fixScrollJump: () => void;\n};\n\n/**\n * @internal\n */\nexport const createWindowScroller = (\n  store: VirtualStore,\n  isHorizontal: boolean\n): WindowScroller => {\n  let containerElement: HTMLElement | undefined;\n  let scrollObserver: ScrollObserver | undefined;\n  let cancelScroll: (() => void) | undefined;\n\n  const calcOffsetToViewport = (\n    node: HTMLElement,\n    viewport: HTMLElement,\n    window: Window,\n    isHorizontal: boolean,\n    offset: number = 0\n  ): number => {\n    // TODO calc offset only when it changes (maybe impossible)\n    const offsetKey = isHorizontal ? \"offsetLeft\" : \"offsetTop\";\n    const offsetSum =\n      offset +\n      (isHorizontal && isRTLDocument()\n        ? window.innerWidth - node[offsetKey] - node.offsetWidth\n        : node[offsetKey]);\n\n    const parent = node.offsetParent;\n    if (node === viewport || !parent) {\n      return offsetSum;\n    }\n\n    return calcOffsetToViewport(\n      parent as HTMLElement,\n      viewport,\n      window,\n      isHorizontal,\n      offsetSum\n    );\n  };\n\n  const scheduleImperativeScroll = async (\n    getTargetOffset: () => number,\n    smooth?: boolean\n  ) => {\n    if (!containerElement) {\n      // Wait for element assign\n      microtask(() => scheduleImperativeScroll(getTargetOffset, smooth));\n      return;\n    }\n\n    if (cancelScroll) {\n      cancelScroll();\n    }\n\n    const waitForMeasurement = (): [Promise<void>, () => void] => {\n      let queue: (() => void) | undefined;\n      return [\n        new Promise<void>((resolve, reject) => {\n          queue = resolve;\n          cancelScroll = reject;\n\n          if (isInitialMeasurementDone(store)) {\n            timeout(reject, 150);\n          }\n        }),\n        store.$subscribe(UPDATE_SIZE_EVENT, () => {\n          queue && queue();\n        }),\n      ];\n    };\n\n    const window = getCurrentWindow(getCurrentDocument(containerElement));\n\n    if (smooth && isSmoothScrollSupported()) {\n      while (true) {\n        store.$update(ACTION_BEFORE_MANUAL_SMOOTH_SCROLL, getTargetOffset());\n\n        if (!store._hasUnmeasuredItemsInFrozenRange()) {\n          break;\n        }\n\n        const [promise, unsubscribe] = waitForMeasurement();\n\n        try {\n          await promise;\n        } catch (e) {\n          return;\n        } finally {\n          unsubscribe();\n        }\n      }\n\n      window.scroll({\n        [isHorizontal ? \"left\" : \"top\"]: normalizeOffset(\n          getTargetOffset(),\n          isHorizontal\n        ),\n        behavior: \"smooth\",\n      });\n    } else {\n      while (true) {\n        const [promise, unsubscribe] = waitForMeasurement();\n\n        try {\n          window.scroll({\n            [isHorizontal ? \"left\" : \"top\"]: normalizeOffset(\n              getTargetOffset(),\n              isHorizontal\n            ),\n          });\n          store.$update(ACTION_MANUAL_SCROLL);\n\n          await promise;\n        } catch (e) {\n          return;\n        } finally {\n          unsubscribe();\n        }\n      }\n    }\n  };\n\n  return {\n    $observe(container) {\n      containerElement = container;\n      const scrollOffsetKey = isHorizontal ? \"scrollX\" : \"scrollY\";\n\n      const document = getCurrentDocument(container);\n      const window = getCurrentWindow(document);\n      const documentBody = document.body;\n\n      scrollObserver = createScrollObserver(\n        store,\n        window,\n        isHorizontal,\n        () => normalizeOffset(window[scrollOffsetKey], isHorizontal),\n        (jump, shift) => {\n          // TODO support case two window scrollers exist in the same view\n          if (shift) {\n            window.scroll({\n              [isHorizontal ? \"left\" : \"top\"]: store.$getScrollOffset() + jump,\n            });\n          } else {\n            window.scrollBy(isHorizontal ? jump : 0, isHorizontal ? 0 : jump);\n          }\n        },\n        () =>\n          calcOffsetToViewport(container, documentBody, window, isHorizontal)\n      );\n    },\n    $dispose() {\n      scrollObserver && scrollObserver._dispose();\n      containerElement = undefined;\n    },\n    $fixScrollJump: () => {\n      scrollObserver && scrollObserver._fixScrollJump();\n    },\n    $scrollToIndex(index, { align, smooth, offset = 0 } = {}) {\n      if (!containerElement) return;\n\n      index = clamp(index, 0, store.$getItemsLength() - 1);\n\n      if (align === \"nearest\") {\n        const itemOffset = store.$getItemOffset(index);\n        const scrollOffset = store.$getScrollOffset();\n\n        if (itemOffset < scrollOffset) {\n          align = \"start\";\n        } else if (\n          itemOffset + store.$getItemSize(index) >\n          scrollOffset + store.$getViewportSize()\n        ) {\n          align = \"end\";\n        } else {\n          return;\n        }\n      }\n\n      const document = getCurrentDocument(containerElement);\n      const window = getCurrentWindow(document);\n      const html = document.documentElement;\n      const getScrollbarSize = () =>\n        store.$getViewportSize() -\n        (isHorizontal ? html.clientWidth : html.clientHeight);\n\n      scheduleImperativeScroll(() => {\n        return (\n          offset +\n          // Calculate target scroll position including container's offset from document\n          calcOffsetToViewport(\n            containerElement!,\n            document.body,\n            window,\n            isHorizontal\n          ) +\n          // store._getStartSpacerSize() +\n          store.$getItemOffset(index) +\n          (align === \"end\"\n            ? store.$getItemSize(index) -\n              (store.$getViewportSize() - getScrollbarSize())\n            : align === \"center\"\n              ? (store.$getItemSize(index) -\n                  (store.$getViewportSize() - getScrollbarSize())) /\n                2\n              : 0)\n        );\n      }, smooth);\n    },\n  };\n};\n\n/**\n * @internal\n */\nexport type GridScroller = {\n  $observe: (viewportElement: HTMLElement) => void;\n  $dispose(): void;\n  $scrollTo: (offsetX: number, offsetY: number) => void;\n  $scrollBy: (offsetX: number, offsetY: number) => void;\n  $scrollToIndex: (indexX: number, indexY: number) => void;\n  $fixScrollJump: () => void;\n};\n\n/**\n * @internal\n */\nexport const createGridScroller = (\n  vStore: VirtualStore,\n  hStore: VirtualStore\n): GridScroller => {\n  const vScroller = createScroller(vStore, false);\n  const hScroller = createScroller(hStore, true);\n  return {\n    $observe(viewportElement) {\n      vScroller.$observe(viewportElement);\n      hScroller.$observe(viewportElement);\n    },\n    $dispose() {\n      vScroller.$dispose();\n      hScroller.$dispose();\n    },\n    $scrollTo(offsetX, offsetY) {\n      vScroller.$scrollTo(offsetY);\n      hScroller.$scrollTo(offsetX);\n    },\n    $scrollBy(offsetX, offsetY) {\n      vScroller.$scrollBy(offsetY);\n      hScroller.$scrollBy(offsetX);\n    },\n    $scrollToIndex(indexX, indexY) {\n      vScroller.$scrollToIndex(indexY);\n      hScroller.$scrollToIndex(indexX);\n    },\n    $fixScrollJump() {\n      vScroller.$fixScrollJump();\n      hScroller.$fixScrollJump();\n    },\n  };\n};\n","import { getCurrentDocument, getCurrentWindow } from \"./environment\";\nimport {\n  ACTION_ITEM_RESIZE,\n  ACTION_VIEWPORT_RESIZE,\n  type VirtualStore,\n} from \"./store\";\nimport { type ItemResize } from \"./types\";\nimport { max, NULL } from \"./utils\";\n\nconst createResizeObserver = (cb: ResizeObserverCallback) => {\n  let ro: ResizeObserver | undefined;\n\n  return {\n    _observe(e: HTMLElement) {\n      // Initialize ResizeObserver lazily for SSR\n      // https://www.w3.org/TR/resize-observer/#intro\n      (\n        ro ||\n        // https://bugs.chromium.org/p/chromium/issues/detail?id=1491739\n        (ro = new (getCurrentWindow(getCurrentDocument(e)).ResizeObserver)(cb))\n      ).observe(e);\n    },\n    _unobserve(e: HTMLElement) {\n      ro!.unobserve(e);\n    },\n    _dispose() {\n      ro && ro.disconnect();\n    },\n  };\n};\n\n/**\n * @internal\n */\nexport type ItemResizeObserver = (el: HTMLElement, i: number) => () => void;\n\ninterface ListResizer {\n  $observeRoot(viewportElement: HTMLElement): void;\n  $observeItem: ItemResizeObserver;\n  $dispose(): void;\n}\n\n/**\n * @internal\n */\nexport const createResizer = (\n  store: VirtualStore,\n  isHorizontal: boolean\n): ListResizer => {\n  let viewportElement: HTMLElement | undefined;\n  const sizeKey = isHorizontal ? \"width\" : \"height\";\n  const mountedIndexes = new WeakMap<Element, number>();\n\n  const resizeObserver = createResizeObserver((entries) => {\n    const resizes: ItemResize[] = [];\n    for (const { target, contentRect } of entries) {\n      // Skip zero-sized rects that may be observed under `display: none` style\n      if (!(target as HTMLElement).offsetParent) continue;\n\n      if (target === viewportElement) {\n        store.$update(ACTION_VIEWPORT_RESIZE, contentRect[sizeKey]);\n      } else {\n        const index = mountedIndexes.get(target);\n        if (index != NULL) {\n          resizes.push([index, contentRect[sizeKey]]);\n        }\n      }\n    }\n\n    if (resizes.length) {\n      store.$update(ACTION_ITEM_RESIZE, resizes);\n    }\n  });\n\n  return {\n    $observeRoot(viewport: HTMLElement) {\n      resizeObserver._observe((viewportElement = viewport));\n    },\n    $observeItem: (el: HTMLElement, i: number) => {\n      mountedIndexes.set(el, i);\n      resizeObserver._observe(el);\n      return () => {\n        mountedIndexes.delete(el);\n        resizeObserver._unobserve(el);\n      };\n    },\n    $dispose: resizeObserver._dispose,\n  };\n};\n\ninterface WindowListResizer {\n  $observeRoot(container: HTMLElement): void;\n  $observeItem: ItemResizeObserver;\n  $dispose(): void;\n}\n\n/**\n * @internal\n */\nexport const createWindowResizer = (\n  store: VirtualStore,\n  isHorizontal: boolean\n): WindowListResizer => {\n  const sizeKey = isHorizontal ? \"width\" : \"height\";\n  const windowSizeKey = isHorizontal ? \"innerWidth\" : \"innerHeight\";\n  const mountedIndexes = new WeakMap<Element, number>();\n\n  const resizeObserver = createResizeObserver((entries) => {\n    const resizes: ItemResize[] = [];\n    for (const { target, contentRect } of entries) {\n      // Skip zero-sized rects that may be observed under `display: none` style\n      if (!(target as HTMLElement).offsetParent) continue;\n\n      const index = mountedIndexes.get(target);\n      if (index != NULL) {\n        resizes.push([index, contentRect[sizeKey]]);\n      }\n    }\n\n    if (resizes.length) {\n      store.$update(ACTION_ITEM_RESIZE, resizes);\n    }\n  });\n\n  let cleanupOnWindowResize: (() => void) | undefined;\n\n  return {\n    $observeRoot(container) {\n      const window = getCurrentWindow(getCurrentDocument(container));\n      const onWindowResize = () => {\n        store.$update(ACTION_VIEWPORT_RESIZE, window[windowSizeKey]);\n      };\n      window.addEventListener(\"resize\", onWindowResize);\n      onWindowResize();\n\n      cleanupOnWindowResize = () => {\n        window.removeEventListener(\"resize\", onWindowResize);\n      };\n    },\n    $observeItem: (el: HTMLElement, i: number) => {\n      mountedIndexes.set(el, i);\n      resizeObserver._observe(el);\n      return () => {\n        mountedIndexes.delete(el);\n        resizeObserver._unobserve(el);\n      };\n    },\n    $dispose() {\n      cleanupOnWindowResize && cleanupOnWindowResize();\n      resizeObserver._dispose();\n    },\n  };\n};\n\n/**\n * @internal\n */\nexport const createGridResizer = (\n  vStore: VirtualStore,\n  hStore: VirtualStore\n) => {\n  let viewportElement: HTMLElement | undefined;\n\n  const heightKey = \"height\";\n  const widthKey = \"width\";\n  const mountedIndexes = new WeakMap<\n    Element,\n    [rowIndex: number, colIndex: number]\n  >();\n\n  type CellSize = [height: number, width: number];\n  const maybeCachedRowIndexes = new Set<number>();\n  const maybeCachedColIndexes = new Set<number>();\n  const sizeCache = new Map<string, CellSize>();\n  const getKey = (rowIndex: number, colIndex: number): string =>\n    `${rowIndex}-${colIndex}`;\n\n  const resizeObserver = createResizeObserver((entries) => {\n    const resizedRows = new Set<number>();\n    const resizedCols = new Set<number>();\n    for (const { target, contentRect } of entries) {\n      // Skip zero-sized rects that may be observed under `display: none` style\n      if (!(target as HTMLElement).offsetParent) continue;\n\n      if (target === viewportElement) {\n        vStore.$update(ACTION_VIEWPORT_RESIZE, contentRect[heightKey]);\n        hStore.$update(ACTION_VIEWPORT_RESIZE, contentRect[widthKey]);\n      } else {\n        const cell = mountedIndexes.get(target);\n        if (cell) {\n          const [rowIndex, colIndex] = cell;\n          const key = getKey(rowIndex, colIndex);\n          const prevSize = sizeCache.get(key);\n          const size: CellSize = [\n            contentRect[heightKey],\n            contentRect[widthKey],\n          ];\n          let rowResized: boolean | undefined;\n          let colResized: boolean | undefined;\n          if (!prevSize) {\n            rowResized = colResized = true;\n          } else {\n            if (prevSize[0] !== size[0]) {\n              rowResized = true;\n            }\n            if (prevSize[1] !== size[1]) {\n              colResized = true;\n            }\n          }\n          if (rowResized) {\n            resizedRows.add(rowIndex);\n          }\n          if (colResized) {\n            resizedCols.add(colIndex);\n          }\n          if (rowResized || colResized) {\n            sizeCache.set(key, size);\n          }\n        }\n      }\n    }\n\n    if (resizedRows.size) {\n      const heightResizes: ItemResize[] = [];\n      resizedRows.forEach((rowIndex) => {\n        let maxHeight = 0;\n        maybeCachedColIndexes.forEach((colIndex) => {\n          const size = sizeCache.get(getKey(rowIndex, colIndex));\n          if (size) {\n            maxHeight = max(maxHeight, size[0]);\n          }\n        });\n        if (maxHeight) {\n          heightResizes.push([rowIndex, maxHeight]);\n        }\n      });\n      vStore.$update(ACTION_ITEM_RESIZE, heightResizes);\n    }\n    if (resizedCols.size) {\n      const widthResizes: ItemResize[] = [];\n      resizedCols.forEach((colIndex) => {\n        let maxWidth = 0;\n        maybeCachedRowIndexes.forEach((rowIndex) => {\n          const size = sizeCache.get(getKey(rowIndex, colIndex));\n