react-virtuoso 2.7.0 → 2.8.0-alpha.3

package/dist/react-virtuoso.esm.js

@@ -0,0 +1,3845 @@
+import { systemToComponent } from '@virtuoso.dev/react-urx';
+import * as u from '@virtuoso.dev/urx';
+import { getValue, tup, system, stream, streamFromEmitter, pipe, map, connect, prop, combineLatest, filter, distinctUntilChanged, statefulStream, subscribe, publish, noop, withLatestFrom, statefulStreamFromEmitter, compose } from '@virtuoso.dev/urx';
+import * as React from 'react';
+import { useLayoutEffect, useEffect, useRef, useCallback, createElement } from 'react';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+
+  return arr2;
+}
+
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+var useIsomorphicLayoutEffect = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+
+var _CONSOLE_METHOD_MAP;
+var LogLevel;
+
+(function (LogLevel) {
+  LogLevel[LogLevel["DEBUG"] = 0] = "DEBUG";
+  LogLevel[LogLevel["INFO"] = 1] = "INFO";
+  LogLevel[LogLevel["WARN"] = 2] = "WARN";
+  LogLevel[LogLevel["ERROR"] = 3] = "ERROR";
+})(LogLevel || (LogLevel = {}));
+
+var CONSOLE_METHOD_MAP = (_CONSOLE_METHOD_MAP = {}, _CONSOLE_METHOD_MAP[LogLevel.DEBUG] = 'debug', _CONSOLE_METHOD_MAP[LogLevel.INFO] = 'log', _CONSOLE_METHOD_MAP[LogLevel.WARN] = 'warn', _CONSOLE_METHOD_MAP[LogLevel.ERROR] = 'error', _CONSOLE_METHOD_MAP);
+
+var getGlobalThis = function getGlobalThis() {
+  return typeof globalThis === 'undefined' ? window : globalThis;
+};
+
+var loggerSystem = /*#__PURE__*/u.system(function () {
+  var logLevel = u.statefulStream(LogLevel.ERROR);
+  var log = u.statefulStream(function (label, message, level) {
+    var _getGlobalThis$VIRTUO;
+
+    if (level === void 0) {
+      level = LogLevel.INFO;
+    }
+
+    var currentLevel = (_getGlobalThis$VIRTUO = getGlobalThis()['VIRTUOSO_LOG_LEVEL']) != null ? _getGlobalThis$VIRTUO : u.getValue(logLevel);
+
+    if (level >= currentLevel) {
+      // eslint-disable-next-line no-console
+      console[CONSOLE_METHOD_MAP[level]]('%creact-virtuoso: %c%s %o', 'color: #0253b3; font-weight: bold', 'color: initial', label, message);
+    }
+  });
+  return {
+    log: log,
+    logLevel: logLevel
+  };
+}, [], {
+  singleton: true
+});
+
+function useSizeWithElRef(callback, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+
+  var ref = useRef(null);
+
+  var callbackRef = function callbackRef(_el) {
+  };
+
+  if (typeof ResizeObserver !== 'undefined') {
+    var observer = new ResizeObserver(function (entries) {
+      var element = entries[0].target;
+
+      if (element.offsetParent !== null) {
+        callback(element);
+      }
+    });
+
+    callbackRef = function callbackRef(elRef) {
+      if (elRef && enabled) {
+        observer.observe(elRef);
+        ref.current = elRef;
+      } else {
+        if (ref.current) {
+          observer.unobserve(ref.current);
+        }
+
+        ref.current = null;
+      }
+    };
+  }
+
+  return {
+    ref: ref,
+    callbackRef: callbackRef
+  };
+}
+function useSize(callback, enabled) {
+  if (enabled === void 0) {
+    enabled = true;
+  }
+
+  return useSizeWithElRef(callback, enabled).callbackRef;
+}
+
+function useChangedListContentsSizes(callback, itemSize, enabled, scrollContainerStateCallback, log, customScrollParent) {
+  return useSize(function (el) {
+    var ranges = getChangedChildSizes(el.children, itemSize, 'offsetHeight', log);
+    var scrollableElement = el.parentElement;
+
+    while (!scrollableElement.dataset['virtuosoScroller']) {
+      scrollableElement = scrollableElement.parentElement;
+    }
+
+    var scrollTop = customScrollParent ? customScrollParent.scrollTop : // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    scrollableElement.firstElementChild.dataset['viewportType'] === 'window' ? window.pageYOffset || document.documentElement.scrollTop : scrollableElement.scrollTop;
+    customScrollParent ? scrollContainerStateCallback([Math.max(scrollTop, 0), customScrollParent.scrollHeight]) : scrollContainerStateCallback([Math.max(scrollTop, 0), scrollableElement.scrollHeight]);
+
+    if (ranges !== null) {
+      callback(ranges);
+    }
+  }, enabled);
+}
+
+function getChangedChildSizes(children, itemSize, field, log) {
+  var length = children.length;
+
+  if (length === 0) {
+    return null;
+  }
+
+  var results = [];
+
+  for (var i = 0; i < length; i++) {
+    var child = children.item(i);
+
+    if (!child || child.dataset.index === undefined) {
+      continue;
+    }
+
+    var index = parseInt(child.dataset.index);
+    var knownSize = parseFloat(child.dataset.knownSize);
+    var size = itemSize(child, field);
+
+    if (size === 0) {
+      log('Zero-sized element, this should not happen', {
+        child: child
+      }, LogLevel.ERROR);
+    }
+
+    if (size === knownSize) {
+      continue;
+    }
+
+    var lastResult = results[results.length - 1];
+
+    if (results.length === 0 || lastResult.size !== size || lastResult.endIndex !== index - 1) {
+      results.push({
+        startIndex: index,
+        endIndex: index,
+        size: size
+      });
+    } else {
+      results[results.length - 1].endIndex++;
+    }
+  }
+
+  return results;
+}
+
+function correctItemSize(el, dimension) {
+  return Math.round(el.getBoundingClientRect()[dimension]);
+}
+
+function approximatelyEqual(num1, num2) {
+  return Math.abs(num1 - num2) < 1.01;
+}
+
+function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback, customScrollParent) {
+  if (scrollerRefCallback === void 0) {
+    scrollerRefCallback = u.noop;
+  }
+
+  var scrollerRef = useRef(null);
+  var scrollTopTarget = useRef(null);
+  var timeoutRef = useRef(null);
+  var handler = useCallback(function (ev) {
+    var el = ev.target;
+    var scrollTop = el === window || el === document ? window.pageYOffset || document.documentElement.scrollTop : el.scrollTop;
+    var scrollHeight = el === window ? document.documentElement.scrollHeight : el.scrollHeight;
+    scrollContainerStateCallback([Math.max(scrollTop, 0), scrollHeight]);
+
+    if (scrollTopTarget.current !== null) {
+      if (scrollTop === scrollTopTarget.current || scrollTop <= 0 || scrollTop === el.scrollHeight - correctItemSize(el, 'height')) {
+        scrollTopTarget.current = null;
+        smoothScrollTargetReached(true);
+
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+          timeoutRef.current = null;
+        }
+      }
+    }
+  }, [scrollContainerStateCallback, smoothScrollTargetReached]);
+  useEffect(function () {
+    var localRef = customScrollParent ? customScrollParent : scrollerRef.current;
+    scrollerRefCallback(customScrollParent ? customScrollParent : scrollerRef.current);
+    handler({
+      target: localRef
+    });
+    localRef.addEventListener('scroll', handler, {
+      passive: true
+    });
+    return function () {
+      scrollerRefCallback(null);
+      localRef.removeEventListener('scroll', handler);
+    };
+  }, [scrollerRef, handler, scrollerElement, scrollerRefCallback, customScrollParent]);
+
+  function scrollToCallback(location) {
+    var scrollerElement = scrollerRef.current;
+
+    if (!scrollerElement || 'offsetHeight' in scrollerElement && scrollerElement.offsetHeight === 0) {
+      return;
+    }
+
+    var isSmooth = location.behavior === 'smooth';
+    var offsetHeight;
+    var scrollHeight;
+    var scrollTop;
+
+    if (scrollerElement === window) {
+      // this is not a mistake
+      scrollHeight = Math.max(correctItemSize(document.documentElement, 'height'), document.documentElement.scrollHeight);
+      offsetHeight = window.innerHeight;
+      scrollTop = document.documentElement.scrollTop;
+    } else {
+      scrollHeight = scrollerElement.scrollHeight;
+      offsetHeight = correctItemSize(scrollerElement, 'height');
+      scrollTop = scrollerElement.scrollTop;
+    }
+
+    var maxScrollTop = scrollHeight - offsetHeight;
+    location.top = Math.ceil(Math.max(Math.min(maxScrollTop, location.top), 0)); // avoid system hanging because the DOM never called back
+    // with the scrollTop
+    // scroller is already at this location
+
+    if (approximatelyEqual(offsetHeight, scrollHeight) || location.top === scrollTop) {
+      scrollContainerStateCallback([scrollTop, scrollHeight]);
+
+      if (isSmooth) {
+        smoothScrollTargetReached(true);
+      }
+
+      return;
+    }
+
+    if (isSmooth) {
+      scrollTopTarget.current = location.top;
+
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(function () {
+        timeoutRef.current = null;
+        scrollTopTarget.current = null;
+        smoothScrollTargetReached(true);
+      }, 1000);
+    } else {
+      scrollTopTarget.current = null;
+    }
+
+    scrollerElement.scrollTo(location);
+  }
+
+  function scrollByCallback(location) {
+    if (scrollTopTarget.current === null) {
+      scrollerRef.current.scrollBy(location);
+    }
+  }
+
+  return {
+    scrollerRef: scrollerRef,
+    scrollByCallback: scrollByCallback,
+    scrollToCallback: scrollToCallback
+  };
+}
+
+var domIOSystem = /*#__PURE__*/u.system(function () {
+  var scrollContainerState = u.stream();
+  var scrollTop = u.stream();
+  var deviation = u.statefulStream(0);
+  var smoothScrollTargetReached = u.stream();
+  var statefulScrollTop = u.statefulStream(0);
+  var viewportHeight = u.stream();
+  var scrollHeight = u.stream();
+  var headerHeight = u.statefulStream(0);
+  var footerHeight = u.statefulStream(0);
+  var scrollTo = u.stream();
+  var scrollBy = u.stream();
+  var scrollingInProgress = u.statefulStream(false);
+  u.connect(u.pipe(scrollContainerState, u.map(function (_ref) {
+    var scrollTop = _ref[0];
+    return scrollTop;
+  })), scrollTop);
+  u.connect(u.pipe(scrollContainerState, u.map(function (_ref2) {
+    var scrollHeight = _ref2[1];
+    return scrollHeight;
+  })), scrollHeight);
+  u.connect(scrollTop, statefulScrollTop);
+  return {
+    // input
+    scrollContainerState: scrollContainerState,
+    scrollTop: scrollTop,
+    viewportHeight: viewportHeight,
+    headerHeight: headerHeight,
+    footerHeight: footerHeight,
+    scrollHeight: scrollHeight,
+    smoothScrollTargetReached: smoothScrollTargetReached,
+    // signals
+    scrollTo: scrollTo,
+    scrollBy: scrollBy,
+    // state
+    statefulScrollTop: statefulScrollTop,
+    deviation: deviation,
+    scrollingInProgress: scrollingInProgress
+  };
+}, [], {
+  singleton: true
+});
+
+var NIL_NODE = {
+  lvl: 0
+};
+
+function newAANode(k, v, lvl, l, r) {
+  if (l === void 0) {
+    l = NIL_NODE;
+  }
+
+  if (r === void 0) {
+    r = NIL_NODE;
+  }
+
+  return {
+    k: k,
+    v: v,
+    lvl: lvl,
+    l: l,
+    r: r
+  };
+}
+
+function empty(node) {
+  return node === NIL_NODE;
+}
+function newTree() {
+  return NIL_NODE;
+}
+function remove(node, key) {
+  if (empty(node)) return NIL_NODE;
+  var k = node.k,
+      l = node.l,
+      r = node.r;
+
+  if (key === k) {
+    if (empty(l)) {
+      return r;
+    } else if (empty(r)) {
+      return l;
+    } else {
+      var _last = last(l),
+          lastKey = _last[0],
+          lastValue = _last[1];
+
+      return adjust(clone(node, {
+        k: lastKey,
+        v: lastValue,
+        l: deleteLast(l)
+      }));
+    }
+  } else if (key < k) {
+    return adjust(clone(node, {
+      l: remove(l, key)
+    }));
+  } else {
+    return adjust(clone(node, {
+      r: remove(r, key)
+    }));
+  }
+}
+function findMaxKeyValue(node, value, field) {
+  if (field === void 0) {
+    field = 'k';
+  }
+
+  if (empty(node)) {
+    return [-Infinity, undefined];
+  }
+
+  if (node[field] === value) {
+    return [node.k, node.v];
+  }
+
+  if (node[field] < value) {
+    var r = findMaxKeyValue(node.r, value, field);
+
+    if (r[0] === -Infinity) {
+      return [node.k, node.v];
+    } else {
+      return r;
+    }
+  }
+
+  return findMaxKeyValue(node.l, value, field);
+}
+function insert(node, k, v) {
+  if (empty(node)) {
+    return newAANode(k, v, 1);
+  }
+
+  if (k === node.k) {
+    return clone(node, {
+      k: k,
+      v: v
+    });
+  } else if (k < node.k) {
+    return rebalance(clone(node, {
+      l: insert(node.l, k, v)
+    }));
+  } else {
+    return rebalance(clone(node, {
+      r: insert(node.r, k, v)
+    }));
+  }
+}
+function walkWithin(node, start, end) {
+  if (empty(node)) {
+    return [];
+  }
+
+  var k = node.k,
+      v = node.v,
+      l = node.l,
+      r = node.r;
+  var result = [];
+
+  if (k > start) {
+    result = result.concat(walkWithin(l, start, end));
+  }
+
+  if (k >= start && k <= end) {
+    result.push({
+      k: k,
+      v: v
+    });
+  }
+
+  if (k <= end) {
+    result = result.concat(walkWithin(r, start, end));
+  }
+
+  return result;
+}
+function walk(node) {
+  if (empty(node)) {
+    return [];
+  }
+
+  return [].concat(walk(node.l), [{
+    k: node.k,
+    v: node.v
+  }], walk(node.r));
+}
+
+function last(node) {
+  return empty(node.r) ? [node.k, node.v] : last(node.r);
+}
+
+function deleteLast(node) {
+  return empty(node.r) ? node.l : adjust(clone(node, {
+    r: deleteLast(node.r)
+  }));
+}
+
+function clone(node, args) {
+  return newAANode(args.k !== undefined ? args.k : node.k, args.v !== undefined ? args.v : node.v, args.lvl !== undefined ? args.lvl : node.lvl, args.l !== undefined ? args.l : node.l, args.r !== undefined ? args.r : node.r);
+}
+
+function isSingle(node) {
+  return empty(node) || node.lvl > node.r.lvl;
+}
+
+function rebalance(node) {
+  return split(skew(node));
+}
+
+function adjust(node) {
+  var l = node.l,
+      r = node.r,
+      lvl = node.lvl;
+
+  if (r.lvl >= lvl - 1 && l.lvl >= lvl - 1) {
+    return node;
+  } else if (lvl > r.lvl + 1) {
+    if (isSingle(l)) {
+      return skew(clone(node, {
+        lvl: lvl - 1
+      }));
+    } else {
+      if (!empty(l) && !empty(l.r)) {
+        return clone(l.r, {
+          l: clone(l, {
+            r: l.r.l
+          }),
+          r: clone(node, {
+            l: l.r.r,
+            lvl: lvl - 1
+          }),
+          lvl: lvl
+        });
+      } else {
+        throw new Error('Unexpected empty nodes');
+      }
+    }
+  } else {
+    if (isSingle(node)) {
+      return split(clone(node, {
+        lvl: lvl - 1
+      }));
+    } else {
+      if (!empty(r) && !empty(r.l)) {
+        var rl = r.l;
+        var rlvl = isSingle(rl) ? r.lvl - 1 : r.lvl;
+        return clone(rl, {
+          l: clone(node, {
+            r: rl.l,
+            lvl: lvl - 1
+          }),
+          r: split(clone(r, {
+            l: rl.r,
+            lvl: rlvl
+          })),
+          lvl: rl.lvl + 1
+        });
+      } else {
+        throw new Error('Unexpected empty nodes');
+      }
+    }
+  }
+}
+function rangesWithin(node, startIndex, endIndex) {
+  if (empty(node)) {
+    return [];
+  }
+
+  var adjustedStart = findMaxKeyValue(node, startIndex)[0];
+  return toRanges(walkWithin(node, adjustedStart, endIndex));
+}
+function arrayToRanges(items, parser) {
+  var length = items.length;
+
+  if (length === 0) {
+    return [];
+  }
+
+  var _parser = parser(items[0]),
+      start = _parser.index,
+      value = _parser.value;
+
+  var result = [];
+
+  for (var i = 1; i < length; i++) {
+    var _parser2 = parser(items[i]),
+        nextIndex = _parser2.index,
+        nextValue = _parser2.value;
+
+    result.push({
+      start: start,
+      end: nextIndex - 1,
+      value: value
+    });
+    start = nextIndex;
+    value = nextValue;
+  }
+
+  result.push({
+    start: start,
+    end: Infinity,
+    value: value
+  });
+  return result;
+}
+
+function toRanges(nodes) {
+  return arrayToRanges(nodes, function (_ref) {
+    var index = _ref.k,
+        value = _ref.v;
+    return {
+      index: index,
+      value: value
+    };
+  });
+}
+
+function split(node) {
+  var r = node.r,
+      lvl = node.lvl;
+  return !empty(r) && !empty(r.r) && r.lvl === lvl && r.r.lvl === lvl ? clone(r, {
+    l: clone(node, {
+      r: r.l
+    }),
+    lvl: lvl + 1
+  }) : node;
+}
+
+function skew(node) {
+  var l = node.l;
+  return !empty(l) && l.lvl === node.lvl ? clone(l, {
+    r: clone(node, {
+      l: l.r
+    })
+  }) : node;
+}
+
+function findIndexOfClosestSmallerOrEqual(items, value, comparator, start) {
+  if (start === void 0) {
+    start = 0;
+  }
+
+  var end = items.length - 1;
+
+  while (start <= end) {
+    var index = Math.floor((start + end) / 2);
+    var item = items[index];
+    var match = comparator(item, value);
+
+    if (match === 0) {
+      return index;
+    }
+
+    if (match === -1) {
+      if (end - start < 2) {
+        return index - 1;
+      }
+
+      end = index - 1;
+    } else {
+      if (end === start) {
+        return index;
+      }
+
+      start = index + 1;
+    }
+  }
+
+  throw new Error("Failed binary finding record in array - " + items.join(',') + ", searched for " + value);
+}
+function findClosestSmallerOrEqual(items, value, comparator) {
+  return items[findIndexOfClosestSmallerOrEqual(items, value, comparator)];
+}
+function findRange(items, startValue, endValue, comparator) {
+  var startIndex = findIndexOfClosestSmallerOrEqual(items, startValue, comparator);
+  var endIndex = findIndexOfClosestSmallerOrEqual(items, endValue, comparator, startIndex);
+  return items.slice(startIndex, endIndex + 1);
+}
+
+function rangeIncludes(refRange) {
+  var size = refRange.size,
+      startIndex = refRange.startIndex,
+      endIndex = refRange.endIndex;
+  return function (range) {
+    return range.start === startIndex && (range.end === endIndex || range.end === Infinity) && range.value === size;
+  };
+}
+
+function insertRanges(sizeTree, ranges) {
+  var syncStart = empty(sizeTree) ? 0 : Infinity;
+
+  for (var _iterator = _createForOfIteratorHelperLoose(ranges), _step; !(_step = _iterator()).done;) {
+    var range = _step.value;
+    var size = range.size,
+        startIndex = range.startIndex,
+        endIndex = range.endIndex;
+    syncStart = Math.min(syncStart, startIndex);
+
+    if (empty(sizeTree)) {
+      sizeTree = insert(sizeTree, 0, size);
+      continue;
+    } // extend the range in both directions, so that we can get adjacent neighbours.
+    // if the previous / next ones have the same value as the one we are about to insert,
+    // we 'merge' them.
+
+
+    var overlappingRanges = rangesWithin(sizeTree, startIndex - 1, endIndex + 1);
+
+    if (overlappingRanges.some(rangeIncludes(range))) {
+      continue;
+    }
+
+    var firstPassDone = false;
+    var shouldInsert = false;
+
+    for (var _iterator2 = _createForOfIteratorHelperLoose(overlappingRanges), _step2; !(_step2 = _iterator2()).done;) {
+      var _step2$value = _step2.value,
+          rangeStart = _step2$value.start,
+          rangeEnd = _step2$value.end,
+          rangeValue = _step2$value.value;
+
+      // previous range
+      if (!firstPassDone) {
+        shouldInsert = rangeValue !== size;
+        firstPassDone = true;
+      } else {
+        // remove the range if it starts within the new range OR if
+        // it has the same value as it, in order to perform a merge
+        if (endIndex >= rangeStart || size === rangeValue) {
+          sizeTree = remove(sizeTree, rangeStart);
+        }
+      } // next range
+
+
+      if (rangeEnd > endIndex && endIndex >= rangeStart) {
+        if (rangeValue !== size) {
+          sizeTree = insert(sizeTree, endIndex + 1, rangeValue);
+        }
+      }
+    }
+
+    if (shouldInsert) {
+      sizeTree = insert(sizeTree, startIndex, size);
+    }
+  }
+
+  return [sizeTree, syncStart];
+}
+function initialSizeState() {
+  return {
+    offsetTree: [],
+    sizeTree: newTree(),
+    groupOffsetTree: newTree(),
+    lastIndex: 0,
+    lastOffset: 0,
+    lastSize: 0,
+    groupIndices: []
+  };
+}
+function indexComparator(_ref, index) {
+  var itemIndex = _ref.index;
+  return index === itemIndex ? 0 : index < itemIndex ? -1 : 1;
+}
+function offsetComparator(_ref2, offset) {
+  var itemOffset = _ref2.offset;
+  return offset === itemOffset ? 0 : offset < itemOffset ? -1 : 1;
+}
+
+function offsetPointParser(point) {
+  return {
+    index: point.index,
+    value: point
+  };
+}
+
+function rangesWithinOffsets(tree, startOffset, endOffset, minStartIndex) {
+  if (minStartIndex === void 0) {
+    minStartIndex = 0;
+  }
+
+  if (minStartIndex > 0) {
+    startOffset = Math.max(startOffset, findClosestSmallerOrEqual(tree, minStartIndex, indexComparator).offset);
+  }
+
+  return arrayToRanges(findRange(tree, startOffset, endOffset, offsetComparator), offsetPointParser);
+}
+function sizeStateReducer(state, _ref3) {
+  var ranges = _ref3[0],
+      groupIndices = _ref3[1],
+      log = _ref3[2];
+
+  if (ranges.length > 0) {
+    log('received item sizes', ranges, LogLevel.DEBUG);
+  }
+
+  var sizeTree = state.sizeTree;
+  var offsetTree = state.offsetTree;
+  var newSizeTree = sizeTree;
+  var syncStart = 0; // We receive probe item results from a group probe,
+  // which should always pass an item and a group
+  // the results contain two ranges, which we consider to mean that groups and items have different size
+
+  if (groupIndices.length > 0 && empty(sizeTree) && ranges.length === 2) {
+    var groupSize = ranges[0].size;
+    var itemSize = ranges[1].size;
+    newSizeTree = groupIndices.reduce(function (tree, groupIndex) {
+      return insert(insert(tree, groupIndex, groupSize), groupIndex + 1, itemSize);
+    }, newSizeTree);
+  } else {
+
+    var _insertRanges = insertRanges(newSizeTree, ranges);
+
+    newSizeTree = _insertRanges[0];
+    syncStart = _insertRanges[1];
+  }
+
+  if (newSizeTree === sizeTree) {
+    return state;
+  }
+
+  var prevIndex = 0;
+  var prevSize = 0;
+  var prevAOffset = 0;
+  var startAIndex = 0;
+
+  if (syncStart !== 0) {
+    startAIndex = findIndexOfClosestSmallerOrEqual(offsetTree, syncStart - 1, indexComparator);
+    var offsetInfo = offsetTree[startAIndex];
+    prevAOffset = offsetInfo.offset;
+    var kv = findMaxKeyValue(newSizeTree, syncStart - 1);
+    prevIndex = kv[0];
+    prevSize = kv[1];
+
+    if (offsetTree.length && offsetTree[startAIndex].size === findMaxKeyValue(newSizeTree, syncStart)[1]) {
+      startAIndex -= 1;
+    }
+
+    offsetTree = offsetTree.slice(0, startAIndex + 1);
+  } else {
+    offsetTree = [];
+  }
+
+  for (var _iterator3 = _createForOfIteratorHelperLoose(rangesWithin(newSizeTree, syncStart, Infinity)), _step3; !(_step3 = _iterator3()).done;) {
+    var _step3$value = _step3.value,
+        startIndex = _step3$value.start,
+        value = _step3$value.value;
+    var aOffset = (startIndex - prevIndex) * prevSize + prevAOffset;
+    offsetTree.push({
+      offset: aOffset,
+      size: value,
+      index: startIndex
+    });
+    prevIndex = startIndex;
+    prevAOffset = aOffset;
+    prevSize = value;
+  }
+
+  return {
+    sizeTree: newSizeTree,
+    offsetTree: offsetTree,
+    groupOffsetTree: groupIndices.reduce(function (tree, index) {
+      return insert(tree, index, offsetOf(index, offsetTree));
+    }, newTree()),
+    lastIndex: prevIndex,
+    lastOffset: prevAOffset,
+    lastSize: prevSize,
+    groupIndices: groupIndices
+  };
+}
+function offsetOf(index, tree) {
+  if (tree.length === 0) {
+    return 0;
+  }
+
+  var _arrayBinarySearch$fi = findClosestSmallerOrEqual(tree, index, indexComparator),
+      offset = _arrayBinarySearch$fi.offset,
+      startIndex = _arrayBinarySearch$fi.index,
+      size = _arrayBinarySearch$fi.size;
+
+  return size * (index - startIndex) + offset;
+}
+function originalIndexFromItemIndex(itemIndex, sizes) {
+  if (!hasGroups(sizes)) {
+    return itemIndex;
+  }
+
+  var groupOffset = 0;
+
+  while (sizes.groupIndices[groupOffset] <= itemIndex + groupOffset) {
+    groupOffset++;
+  } // we find the real item index, offsetting it by the number of group items before it
+
+
+  return itemIndex + groupOffset;
+}
+function hasGroups(sizes) {
+  return !empty(sizes.groupOffsetTree);
+}
+var SIZE_MAP = {
+  offsetHeight: 'height',
+  offsetWidth: 'width'
+};
+var sizeSystem = /*#__PURE__*/u.system(function (_ref4) {
+  var log = _ref4[0].log;
+  var sizeRanges = u.stream();
+  var totalCount = u.stream();
+  var statefulTotalCount = u.statefulStreamFromEmitter(totalCount, 0);
+  var unshiftWith = u.stream();
+  var firstItemIndex = u.statefulStream(0);
+  var groupIndices = u.statefulStream([]);
+  var fixedItemSize = u.statefulStream(undefined);
+  var defaultItemSize = u.statefulStream(undefined);
+  var itemSize = u.statefulStream(function (el, field) {
+    return correctItemSize(el, SIZE_MAP[field]);
+  });
+  var data = u.statefulStream(undefined);
+  var initial = initialSizeState();
+  var sizes = u.statefulStreamFromEmitter(u.pipe(sizeRanges, u.withLatestFrom(groupIndices, log), u.scan(sizeStateReducer, initial), u.distinctUntilChanged()), initial);
+  u.connect(u.pipe(groupIndices, u.filter(function (indexes) {
+    return indexes.length > 0;
+  }), u.withLatestFrom(sizes), u.map(function (_ref5) {
+    var groupIndices = _ref5[0],
+        sizes = _ref5[1];
+    var groupOffsetTree = groupIndices.reduce(function (tree, index, idx) {
+      return insert(tree, index, offsetOf(index, sizes.offsetTree) || idx);
+    }, newTree());
+    return _extends({}, sizes, {
+      groupIndices: groupIndices,
+      groupOffsetTree: groupOffsetTree
+    });
+  })), sizes); // decreasing the total count should remove any existing entries
+  // beyond the last index - do this by publishing the default size as a range over them.
+
+  u.connect(u.pipe(totalCount, u.withLatestFrom(sizes), u.filter(function (_ref6) {
+    var totalCount = _ref6[0],
+        lastIndex = _ref6[1].lastIndex;
+    return totalCount < lastIndex;
+  }), u.map(function (_ref7) {
+    var totalCount = _ref7[0],
+        _ref7$ = _ref7[1],
+        lastIndex = _ref7$.lastIndex,
+        lastSize = _ref7$.lastSize;
+    return [{
+      startIndex: totalCount,
+      endIndex: lastIndex,
+      size: lastSize
+    }];
+  })), sizeRanges);
+  u.connect(fixedItemSize, defaultItemSize);
+  var trackItemSizes = u.statefulStreamFromEmitter(u.pipe(fixedItemSize, u.map(function (size) {
+    return size === undefined;
+  })), true);
+  u.connect(u.pipe(defaultItemSize, u.filter(function (value) {
+    return value !== undefined && empty(u.getValue(sizes).sizeTree);
+  }), u.map(function (size) {
+    return [{
+      startIndex: 0,
+      endIndex: 0,
+      size: size
+    }];
+  })), sizeRanges);
+  var listRefresh = u.streamFromEmitter(u.pipe(sizeRanges, u.withLatestFrom(sizes), u.scan(function (_ref8, _ref9) {
+    var oldSizes = _ref8.sizes;
+    var newSizes = _ref9[1];
+    return {
+      changed: newSizes !== oldSizes,
+      sizes: newSizes
+    };
+  }, {
+    changed: false,
+    sizes: initial
+  }), u.map(function (value) {
+    return value.changed;
+  })));
+  u.connect(u.pipe(firstItemIndex, u.scan(function (prev, next) {
+    return {
+      diff: prev.prev - next,
+      prev: next
+    };
+  }, {
+    diff: 0,
+    prev: 0
+  }), u.map(function (val) {
+    return val.diff;
+  }), u.filter(function (value) {
+    return value > 0;
+  })), unshiftWith);
+  u.subscribe(u.pipe(firstItemIndex, u.withLatestFrom(log)), function (_ref10) {
+    var index = _ref10[0],
+        log = _ref10[1];
+
+    if (index < 0) {
+      log("`firstItemIndex` prop should not be set to less than zero. If you don't know the total count, just use a very high value", {
+        firstItemIndex: firstItemIndex
+      }, LogLevel.ERROR);
+    }
+  }); // Capture the current list top item before the sizes get refreshed
+
+  var beforeUnshiftWith = u.streamFromEmitter(unshiftWith);
+  u.connect(u.pipe(unshiftWith, u.withLatestFrom(sizes), u.map(function (_ref11) {
+    var unshiftWith = _ref11[0],
+        sizes = _ref11[1];
+
+    if (sizes.groupIndices.length > 0) {
+      throw new Error('Virtuoso: prepending items does not work with groups');
+    }
+
+    return walk(sizes.sizeTree).reduce(function (acc, _ref12) {
+      var index = _ref12.k,
+          size = _ref12.v;
+      return {
+        ranges: [].concat(acc.ranges, [{
+          startIndex: acc.prevIndex,
+          endIndex: index + unshiftWith - 1,
+          size: acc.prevSize
+        }]),
+        prevIndex: index + unshiftWith,
+        prevSize: size
+      };
+    }, {
+      ranges: [],
+      prevIndex: 0,
+      prevSize: sizes.lastSize
+    }).ranges;
+  })), sizeRanges);
+  return {
+    // input
+    data: data,
+    totalCount: totalCount,
+    sizeRanges: sizeRanges,
+    groupIndices: groupIndices,
+    defaultItemSize: defaultItemSize,
+    fixedItemSize: fixedItemSize,
+    unshiftWith: unshiftWith,
+    beforeUnshiftWith: beforeUnshiftWith,
+    firstItemIndex: firstItemIndex,
+    // output
+    sizes: sizes,
+    listRefresh: listRefresh,
+    statefulTotalCount: statefulTotalCount,
+    trackItemSizes: trackItemSizes,
+    itemSize: itemSize
+  };
+}, /*#__PURE__*/u.tup(loggerSystem), {
+  singleton: true
+});
+
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+var SUPPORTS_SCROLL_TO_OPTIONS = typeof document !== 'undefined' && 'scrollBehavior' in document.documentElement.style;
+function normalizeIndexLocation(location) {
+  var result = typeof location === 'number' ? {
+    index: location
+  } : location;
+
+  if (!result.align) {
+    result.align = 'start';
+  }
+
+  if (!result.behavior || !SUPPORTS_SCROLL_TO_OPTIONS) {
+    result.behavior = 'auto';
+  }
+
+  if (!result.offset) {
+    result.offset = 0;
+  }
+
+  return result;
+}
+var scrollToIndexSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      sizes = _ref$.sizes,
+      totalCount = _ref$.totalCount,
+      listRefresh = _ref$.listRefresh,
+      _ref$2 = _ref[1],
+      scrollingInProgress = _ref$2.scrollingInProgress,
+      viewportHeight = _ref$2.viewportHeight,
+      scrollTo = _ref$2.scrollTo,
+      smoothScrollTargetReached = _ref$2.smoothScrollTargetReached,
+      headerHeight = _ref$2.headerHeight,
+      footerHeight = _ref$2.footerHeight,
+      log = _ref[2].log;
+  var scrollToIndex = u.stream();
+  var topListHeight = u.statefulStream(0);
+  var unsubscribeNextListRefresh = null;
+  var cleartTimeoutRef = null;
+  var unsubscribeListRefresh = null;
+
+  function cleanup() {
+    if (unsubscribeNextListRefresh) {
+      unsubscribeNextListRefresh();
+      unsubscribeNextListRefresh = null;
+    }
+
+    if (unsubscribeListRefresh) {
+      unsubscribeListRefresh();
+      unsubscribeListRefresh = null;
+    }
+
+    if (cleartTimeoutRef) {
+      clearTimeout(cleartTimeoutRef);
+      cleartTimeoutRef = null;
+    }
+
+    u.publish(scrollingInProgress, false);
+  }
+
+  u.connect(u.pipe(scrollToIndex, u.withLatestFrom(sizes, viewportHeight, totalCount, topListHeight, headerHeight, footerHeight, log), u.map(function (_ref2) {
+    var location = _ref2[0],
+        sizes = _ref2[1],
+        viewportHeight = _ref2[2],
+        totalCount = _ref2[3],
+        topListHeight = _ref2[4],
+        headerHeight = _ref2[5],
+        footerHeight = _ref2[6],
+        log = _ref2[7];
+    var normalLocation = normalizeIndexLocation(location);
+    var align = normalLocation.align,
+        behavior = normalLocation.behavior,
+        offset = normalLocation.offset;
+    var lastIndex = totalCount - 1;
+    var index = normalLocation.index;
+
+    if (index === 'LAST') {
+      index = lastIndex;
+    }
+
+    index = originalIndexFromItemIndex(index, sizes);
+    index = Math.max(0, index, Math.min(lastIndex, index));
+    var top = offsetOf(index, sizes.offsetTree) + headerHeight;
+
+    if (align === 'end') {
+      top = top - viewportHeight + findMaxKeyValue(sizes.sizeTree, index)[1];
+
+      if (index === lastIndex) {
+        top += footerHeight;
+      }
+    } else if (align === 'center') {
+      top = top - viewportHeight / 2 + findMaxKeyValue(sizes.sizeTree, index)[1] / 2;
+    } else {
+      top -= topListHeight;
+    }
+
+    if (offset) {
+      top += offset;
+    }
+
+    var retry = function retry(listChanged) {
+      cleanup();
+
+      if (listChanged) {
+        log('retrying to scroll to', {
+          location: location
+        }, LogLevel.DEBUG);
+        u.publish(scrollToIndex, location);
+      } else {
+        log('list did not change, scroll successful', {}, LogLevel.DEBUG);
+      }
+    };
+
+    cleanup();
+
+    if (behavior === 'smooth') {
+      var listChanged = false;
+      unsubscribeListRefresh = u.subscribe(listRefresh, function (changed) {
+        listChanged = listChanged || changed;
+      });
+      unsubscribeNextListRefresh = u.handleNext(smoothScrollTargetReached, function () {
+        retry(listChanged);
+      });
+    } else {
+      unsubscribeNextListRefresh = u.handleNext(u.pipe(listRefresh, watchChangesFor(50)), retry);
+    } // if the scroll jump is too small, the list won't get rerendered.
+    // clean this listener
+
+
+    cleartTimeoutRef = setTimeout(function () {
+      cleanup();
+    }, 1200);
+    u.publish(scrollingInProgress, true);
+    log('scrolling from index to', {
+      index: index,
+      top: top,
+      behavior: behavior
+    }, LogLevel.DEBUG);
+    return {
+      top: top,
+      behavior: behavior
+    };
+  })), scrollTo);
+  return {
+    scrollToIndex: scrollToIndex,
+    topListHeight: topListHeight
+  };
+}, /*#__PURE__*/u.tup(sizeSystem, domIOSystem, loggerSystem), {
+  singleton: true
+});
+
+function watchChangesFor(limit) {
+  return function (done) {
+    var timeoutRef = setTimeout(function () {
+      done(false);
+    }, limit);
+    return function (value) {
+      if (value) {
+        done(true);
+        clearTimeout(timeoutRef);
+      }
+    };
+  };
+}
+
+var UP = 'up';
+var DOWN = 'down';
+var NONE$1 = 'none';
+var INITIAL_BOTTOM_STATE = {
+  atBottom: false,
+  notAtBottomBecause: 'NOT_SHOWING_LAST_ITEM',
+  state: {
+    offsetBottom: 0,
+    scrollTop: 0,
+    viewportHeight: 0,
+    scrollHeight: 0
+  }
+};
+var stateFlagsSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      scrollContainerState = _ref$.scrollContainerState,
+      scrollTop = _ref$.scrollTop,
+      viewportHeight = _ref$.viewportHeight,
+      headerHeight = _ref$.headerHeight,
+      footerHeight = _ref$.footerHeight,
+      scrollBy = _ref$.scrollBy;
+  var isAtBottom = u.statefulStream(false);
+  var isAtTop = u.statefulStream(true);
+  var atBottomStateChange = u.stream();
+  var atTopStateChange = u.stream();
+  var atBottomThreshold = u.statefulStream(4); // skip 1 to avoid an initial on/off flick
+
+  var isScrolling = u.streamFromEmitter(u.pipe(u.merge(u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(true)), u.pipe(u.duc(scrollTop), u.skip(1), u.mapTo(false), u.debounceTime(100))), u.distinctUntilChanged()));
+  var isScrollingBy = u.statefulStreamFromEmitter(u.pipe(u.merge(u.pipe(scrollBy, u.mapTo(true)), u.pipe(scrollBy, u.mapTo(false), u.debounceTime(200))), u.distinctUntilChanged()), false); // u.subscribe(isScrollingBy, (isScrollingBy) => console.log({ isScrollingBy }))
+
+  u.connect(u.pipe(u.duc(scrollTop), u.map(function (top) {
+    return top === 0;
+  }), u.distinctUntilChanged()), isAtTop);
+  u.connect(isAtTop, atTopStateChange);
+  var atBottomState = u.streamFromEmitter(u.pipe(u.combineLatest(scrollContainerState, u.duc(viewportHeight), u.duc(headerHeight), u.duc(footerHeight), u.duc(atBottomThreshold)), u.scan(function (current, _ref2) {
+    var _ref2$ = _ref2[0],
+        scrollTop = _ref2$[0],
+        scrollHeight = _ref2$[1],
+        viewportHeight = _ref2[1],
+        atBottomThreshold = _ref2[4];
+    var isAtBottom = scrollTop + viewportHeight - scrollHeight > -atBottomThreshold;
+    var state = {
+      viewportHeight: viewportHeight,
+      scrollTop: scrollTop,
+      scrollHeight: scrollHeight
+    };
+
+    if (isAtBottom) {
+      var atBottomBecause;
+      var scrollTopDelta;
+
+      if (scrollTop > current.state.scrollTop) {
+        atBottomBecause = 'SCROLLED_DOWN';
+        scrollTopDelta = current.state.scrollTop - scrollTop;
+      } else {
+        atBottomBecause = 'SIZE_DECREASED';
+        scrollTopDelta = current.state.scrollTop - scrollTop || current.scrollTopDelta;
+      }
+
+      return {
+        atBottom: true,
+        state: state,
+        atBottomBecause: atBottomBecause,
+        scrollTopDelta: scrollTopDelta
+      };
+    }
+
+    var notAtBottomBecause;
+
+    if (state.scrollHeight > current.state.scrollHeight) {
+      notAtBottomBecause = 'SIZE_INCREASED';
+    } else if (viewportHeight < current.state.viewportHeight) {
+      notAtBottomBecause = 'VIEWPORT_HEIGHT_DECREASING';
+    } else if (scrollTop < current.state.scrollTop) {
+      notAtBottomBecause = 'SCROLLING_UPWARDS';
+    } else {
+      notAtBottomBecause = 'NOT_FULLY_SCROLLED_TO_LAST_ITEM_BOTTOM';
+    }
+
+    return {
+      atBottom: false,
+      notAtBottomBecause: notAtBottomBecause,
+      state: state
+    };
+  }, INITIAL_BOTTOM_STATE), u.distinctUntilChanged(function (prev, next) {
+    return prev && prev.atBottom === next.atBottom;
+  })));
+  var lastJumpDueToItemResize = u.statefulStreamFromEmitter(u.pipe(scrollContainerState, u.scan(function (current, _ref3) {
+    var scrollTop = _ref3[0],
+        scrollHeight = _ref3[1];
+
+    if (current.scrollHeight !== scrollHeight) {
+      if (current.scrollTop !== scrollTop) {
+        return {
+          scrollHeight: scrollHeight,
+          scrollTop: scrollTop,
+          jump: current.scrollTop - scrollTop,
+          changed: true
+        };
+      } else {
+        return {
+          scrollHeight: scrollHeight,
+          scrollTop: scrollTop,
+          jump: 0,
+          changed: true
+        };
+      }
+    } else {
+      return {
+        scrollTop: scrollTop,
+        scrollHeight: scrollHeight,
+        jump: 0,
+        changed: false
+      };
+    }
+  }, {
+    scrollHeight: 0,
+    jump: 0,
+    scrollTop: 0,
+    changed: false
+  }), u.filter(function (value) {
+    return value.changed;
+  }), u.map(function (value) {
+    return value.jump;
+  })), 0);
+  u.connect(u.pipe(atBottomState, u.map(function (state) {
+    return state.atBottom;
+  })), isAtBottom);
+  u.subscribe(isAtBottom, function (value) {
+    setTimeout(function () {
+      return u.publish(atBottomStateChange, value);
+    });
+  });
+  var scrollDirection = u.statefulStream(DOWN);
+  u.subscribe(isAtBottom, function (value) {
+    setTimeout(function () {
+      u.publish(atBottomStateChange, value);
+    });
+  });
+  u.connect(u.pipe(scrollContainerState, u.map(function (_ref4) {
+    var scrollTop = _ref4[0];
+    return scrollTop;
+  }), u.distinctUntilChanged(), u.scan(function (acc, scrollTop) {
+    // if things change while compensating for items, ignore,
+    // but store the new scrollTop
+    if (u.getValue(isScrollingBy)) {
+      return {
+        direction: acc.direction,
+        prevScrollTop: scrollTop
+      };
+    }
+
+    return {
+      direction: scrollTop < acc.prevScrollTop ? UP : DOWN,
+      prevScrollTop: scrollTop
+    };
+  }, {
+    direction: DOWN,
+    prevScrollTop: 0
+  }), u.map(function (value) {
+    return value.direction;
+  })), scrollDirection);
+  u.connect(u.pipe(scrollContainerState, u.throttleTime(50), u.mapTo(NONE$1)), scrollDirection);
+  u.connect(isAtBottom, atBottomStateChange);
+  var scrollVelocity = u.statefulStream(0);
+  u.connect(u.pipe(isScrolling, u.filter(function (value) {
+    return !value;
+  }), u.mapTo(0)), scrollVelocity);
+  u.connect(u.pipe(scrollTop, u.throttleTime(100), u.withLatestFrom(isScrolling), u.filter(function (_ref5) {
+    var isScrolling = _ref5[1];
+    return !!isScrolling;
+  }), u.scan(function (_ref6, _ref7) {
+    var prev = _ref6[1];
+    var next = _ref7[0];
+    return [prev, next];
+  }, [0, 0]), u.map(function (_ref8) {
+    var prev = _ref8[0],
+        next = _ref8[1];
+    return next - prev;
+  })), scrollVelocity);
+  return {
+    isScrolling: isScrolling,
+    isAtTop: isAtTop,
+    isAtBottom: isAtBottom,
+    atBottomState: atBottomState,
+    atTopStateChange: atTopStateChange,
+    atBottomStateChange: atBottomStateChange,
+    scrollDirection: scrollDirection,
+    atBottomThreshold: atBottomThreshold,
+    scrollVelocity: scrollVelocity,
+    lastJumpDueToItemResize: lastJumpDueToItemResize
+  };
+}, /*#__PURE__*/u.tup(domIOSystem));
+
+var propsReadySystem = /*#__PURE__*/u.system(function (_ref) {
+  var log = _ref[0].log;
+  var propsReady = u.statefulStream(false);
+  var didMount = u.streamFromEmitter(u.pipe(propsReady, u.filter(function (ready) {
+    return ready;
+  }), u.distinctUntilChanged()));
+  u.subscribe(propsReady, function (value) {
+    value && getValue(log)('props updated', {}, LogLevel.DEBUG);
+  });
+  return {
+    propsReady: propsReady,
+    didMount: didMount
+  };
+}, /*#__PURE__*/tup(loggerSystem), {
+  singleton: true
+});
+
+var initialTopMostItemIndexSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      sizes = _ref$.sizes,
+      listRefresh = _ref$.listRefresh,
+      defaultItemSize = _ref$.defaultItemSize,
+      scrollTop = _ref[1].scrollTop,
+      scrollToIndex = _ref[2].scrollToIndex,
+      didMount = _ref[3].didMount;
+  var scrolledToInitialItem = u.statefulStream(true);
+  var initialTopMostItemIndex = u.statefulStream(0);
+  u.connect(u.pipe(didMount, u.withLatestFrom(initialTopMostItemIndex), u.filter(function (_ref2) {
+    var index = _ref2[1];
+    return index !== 0;
+  }), u.mapTo(false)), scrolledToInitialItem);
+  u.subscribe(u.pipe(u.combineLatest(listRefresh, didMount), u.withLatestFrom(scrolledToInitialItem, sizes, defaultItemSize), u.filter(function (_ref3) {
+    var _ref3$ = _ref3[0],
+        didMount = _ref3$[1],
+        scrolledToInitialItem = _ref3[1],
+        sizeTree = _ref3[2].sizeTree,
+        defaultItemSize = _ref3[3];
+    return didMount && (!empty(sizeTree) || defaultItemSize !== undefined) && !scrolledToInitialItem;
+  }), u.withLatestFrom(initialTopMostItemIndex)), function (_ref4) {
+    var initialTopMostItemIndex = _ref4[1];
+    setTimeout(function () {
+      u.handleNext(scrollTop, function () {
+        u.publish(scrolledToInitialItem, true);
+      });
+      u.publish(scrollToIndex, initialTopMostItemIndex);
+    });
+  });
+  return {
+    scrolledToInitialItem: scrolledToInitialItem,
+    initialTopMostItemIndex: initialTopMostItemIndex
+  };
+}, /*#__PURE__*/u.tup(sizeSystem, domIOSystem, scrollToIndexSystem, propsReadySystem), {
+  singleton: true
+});
+
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+function normalizeFollowOutput(follow) {
+  if (!follow) {
+    return false;
+  }
+
+  return follow === 'smooth' ? 'smooth' : 'auto';
+}
+
+var behaviorFromFollowOutput = function behaviorFromFollowOutput(follow, isAtBottom) {
+  if (typeof follow === 'function') {
+    return normalizeFollowOutput(follow(isAtBottom));
+  }
+
+  return isAtBottom && normalizeFollowOutput(follow);
+};
+
+var followOutputSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      totalCount = _ref$.totalCount,
+      listRefresh = _ref$.listRefresh,
+      _ref$2 = _ref[1],
+      isAtBottom = _ref$2.isAtBottom,
+      atBottomState = _ref$2.atBottomState,
+      scrollToIndex = _ref[2].scrollToIndex,
+      scrolledToInitialItem = _ref[3].scrolledToInitialItem,
+      _ref$3 = _ref[4],
+      propsReady = _ref$3.propsReady,
+      didMount = _ref$3.didMount,
+      log = _ref[5].log,
+      scrollingInProgress = _ref[6].scrollingInProgress;
+  var followOutput = u.statefulStream(false);
+  var pendingScrollHandle = null;
+
+  function scrollToBottom(followOutputBehavior) {
+    u.publish(scrollToIndex, {
+      index: 'LAST',
+      align: 'end',
+      behavior: followOutputBehavior
+    });
+  }
+
+  u.subscribe(u.pipe(u.combineLatest(u.pipe(u.duc(totalCount), u.skip(1)), didMount), u.withLatestFrom(u.duc(followOutput), isAtBottom, scrolledToInitialItem, scrollingInProgress), u.map(function (_ref2) {
+    var _ref2$ = _ref2[0],
+        totalCount = _ref2$[0],
+        didMount = _ref2$[1],
+        followOutput = _ref2[1],
+        isAtBottom = _ref2[2],
+        scrolledToInitialItem = _ref2[3],
+        scrollingInProgress = _ref2[4];
+    var shouldFollow = didMount && scrolledToInitialItem;
+    var followOutputBehavior = 'auto';
+
+    if (shouldFollow) {
+      // if scrolling to index is in progress,
+      // assume that a previous followOutput response is going
+      followOutputBehavior = behaviorFromFollowOutput(followOutput, isAtBottom || scrollingInProgress);
+      shouldFollow = shouldFollow && !!followOutputBehavior;
+    }
+
+    return {
+      totalCount: totalCount,
+      shouldFollow: shouldFollow,
+      followOutputBehavior: followOutputBehavior
+    };
+  }), u.filter(function (_ref3) {
+    var shouldFollow = _ref3.shouldFollow;
+    return shouldFollow;
+  })), function (_ref4) {
+    var totalCount = _ref4.totalCount,
+        followOutputBehavior = _ref4.followOutputBehavior;
+
+    if (pendingScrollHandle) {
+      pendingScrollHandle();
+      pendingScrollHandle = null;
+    }
+
+    pendingScrollHandle = u.handleNext(listRefresh, function () {
+      u.getValue(log)('following output to ', {
+        totalCount: totalCount
+      }, LogLevel.DEBUG);
+      scrollToBottom(followOutputBehavior);
+      pendingScrollHandle = null;
+    });
+  });
+  u.subscribe(u.pipe(u.combineLatest(u.duc(followOutput), totalCount, propsReady), u.filter(function (_ref5) {
+    var follow = _ref5[0],
+        ready = _ref5[2];
+    return follow && ready;
+  }), u.scan(function (_ref6, _ref7) {
+    var value = _ref6.value;
+    var next = _ref7[1];
+    return {
+      refreshed: value === next,
+      value: next
+    };
+  }, {
+    refreshed: false,
+    value: 0
+  }), u.filter(function (_ref8) {
+    var refreshed = _ref8.refreshed;
+    return refreshed;
+  }), u.withLatestFrom(followOutput, totalCount)), function (_ref9) {
+    var followOutput = _ref9[1];
+    var cancel = u.handleNext(atBottomState, function (state) {
+      if (followOutput && !state.atBottom && state.notAtBottomBecause === 'SIZE_INCREASED' && !pendingScrollHandle) {
+        u.getValue(log)('scrolling to bottom due to increased size', {}, LogLevel.DEBUG);
+        scrollToBottom('auto');
+      }
+    });
+    setTimeout(cancel, 100);
+  });
+  u.subscribe(u.combineLatest(u.duc(followOutput), atBottomState), function (_ref10) {
+    var followOutput = _ref10[0],
+        state = _ref10[1];
+
+    if (followOutput && !state.atBottom && state.notAtBottomBecause === 'VIEWPORT_HEIGHT_DECREASING') {
+      scrollToBottom('auto');
+    }
+  });
+  return {
+    followOutput: followOutput
+  };
+}, /*#__PURE__*/u.tup(sizeSystem, stateFlagsSystem, scrollToIndexSystem, initialTopMostItemIndexSystem, propsReadySystem, loggerSystem, domIOSystem));
+
+function groupCountsToIndicesAndCount(counts) {
+  return counts.reduce(function (acc, groupCount) {
+    acc.groupIndices.push(acc.totalCount);
+    acc.totalCount += groupCount + 1;
+    return acc;
+  }, {
+    totalCount: 0,
+    groupIndices: []
+  });
+}
+var groupedListSystem = /*#__PURE__*/system(function (_ref) {
+  var _ref$ = _ref[0],
+      totalCount = _ref$.totalCount,
+      groupIndices = _ref$.groupIndices,
+      sizes = _ref$.sizes,
+      _ref$2 = _ref[1],
+      scrollTop = _ref$2.scrollTop,
+      headerHeight = _ref$2.headerHeight;
+  var groupCounts = stream();
+  var topItemsIndexes = stream();
+  var groupIndicesAndCount = streamFromEmitter(pipe(groupCounts, map(groupCountsToIndicesAndCount)));
+  connect(pipe(groupIndicesAndCount, map(prop('totalCount'))), totalCount);
+  connect(pipe(groupIndicesAndCount, map(prop('groupIndices'))), groupIndices);
+  connect(pipe(combineLatest(scrollTop, sizes, headerHeight), filter(function (_ref2) {
+    var sizes = _ref2[1];
+    return hasGroups(sizes);
+  }), map(function (_ref3) {
+    var scrollTop = _ref3[0],
+        state = _ref3[1],
+        headerHeight = _ref3[2];
+    return findMaxKeyValue(state.groupOffsetTree, Math.max(scrollTop - headerHeight, 0), 'v')[0];
+  }), distinctUntilChanged(), map(function (index) {
+    return [index];
+  })), topItemsIndexes);
+  return {
+    groupCounts: groupCounts,
+    topItemsIndexes: topItemsIndexes
+  };
+}, /*#__PURE__*/tup(sizeSystem, domIOSystem));
+
+function tupleComparator(prev, current) {
+  return !!(prev && prev[0] === current[0] && prev[1] === current[1]);
+}
+function rangeComparator(prev, next) {
+  return !!(prev && prev.startIndex === next.startIndex && prev.endIndex === next.endIndex);
+}
+
+var TOP = 'top';
+var BOTTOM = 'bottom';
+var NONE = 'none';
+function getOverscan(overscan, end, direction) {
+  if (typeof overscan === 'number') {
+    return direction === UP && end === TOP || direction === DOWN && end === BOTTOM ? overscan : 0;
+  } else {
+    if (direction === UP) {
+      return end === TOP ? overscan.main : overscan.reverse;
+    } else {
+      return end === BOTTOM ? overscan.main : overscan.reverse;
+    }
+  }
+}
+
+function getViewportIncrease(value, end) {
+  return typeof value === 'number' ? value : value[end] || 0;
+}
+
+var sizeRangeSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      scrollTop = _ref$.scrollTop,
+      viewportHeight = _ref$.viewportHeight,
+      deviation = _ref$.deviation,
+      headerHeight = _ref$.headerHeight;
+  var listBoundary = u.stream();
+  var topListHeight = u.statefulStream(0);
+  var fixedHeaderHeight = u.statefulStream(0);
+  var increaseViewportBy = u.statefulStream(0);
+  var overscan = u.statefulStream(0);
+  var visibleRange = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(u.duc(scrollTop), u.duc(viewportHeight), u.duc(headerHeight), u.duc(listBoundary, tupleComparator), u.duc(overscan), u.duc(topListHeight), u.duc(fixedHeaderHeight), u.duc(deviation), u.duc(increaseViewportBy)), u.map(function (_ref2) {
+    var scrollTop = _ref2[0],
+        viewportHeight = _ref2[1],
+        headerHeight = _ref2[2],
+        _ref2$ = _ref2[3],
+        listTop = _ref2$[0],
+        listBottom = _ref2$[1],
+        overscan = _ref2[4],
+        topListHeight = _ref2[5],
+        fixedHeaderHeight = _ref2[6],
+        deviation = _ref2[7],
+        increaseViewportBy = _ref2[8];
+    var top = scrollTop - deviation;
+    var stickyHeaderHeight = topListHeight + fixedHeaderHeight;
+    var headerVisible = Math.max(headerHeight - top, 0);
+    var direction = NONE;
+    var topViewportAddition = getViewportIncrease(increaseViewportBy, TOP);
+    var bottomViewportAddition = getViewportIncrease(increaseViewportBy, BOTTOM);
+    listTop -= deviation;
+    listTop += headerHeight;
+    listBottom += headerHeight;
+    listBottom -= deviation;
+
+    if (listTop > scrollTop + stickyHeaderHeight - topViewportAddition) {
+      direction = UP;
+    }
+
+    if (listBottom < scrollTop - headerVisible + viewportHeight + bottomViewportAddition) {
+      direction = DOWN;
+    }
+
+    if (direction !== NONE) {
+      return [Math.max(top - headerHeight - getOverscan(overscan, TOP, direction) - topViewportAddition, 0), top - headerVisible - fixedHeaderHeight + viewportHeight + getOverscan(overscan, BOTTOM, direction) + bottomViewportAddition];
+    }
+
+    return null;
+  }), u.filter(function (value) {
+    return value != null;
+  }), u.distinctUntilChanged(tupleComparator)), [0, 0]);
+  return {
+    // input
+    listBoundary: listBoundary,
+    overscan: overscan,
+    topListHeight: topListHeight,
+    fixedHeaderHeight: fixedHeaderHeight,
+    increaseViewportBy: increaseViewportBy,
+    // output
+    visibleRange: visibleRange
+  };
+}, /*#__PURE__*/u.tup(domIOSystem), {
+  singleton: true
+});
+
+function probeItemSet(index, sizes, data) {
+  if (hasGroups(sizes)) {
+    var itemIndex = originalIndexFromItemIndex(index, sizes);
+    var groupIndex = findMaxKeyValue(sizes.groupOffsetTree, itemIndex)[0];
+    return [{
+      index: groupIndex,
+      size: 0,
+      offset: 0
+    }, {
+      index: itemIndex,
+      size: 0,
+      offset: 0,
+      data: data && data[0]
+    }];
+  }
+
+  return [{
+    index: index,
+    size: 0,
+    offset: 0,
+    data: data && data[0]
+  }];
+}
+
+var EMPTY_LIST_STATE = {
+  items: [],
+  topItems: [],
+  offsetTop: 0,
+  offsetBottom: 0,
+  top: 0,
+  bottom: 0,
+  topListHeight: 0,
+  totalCount: 0
+};
+
+function transposeItems(items, sizes, firstItemIndex) {
+  if (items.length === 0) {
+    return [];
+  }
+
+  if (!hasGroups(sizes)) {
+    return items.map(function (item) {
+      return _extends({}, item, {
+        index: item.index + firstItemIndex,
+        originalIndex: item.index
+      });
+    });
+  }
+
+  var startIndex = items[0].index;
+  var endIndex = items[items.length - 1].index;
+  var transposedItems = [];
+  var groupRanges = rangesWithin(sizes.groupOffsetTree, startIndex, endIndex);
+  var currentRange = undefined;
+  var currentGroupIndex = 0;
+
+  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+    var item = _step.value;
+
+    if (!currentRange || currentRange.end < item.index) {
+      currentRange = groupRanges.shift();
+      currentGroupIndex = sizes.groupIndices.indexOf(currentRange.start);
+    }
+
+    var transposedItem = void 0;
+
+    if (item.index === currentRange.start) {
+      transposedItem = {
+        type: 'group',
+        index: currentGroupIndex
+      };
+    } else {
+      transposedItem = {
+        index: item.index - (currentGroupIndex + 1) + firstItemIndex,
+        groupIndex: currentGroupIndex
+      };
+    }
+
+    transposedItems.push(_extends({}, transposedItem, {
+      size: item.size,
+      offset: item.offset,
+      originalIndex: item.index,
+      data: item.data
+    }));
+  }
+
+  return transposedItems;
+}
+
+function buildListState(items, topItems, totalCount, sizes, firstItemIndex) {
+  var lastSize = sizes.lastSize,
+      lastOffset = sizes.lastOffset,
+      lastIndex = sizes.lastIndex;
+  var offsetTop = 0;
+  var bottom = 0;
+
+  if (items.length > 0) {
+    offsetTop = items[0].offset;
+    var lastItem = items[items.length - 1];
+    bottom = lastItem.offset + lastItem.size;
+  }
+
+  var total = lastOffset + (totalCount - lastIndex) * lastSize;
+  var top = offsetTop;
+  var offsetBottom = total - bottom;
+  return {
+    items: transposeItems(items, sizes, firstItemIndex),
+    topItems: transposeItems(topItems, sizes, firstItemIndex),
+    topListHeight: topItems.reduce(function (height, item) {
+      return item.size + height;
+    }, 0),
+    offsetTop: offsetTop,
+    offsetBottom: offsetBottom,
+    top: top,
+    bottom: bottom,
+    totalCount: totalCount
+  };
+}
+var listStateSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      sizes = _ref$.sizes,
+      totalCount = _ref$.totalCount,
+      data = _ref$.data,
+      firstItemIndex = _ref$.firstItemIndex,
+      groupedListSystem = _ref[1],
+      _ref$2 = _ref[2],
+      visibleRange = _ref$2.visibleRange,
+      listBoundary = _ref$2.listBoundary,
+      rangeTopListHeight = _ref$2.topListHeight,
+      _ref$3 = _ref[3],
+      scrolledToInitialItem = _ref$3.scrolledToInitialItem,
+      initialTopMostItemIndex = _ref$3.initialTopMostItemIndex,
+      topListHeight = _ref[4].topListHeight,
+      stateFlags = _ref[5],
+      didMount = _ref[6].didMount;
+  var topItemsIndexes = u.statefulStream([]);
+  var itemsRendered = u.stream();
+  u.connect(groupedListSystem.topItemsIndexes, topItemsIndexes);
+  var listState = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(didMount, u.duc(visibleRange), u.duc(totalCount), u.duc(sizes), u.duc(initialTopMostItemIndex), scrolledToInitialItem, u.duc(topItemsIndexes), u.duc(firstItemIndex), data), u.filter(function (_ref2) {
+    var mount = _ref2[0];
+    return mount;
+  }), u.map(function (_ref3) {
+    var _ref3$ = _ref3[1],
+        startOffset = _ref3$[0],
+        endOffset = _ref3$[1],
+        totalCount = _ref3[2],
+        sizes = _ref3[3],
+        initialTopMostItemIndex = _ref3[4],
+        scrolledToInitialItem = _ref3[5],
+        topItemsIndexes = _ref3[6],
+        firstItemIndex = _ref3[7],
+        data = _ref3[8];
+    var sizesValue = sizes;
+    var sizeTree = sizesValue.sizeTree,
+        offsetTree = sizesValue.offsetTree;
+
+    if (totalCount === 0 || startOffset === 0 && endOffset === 0) {
+      return EMPTY_LIST_STATE;
+    }
+
+    if (empty(sizeTree)) {
+      return buildListState(probeItemSet(initialTopMostItemIndex, sizesValue, data), [], totalCount, sizesValue, firstItemIndex);
+    }
+
+    var topItems = [];
+
+    if (topItemsIndexes.length > 0) {
+      var startIndex = topItemsIndexes[0];
+      var endIndex = topItemsIndexes[topItemsIndexes.length - 1];
+      var offset = 0;
+
+      for (var _iterator2 = _createForOfIteratorHelperLoose(rangesWithin(sizeTree, startIndex, endIndex)), _step2; !(_step2 = _iterator2()).done;) {
+        var range = _step2.value;
+        var size = range.value;
+        var rangeStartIndex = Math.max(range.start, startIndex);
+        var rangeEndIndex = Math.min(range.end, endIndex);
+
+        for (var i = rangeStartIndex; i <= rangeEndIndex; i++) {
+          topItems.push({
+            index: i,
+            size: size,
+            offset: offset,
+            data: data && data[i]
+          });
+          offset += size;
+        }
+      }
+    } // If the list hasn't scrolled to the initial item because the initial item was set,
+    // render empty list.
+    //
+    // This is a condition to be evaluated past the probe check, do not merge
+    // with the totalCount check above
+
+
+    if (!scrolledToInitialItem) {
+      return buildListState([], topItems, totalCount, sizesValue, firstItemIndex);
+    }
+
+    var minStartIndex = topItemsIndexes.length > 0 ? topItemsIndexes[topItemsIndexes.length - 1] + 1 : 0;
+    var offsetPointRanges = rangesWithinOffsets(offsetTree, startOffset, endOffset, minStartIndex);
+
+    if (offsetPointRanges.length === 0) {
+      return null;
+    }
+
+    var maxIndex = totalCount - 1;
+    var items = u.tap([], function (result) {
+      for (var _iterator3 = _createForOfIteratorHelperLoose(offsetPointRanges), _step3; !(_step3 = _iterator3()).done;) {
+        var _range = _step3.value;
+        var point = _range.value;
+        var _offset = point.offset;
+        var _rangeStartIndex = _range.start;
+        var _size = point.size;
+
+        if (point.offset < startOffset) {
+          _rangeStartIndex += Math.floor((startOffset - point.offset) / _size);
+          _offset += (_rangeStartIndex - _range.start) * _size;
+        }
+
+        if (_rangeStartIndex < minStartIndex) {
+          _offset += (minStartIndex - _rangeStartIndex) * _size;
+          _rangeStartIndex = minStartIndex;
+        }
+
+        var _endIndex = Math.min(_range.end, maxIndex);
+
+        for (var _i = _rangeStartIndex; _i <= _endIndex; _i++) {
+          if (_offset >= endOffset) {
+            break;
+          }
+
+          result.push({
+            index: _i,
+            size: _size,
+            offset: _offset,
+            data: data && data[_i]
+          });
+          _offset += _size;
+        }
+      }
+    });
+    return buildListState(items, topItems, totalCount, sizesValue, firstItemIndex);
+  }), //@ts-expect-error filter needs to be fixed
+  u.filter(function (value) {
+    return value !== null;
+  }), u.distinctUntilChanged()), EMPTY_LIST_STATE);
+  u.connect(u.pipe(data, u.filter(function (data) {
+    return data !== undefined;
+  }), u.map(function (data) {
+    return data.length;
+  })), totalCount);
+  u.connect(u.pipe(listState, u.map(u.prop('topListHeight'))), topListHeight);
+  u.connect(topListHeight, rangeTopListHeight);
+  u.connect(u.pipe(listState, u.map(function (state) {
+    return [state.top, state.bottom];
+  })), listBoundary);
+  u.connect(u.pipe(listState, u.map(function (state) {
+    return state.items;
+  })), itemsRendered);
+  var endReached = u.streamFromEmitter(u.pipe(listState, u.filter(function (_ref4) {
+    var items = _ref4.items;
+    return items.length > 0;
+  }), u.withLatestFrom(totalCount, data), u.filter(function (_ref5) {
+    var items = _ref5[0].items,
+        totalCount = _ref5[1];
+    return items[items.length - 1].originalIndex === totalCount - 1;
+  }), u.map(function (_ref6) {
+    var totalCount = _ref6[1],
+        data = _ref6[2];
+    return [totalCount - 1, data];
+  }), u.distinctUntilChanged(tupleComparator), u.map(function (_ref7) {
+    var count = _ref7[0];
+    return count;
+  })));
+  var startReached = u.streamFromEmitter(u.pipe(listState, u.throttleTime(200), u.filter(function (_ref8) {
+    var items = _ref8.items,
+        topItems = _ref8.topItems;
+    return items.length > 0 && items[0].originalIndex === topItems.length;
+  }), u.map(function (_ref9) {
+    var items = _ref9.items;
+    return items[0].index;
+  }), u.distinctUntilChanged()));
+  var rangeChanged = u.streamFromEmitter(u.pipe(listState, u.filter(function (_ref10) {
+    var items = _ref10.items;
+    return items.length > 0;
+  }), u.map(function (_ref11) {
+    var items = _ref11.items;
+    return {
+      startIndex: items[0].index,
+      endIndex: items[items.length - 1].index
+    };
+  }), u.distinctUntilChanged(rangeComparator)));
+  return _extends({
+    listState: listState,
+    topItemsIndexes: topItemsIndexes,
+    endReached: endReached,
+    startReached: startReached,
+    rangeChanged: rangeChanged,
+    itemsRendered: itemsRendered
+  }, stateFlags);
+}, /*#__PURE__*/u.tup(sizeSystem, groupedListSystem, sizeRangeSystem, initialTopMostItemIndexSystem, scrollToIndexSystem, stateFlagsSystem, propsReadySystem), {
+  singleton: true
+});
+
+var initialItemCountSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      sizes = _ref$.sizes,
+      firstItemIndex = _ref$.firstItemIndex,
+      data = _ref$.data,
+      listState = _ref[1].listState,
+      didMount = _ref[2].didMount;
+  var initialItemCount = u.statefulStream(0);
+  u.connect(u.pipe(didMount, u.withLatestFrom(initialItemCount), u.filter(function (_ref2) {
+    var count = _ref2[1];
+    return count !== 0;
+  }), u.withLatestFrom(sizes, firstItemIndex, data), u.map(function (_ref3) {
+    var _ref3$ = _ref3[0],
+        count = _ref3$[1],
+        sizes = _ref3[1],
+        firstItemIndex = _ref3[2],
+        _ref3$2 = _ref3[3],
+        data = _ref3$2 === void 0 ? [] : _ref3$2;
+    var includedGroupsCount = 0;
+
+    if (sizes.groupIndices.length > 0) {
+      for (var _iterator = _createForOfIteratorHelperLoose(sizes.groupIndices), _step; !(_step = _iterator()).done;) {
+        var index = _step.value;
+
+        if (index - includedGroupsCount >= count) {
+          break;
+        }
+
+        includedGroupsCount++;
+      }
+    }
+
+    var adjustedCount = count + includedGroupsCount;
+    var items = Array.from({
+      length: adjustedCount
+    }).map(function (_, index) {
+      return {
+        index: index,
+        size: 0,
+        offset: 0,
+        data: data[index]
+      };
+    });
+    return buildListState(items, [], adjustedCount, sizes, firstItemIndex);
+  })), listState);
+  return {
+    initialItemCount: initialItemCount
+  };
+}, /*#__PURE__*/u.tup(sizeSystem, listStateSystem, propsReadySystem), {
+  singleton: true
+});
+
+var scrollSeekSystem = /*#__PURE__*/u.system(function (_ref) {
+  var scrollVelocity = _ref[0].scrollVelocity;
+  var isSeeking = u.statefulStream(false);
+  var rangeChanged = u.stream();
+  var scrollSeekConfiguration = u.statefulStream(false);
+  u.connect(u.pipe(scrollVelocity, u.withLatestFrom(scrollSeekConfiguration, isSeeking, rangeChanged), u.filter(function (_ref2) {
+    var config = _ref2[1];
+    return !!config;
+  }), u.map(function (_ref3) {
+    var speed = _ref3[0],
+        config = _ref3[1],
+        isSeeking = _ref3[2],
+        range = _ref3[3];
+    var exit = config.exit,
+        enter = config.enter;
+
+    if (isSeeking) {
+      if (exit(speed, range)) {
+        return false;
+      }
+    } else {
+      if (enter(speed, range)) {
+        return true;
+      }
+    }
+
+    return isSeeking;
+  }), u.distinctUntilChanged()), isSeeking);
+  u.subscribe(u.pipe(u.combineLatest(isSeeking, scrollVelocity, rangeChanged), u.withLatestFrom(scrollSeekConfiguration)), function (_ref4) {
+    var _ref4$ = _ref4[0],
+        isSeeking = _ref4$[0],
+        velocity = _ref4$[1],
+        range = _ref4$[2],
+        config = _ref4[1];
+    return isSeeking && config && config.change && config.change(velocity, range);
+  });
+  return {
+    isSeeking: isSeeking,
+    scrollSeekConfiguration: scrollSeekConfiguration,
+    scrollVelocity: scrollVelocity,
+    scrollSeekRangeChanged: rangeChanged
+  };
+}, /*#__PURE__*/u.tup(stateFlagsSystem), {
+  singleton: true
+});
+
+var topItemCountSystem = /*#__PURE__*/system(function (_ref) {
+  var topItemsIndexes = _ref[0].topItemsIndexes;
+  var topItemCount = statefulStream(0);
+  connect(pipe(topItemCount, filter(function (length) {
+    return length > 0;
+  }), map(function (length) {
+    return Array.from({
+      length: length
+    }).map(function (_, index) {
+      return index;
+    });
+  })), topItemsIndexes);
+  return {
+    topItemCount: topItemCount
+  };
+}, /*#__PURE__*/tup(listStateSystem));
+
+var totalListHeightSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      footerHeight = _ref$.footerHeight,
+      headerHeight = _ref$.headerHeight,
+      listState = _ref[1].listState;
+  var totalListHeightChanged = u.stream();
+  var totalListHeight = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(footerHeight, headerHeight, listState), u.map(function (_ref2) {
+    var footerHeight = _ref2[0],
+        headerHeight = _ref2[1],
+        listState = _ref2[2];
+    return footerHeight + headerHeight + listState.offsetBottom + listState.bottom;
+  })), 0);
+  u.connect(u.duc(totalListHeight), totalListHeightChanged);
+  return {
+    totalListHeight: totalListHeight,
+    totalListHeightChanged: totalListHeightChanged
+  };
+}, /*#__PURE__*/u.tup(domIOSystem, listStateSystem), {
+  singleton: true
+});
+
+/**
+ * Fixes upward scrolling by calculating and compensation from changed item heights, using scrollBy.
+ */
+
+var upwardScrollFixSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      scrollBy = _ref$.scrollBy,
+      scrollTop = _ref$.scrollTop,
+      deviation = _ref$.deviation,
+      scrollingInProgress = _ref$.scrollingInProgress,
+      _ref$2 = _ref[1],
+      isScrolling = _ref$2.isScrolling,
+      isAtBottom = _ref$2.isAtBottom,
+      atBottomState = _ref$2.atBottomState,
+      scrollDirection = _ref$2.scrollDirection,
+      lastJumpDueToItemResize = _ref$2.lastJumpDueToItemResize,
+      listState = _ref[2].listState,
+      _ref$3 = _ref[3],
+      beforeUnshiftWith = _ref$3.beforeUnshiftWith,
+      sizes = _ref$3.sizes,
+      log = _ref[4].log;
+  var deviationOffset = u.streamFromEmitter(u.pipe(listState, u.withLatestFrom(lastJumpDueToItemResize), u.scan(function (_ref2, _ref3) {
+    var prevItems = _ref2[1],
+        prevTotalCount = _ref2[2];
+    var _ref3$ = _ref3[0],
+        items = _ref3$.items,
+        totalCount = _ref3$.totalCount,
+        lastJumpDueToItemResize = _ref3[1];
+    var newDev = 0;
+
+    if (prevTotalCount === totalCount) {
+      if (prevItems.length > 0 && items.length > 0) {
+        var firstItemIndex = items[0].originalIndex;
+        var prevFirstItemIndex = prevItems[0].originalIndex;
+        var atStart = firstItemIndex === 0 && prevFirstItemIndex === 0;
+        var onlyItem = items.length === 1;
+
+        if (!atStart) {
+          var _loop = function _loop(index) {
+            var item = items[index];
+            var prevItem = prevItems.find(function (pItem) {
+              return pItem.originalIndex === item.originalIndex;
+            });
+
+            if (!prevItem) {
+              return "continue";
+            }
+
+            if (item.offset !== prevItem.offset || onlyItem) {
+              newDev = item.offset - prevItem.offset + item.size - prevItem.size;
+              return "break";
+            }
+          };
+
+          for (var index = items.length - 1; index >= 0; index--) {
+            var _ret = _loop(index);
+
+            if (_ret === "continue") continue;
+            if (_ret === "break") break;
+          }
+        }
+      }
+
+      if (newDev !== 0) {
+        newDev += lastJumpDueToItemResize;
+      }
+    }
+
+    return [newDev, items, totalCount];
+  }, [0, [], 0]), u.filter(function (_ref4) {
+    var amount = _ref4[0];
+    return amount !== 0;
+  }), u.withLatestFrom(scrollTop, scrollDirection, scrollingInProgress, log, isAtBottom, atBottomState), u.filter(function (_ref5) {
+    var scrollTop = _ref5[1],
+        scrollDirection = _ref5[2],
+        scrollingInProgress = _ref5[3];
+    // console.log({ amount, scrollTop, scrollDirection, scrollingInProgress, isAtBottom, atBottomState })
+    return !scrollingInProgress && scrollTop !== 0 && scrollDirection === UP; // && (isAtBottom ? amount > 0 : true)
+  }), u.map(function (_ref6) {
+    var _ref6$ = _ref6[0],
+        amount = _ref6$[0],
+        log = _ref6[4];
+    log('Upward scrolling compensation', {
+      amount: amount
+    }, LogLevel.DEBUG);
+    return amount;
+  })));
+  u.connect(u.pipe(deviationOffset, u.withLatestFrom(deviation), u.map(function (_ref7) {
+    var amount = _ref7[0],
+        deviation = _ref7[1];
+    return deviation - amount;
+  })), deviation); // when the browser stops scrolling,
+  // restore the position and reset the glitching
+
+  u.subscribe(u.pipe(u.combineLatest(u.statefulStreamFromEmitter(isScrolling, false), deviation), u.filter(function (_ref8) {
+    var is = _ref8[0],
+        deviation = _ref8[1];
+    return !is && deviation !== 0;
+  }), u.map(function (_ref9) {
+    var deviation = _ref9[1];
+    return deviation;
+  }), u.throttleTime(1)), function (offset) {
+    if (offset > 0) {
+      u.publish(scrollBy, {
+        top: -offset,
+        behavior: 'auto'
+      });
+      u.publish(deviation, 0);
+    } else {
+      u.publish(deviation, 0);
+      u.publish(scrollBy, {
+        top: -offset,
+        behavior: 'auto'
+      });
+    }
+  });
+  u.connect(u.pipe(beforeUnshiftWith, u.withLatestFrom(sizes), u.map(function (_ref10) {
+    var offset = _ref10[0],
+        lastSize = _ref10[1].lastSize;
+    return offset * lastSize;
+  })), deviationOffset);
+  return {
+    deviation: deviation
+  };
+}, /*#__PURE__*/u.tup(domIOSystem, stateFlagsSystem, listStateSystem, sizeSystem, loggerSystem));
+
+var initialScrollTopSystem = /*#__PURE__*/u.system(function (_ref) {
+  var totalListHeight = _ref[0].totalListHeight,
+      didMount = _ref[1].didMount,
+      scrollTo = _ref[2].scrollTo;
+  var initialScrollTop = u.statefulStream(0);
+  u.subscribe(u.pipe(didMount, u.withLatestFrom(initialScrollTop), u.filter(function (_ref2) {
+    var offset = _ref2[1];
+    return offset !== 0;
+  }), u.map(function (_ref3) {
+    var offset = _ref3[1];
+    return {
+      top: offset
+    };
+  })), function (location) {
+    u.handleNext(u.pipe(totalListHeight, u.filter(function (val) {
+      return val !== 0;
+    })), function () {
+      setTimeout(function () {
+        u.publish(scrollTo, location);
+      });
+    });
+  });
+  return {
+    initialScrollTop: initialScrollTop
+  };
+}, /*#__PURE__*/u.tup(totalListHeightSystem, propsReadySystem, domIOSystem), {
+  singleton: true
+});
+
+var alignToBottomSystem = /*#__PURE__*/u.system(function (_ref) {
+  var viewportHeight = _ref[0].viewportHeight,
+      totalListHeight = _ref[1].totalListHeight;
+  var alignToBottom = u.statefulStream(false);
+  var paddingTopAddition = u.statefulStreamFromEmitter(u.pipe(u.combineLatest(alignToBottom, viewportHeight, totalListHeight), u.filter(function (_ref2) {
+    var enabled = _ref2[0];
+    return enabled;
+  }), u.map(function (_ref3) {
+    var viewportHeight = _ref3[1],
+        totalListHeight = _ref3[2];
+    return Math.max(0, viewportHeight - totalListHeight);
+  }), u.distinctUntilChanged()), 0);
+  return {
+    alignToBottom: alignToBottom,
+    paddingTopAddition: paddingTopAddition
+  };
+}, /*#__PURE__*/u.tup(domIOSystem, totalListHeightSystem), {
+  singleton: true
+});
+
+var windowScrollerSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      scrollTo = _ref$.scrollTo,
+      scrollContainerState = _ref$.scrollContainerState;
+  var windowScrollContainerState = u.stream();
+  var windowViewportRect = u.stream();
+  var windowScrollTo = u.stream();
+  var useWindowScroll = u.statefulStream(false);
+  var customScrollParent = u.statefulStream(undefined);
+  u.connect(u.pipe(u.combineLatest(windowScrollContainerState, windowViewportRect), u.map(function (_ref2) {
+    var _ref2$ = _ref2[0],
+        windowScrollTop = _ref2$[0],
+        scrollHeight = _ref2$[1],
+        offsetTop = _ref2[1].offsetTop;
+    return [Math.max(0, windowScrollTop - offsetTop), scrollHeight];
+  })), scrollContainerState);
+  u.connect(u.pipe(scrollTo, u.withLatestFrom(windowViewportRect), u.map(function (_ref3) {
+    var scrollTo = _ref3[0],
+        offsetTop = _ref3[1].offsetTop;
+    return _extends({}, scrollTo, {
+      top: scrollTo.top + offsetTop
+    });
+  })), windowScrollTo);
+  return {
+    // config
+    useWindowScroll: useWindowScroll,
+    customScrollParent: customScrollParent,
+    // input
+    windowScrollContainerState: windowScrollContainerState,
+    windowViewportRect: windowViewportRect,
+    // signals
+    windowScrollTo: windowScrollTo
+  };
+}, /*#__PURE__*/u.tup(domIOSystem));
+
+var scrollIntoViewSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      sizes = _ref$.sizes,
+      totalCount = _ref$.totalCount,
+      _ref$2 = _ref[1],
+      scrollTop = _ref$2.scrollTop,
+      viewportHeight = _ref$2.viewportHeight,
+      headerHeight = _ref$2.headerHeight,
+      scrollingInProgress = _ref$2.scrollingInProgress,
+      scrollToIndex = _ref[2].scrollToIndex;
+  var scrollIntoView = u.stream();
+  u.connect(u.pipe(scrollIntoView, u.withLatestFrom(sizes, viewportHeight, totalCount, headerHeight, scrollTop), u.map(function (_ref2) {
+    var _ref2$ = _ref2[0],
+        index = _ref2$.index,
+        _ref2$$behavior = _ref2$.behavior,
+        behavior = _ref2$$behavior === void 0 ? 'auto' : _ref2$$behavior,
+        done = _ref2$.done,
+        sizes = _ref2[1],
+        viewportHeight = _ref2[2],
+        totalCount = _ref2[3],
+        headerHeight = _ref2[4],
+        scrollTop = _ref2[5];
+    var lastIndex = totalCount - 1;
+    var location = null;
+    index = originalIndexFromItemIndex(index, sizes);
+    index = Math.max(0, index, Math.min(lastIndex, index));
+    var itemTop = offsetOf(index, sizes.offsetTree) + headerHeight;
+
+    if (itemTop < scrollTop) {
+      location = {
+        index: index,
+        behavior: behavior,
+        align: 'start'
+      };
+    } else {
+      var itemBottom = itemTop + findMaxKeyValue(sizes.sizeTree, index)[1];
+
+      if (itemBottom > scrollTop + viewportHeight) {
+        location = {
+          index: index,
+          behavior: behavior,
+          align: 'end'
+        };
+      }
+    }
+
+    if (location) {
+      done && u.handleNext(u.pipe(scrollingInProgress, u.skip(1), u.filter(function (value) {
+        return value === false;
+      })), done);
+    } else {
+      done && done();
+    }
+
+    return location;
+  }), u.filter(function (value) {
+    return value !== null;
+  })), scrollToIndex);
+  return {
+    scrollIntoView: scrollIntoView
+  };
+}, /*#__PURE__*/u.tup(sizeSystem, domIOSystem, scrollToIndexSystem, listStateSystem, loggerSystem), {
+  singleton: true
+});
+
+// fix this with 4.1 recursive conditional types
+
+var featureGroup1System = /*#__PURE__*/u.system(function (_ref) {
+  var sizeRange = _ref[0],
+      initialItemCount = _ref[1],
+      propsReady = _ref[2],
+      scrollSeek = _ref[3],
+      totalListHeight = _ref[4],
+      initialScrollTopSystem = _ref[5],
+      alignToBottom = _ref[6],
+      windowScroller = _ref[7],
+      scrollIntoView = _ref[8];
+  return _extends({}, sizeRange, initialItemCount, propsReady, scrollSeek, totalListHeight, initialScrollTopSystem, alignToBottom, windowScroller, scrollIntoView);
+}, /*#__PURE__*/u.tup(sizeRangeSystem, initialItemCountSystem, propsReadySystem, scrollSeekSystem, totalListHeightSystem, initialScrollTopSystem, alignToBottomSystem, windowScrollerSystem, scrollIntoViewSystem));
+var listSystem = /*#__PURE__*/u.system(function (_ref2) {
+  var _ref2$ = _ref2[0],
+      totalCount = _ref2$.totalCount,
+      sizeRanges = _ref2$.sizeRanges,
+      fixedItemSize = _ref2$.fixedItemSize,
+      defaultItemSize = _ref2$.defaultItemSize,
+      trackItemSizes = _ref2$.trackItemSizes,
+      itemSize = _ref2$.itemSize,
+      data = _ref2$.data,
+      firstItemIndex = _ref2$.firstItemIndex,
+      groupIndices = _ref2$.groupIndices,
+      statefulTotalCount = _ref2$.statefulTotalCount,
+      _ref2$2 = _ref2[1],
+      initialTopMostItemIndex = _ref2$2.initialTopMostItemIndex,
+      scrolledToInitialItem = _ref2$2.scrolledToInitialItem,
+      domIO = _ref2[2],
+      followOutput = _ref2[3],
+      _ref2$3 = _ref2[4],
+      listState = _ref2$3.listState,
+      topItemsIndexes = _ref2$3.topItemsIndexes,
+      flags = _objectWithoutPropertiesLoose(_ref2$3, ["listState", "topItemsIndexes"]),
+      scrollToIndex = _ref2[5].scrollToIndex,
+      topItemCount = _ref2[7].topItemCount,
+      groupCounts = _ref2[8].groupCounts,
+      featureGroup1 = _ref2[9],
+      log = _ref2[10];
+
+  u.connect(flags.rangeChanged, featureGroup1.scrollSeekRangeChanged);
+  u.connect(u.pipe(featureGroup1.windowViewportRect, u.map(u.prop('visibleHeight'))), domIO.viewportHeight);
+  return _extends({
+    // input
+    totalCount: totalCount,
+    data: data,
+    firstItemIndex: firstItemIndex,
+    sizeRanges: sizeRanges,
+    initialTopMostItemIndex: initialTopMostItemIndex,
+    scrolledToInitialItem: scrolledToInitialItem,
+    topItemsIndexes: topItemsIndexes,
+    topItemCount: topItemCount,
+    groupCounts: groupCounts,
+    fixedItemHeight: fixedItemSize,
+    defaultItemHeight: defaultItemSize
+  }, followOutput, {
+    // output
+    statefulTotalCount: statefulTotalCount,
+    listState: listState,
+    scrollToIndex: scrollToIndex,
+    trackItemSizes: trackItemSizes,
+    itemSize: itemSize,
+    groupIndices: groupIndices
+  }, flags, featureGroup1, domIO, log);
+}, /*#__PURE__*/u.tup(sizeSystem, initialTopMostItemIndexSystem, domIOSystem, followOutputSystem, listStateSystem, scrollToIndexSystem, upwardScrollFixSystem, topItemCountSystem, groupedListSystem, featureGroup1System, loggerSystem));
+
+function simpleMemoize(func) {
+  var called = false;
+  var result;
+  return function () {
+    if (!called) {
+      called = true;
+      result = func();
+    }
+
+    return result;
+  };
+}
+
+var WEBKIT_STICKY = '-webkit-sticky';
+var STICKY = 'sticky';
+var positionStickyCssValue = /*#__PURE__*/simpleMemoize(function () {
+  if (typeof document === 'undefined') {
+    return STICKY;
+  }
+
+  var node = document.createElement('div');
+  node.style.position = WEBKIT_STICKY;
+  return node.style.position === WEBKIT_STICKY ? WEBKIT_STICKY : STICKY;
+});
+
+function useWindowViewportRectRef(callback, customScrollParent) {
+  var viewportInfo = useRef(null);
+  var calculateInfo = useCallback(function (element) {
+    if (element === null) {
+      return;
+    }
+
+    var rect = element.getBoundingClientRect();
+    var visibleWidth = rect.width;
+    var visibleHeight, offsetTop;
+
+    if (customScrollParent) {
+      var customScrollParentRect = customScrollParent.getBoundingClientRect();
+      var deltaTop = rect.top - customScrollParentRect.top;
+      visibleHeight = customScrollParentRect.height - Math.max(0, deltaTop);
+      offsetTop = deltaTop + customScrollParent.scrollTop;
+    } else {
+      visibleHeight = window.innerHeight - Math.max(0, rect.top);
+      offsetTop = rect.top + window.pageYOffset;
+    }
+
+    viewportInfo.current = {
+      offsetTop: offsetTop,
+      visibleHeight: visibleHeight,
+      visibleWidth: visibleWidth
+    };
+    callback(viewportInfo.current);
+  }, [callback, customScrollParent]);
+
+  var _useSizeWithElRef = useSizeWithElRef(calculateInfo),
+      callbackRef = _useSizeWithElRef.callbackRef,
+      ref = _useSizeWithElRef.ref;
+
+  var scrollAndResizeEventHandler = useCallback(function () {
+    calculateInfo(ref.current);
+  }, [calculateInfo, ref]);
+  useEffect(function () {
+    if (customScrollParent) {
+      customScrollParent.addEventListener('scroll', scrollAndResizeEventHandler);
+      var observer = new ResizeObserver(scrollAndResizeEventHandler);
+      observer.observe(customScrollParent);
+      return function () {
+        customScrollParent.removeEventListener('scroll', scrollAndResizeEventHandler);
+        observer.unobserve(customScrollParent);
+      };
+    } else {
+      window.addEventListener('scroll', scrollAndResizeEventHandler);
+      window.addEventListener('resize', scrollAndResizeEventHandler);
+      return function () {
+        window.removeEventListener('scroll', scrollAndResizeEventHandler);
+        window.removeEventListener('resize', scrollAndResizeEventHandler);
+      };
+    }
+  }, [scrollAndResizeEventHandler, customScrollParent]);
+  return callbackRef;
+}
+
+function identity(value) {
+  return value;
+}
+var listComponentPropsSystem = /*#__PURE__*/system(function () {
+  var itemContent = statefulStream(function (index) {
+    return "Item " + index;
+  });
+  var context = statefulStream(null);
+  var groupContent = statefulStream(function (index) {
+    return "Group " + index;
+  });
+  var components = statefulStream({});
+  var computeItemKey = statefulStream(identity);
+  var headerFooterTag = statefulStream('div');
+  var scrollerRef = statefulStream(noop);
+
+  var distinctProp = function distinctProp(propName, defaultValue) {
+    if (defaultValue === void 0) {
+      defaultValue = null;
+    }
+
+    return statefulStreamFromEmitter(pipe(components, map(function (components) {
+      return components[propName];
+    }), distinctUntilChanged()), defaultValue);
+  };
+
+  return {
+    context: context,
+    itemContent: itemContent,
+    groupContent: groupContent,
+    components: components,
+    computeItemKey: computeItemKey,
+    headerFooterTag: headerFooterTag,
+    scrollerRef: scrollerRef,
+    FooterComponent: distinctProp('Footer'),
+    HeaderComponent: distinctProp('Header'),
+    TopItemListComponent: distinctProp('TopItemList'),
+    ListComponent: distinctProp('List', 'div'),
+    ItemComponent: distinctProp('Item', 'div'),
+    GroupComponent: distinctProp('Group', 'div'),
+    ScrollerComponent: distinctProp('Scroller', 'div'),
+    EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
+    ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder')
+  };
+});
+function addDeprecatedAlias(prop, message) {
+  var alias = stream();
+  subscribe(alias, function () {
+    return console.warn("react-virtuoso: You are using a deprecated property. " + message, 'color: red;', 'color: inherit;', 'color: blue;');
+  });
+  connect(alias, prop);
+  return alias;
+}
+var combinedSystem$2 = /*#__PURE__*/system(function (_ref) {
+  var listSystem = _ref[0],
+      propsSystem = _ref[1];
+  var deprecatedProps = {
+    item: addDeprecatedAlias(propsSystem.itemContent, 'Rename the %citem%c prop to %citemContent.'),
+    group: addDeprecatedAlias(propsSystem.groupContent, 'Rename the %cgroup%c prop to %cgroupContent.'),
+    topItems: addDeprecatedAlias(listSystem.topItemCount, 'Rename the %ctopItems%c prop to %ctopItemCount.'),
+    itemHeight: addDeprecatedAlias(listSystem.fixedItemHeight, 'Rename the %citemHeight%c prop to %cfixedItemHeight.'),
+    scrollingStateChange: addDeprecatedAlias(listSystem.isScrolling, 'Rename the %cscrollingStateChange%c prop to %cisScrolling.'),
+    adjustForPrependedItems: stream(),
+    maxHeightCacheSize: stream(),
+    footer: stream(),
+    header: stream(),
+    HeaderContainer: stream(),
+    FooterContainer: stream(),
+    ItemContainer: stream(),
+    ScrollContainer: stream(),
+    GroupContainer: stream(),
+    ListContainer: stream(),
+    emptyComponent: stream(),
+    scrollSeek: stream()
+  };
+  subscribe(deprecatedProps.adjustForPrependedItems, function () {
+    console.warn("react-virtuoso: adjustForPrependedItems is no longer supported. Use the firstItemIndex property instead - https://virtuoso.dev/prepend-items.", 'color: red;', 'color: inherit;', 'color: blue;');
+  });
+  subscribe(deprecatedProps.maxHeightCacheSize, function () {
+    console.warn("react-virtuoso: maxHeightCacheSize is no longer necessary. Setting it has no effect - remove it from your code.");
+  });
+  subscribe(deprecatedProps.HeaderContainer, function () {
+    console.warn("react-virtuoso: HeaderContainer is deprecated. Use headerFooterTag if you want to change the wrapper of the header component and pass components.Header to change its contents.");
+  });
+  subscribe(deprecatedProps.FooterContainer, function () {
+    console.warn("react-virtuoso: FooterContainer is deprecated. Use headerFooterTag if you want to change the wrapper of the footer component and pass components.Footer to change its contents.");
+  });
+
+  function deprecateComponentProp(stream, componentName, propName) {
+    connect(pipe(stream, withLatestFrom(propsSystem.components), map(function (_ref2) {
+      var _extends2;
+
+      var comp = _ref2[0],
+          components = _ref2[1];
+      console.warn("react-virtuoso: " + propName + " property is deprecated. Pass components." + componentName + " instead."); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+      return _extends({}, components, (_extends2 = {}, _extends2[componentName] = comp, _extends2));
+    })), propsSystem.components);
+  }
+
+  subscribe(deprecatedProps.scrollSeek, function (_ref3) {
+    var placeholder = _ref3.placeholder,
+        config = _objectWithoutPropertiesLoose(_ref3, ["placeholder"]);
+
+    console.warn("react-virtuoso: scrollSeek property is deprecated. Pass scrollSeekConfiguration and specify the placeholder in components.ScrollSeekPlaceholder instead."); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+    publish(propsSystem.components, _extends({}, getValue(propsSystem.components), {
+      ScrollSeekPlaceholder: placeholder
+    }));
+    publish(listSystem.scrollSeekConfiguration, config);
+  });
+  deprecateComponentProp(deprecatedProps.footer, 'Footer', 'footer');
+  deprecateComponentProp(deprecatedProps.header, 'Header', 'header');
+  deprecateComponentProp(deprecatedProps.ItemContainer, 'Item', 'ItemContainer');
+  deprecateComponentProp(deprecatedProps.ListContainer, 'List', 'ListContainer');
+  deprecateComponentProp(deprecatedProps.ScrollContainer, 'Scroller', 'ScrollContainer');
+  deprecateComponentProp(deprecatedProps.emptyComponent, 'EmptyPlaceholder', 'emptyComponent');
+  deprecateComponentProp(deprecatedProps.GroupContainer, 'Group', 'GroupContainer');
+  return _extends({}, listSystem, propsSystem, deprecatedProps);
+}, /*#__PURE__*/tup(listSystem, listComponentPropsSystem));
+
+var DefaultScrollSeekPlaceholder$1 = function DefaultScrollSeekPlaceholder(_ref4) {
+  var height = _ref4.height;
+  return React.createElement("div", {
+    style: {
+      height: height
+    }
+  });
+};
+
+var GROUP_STYLE = {
+  position: /*#__PURE__*/positionStickyCssValue(),
+  zIndex: 1,
+  overflowAnchor: 'none'
+};
+var Items$1 = /*#__PURE__*/React.memo(function VirtuosoItems(_ref5) {
+  var _ref5$showTopList = _ref5.showTopList,
+      showTopList = _ref5$showTopList === void 0 ? false : _ref5$showTopList;
+  var listState = useEmitterValue$2('listState');
+  var deviation = useEmitterValue$2('deviation');
+  var sizeRanges = usePublisher$2('sizeRanges');
+  var useWindowScroll = useEmitterValue$2('useWindowScroll');
+  var customScrollParent = useEmitterValue$2('customScrollParent');
+  var windowScrollContainerStateCallback = usePublisher$2('windowScrollContainerState');
+
+  var _scrollContainerStateCallback = usePublisher$2('scrollContainerState');
+
+  var scrollContainerStateCallback = customScrollParent || useWindowScroll ? windowScrollContainerStateCallback : _scrollContainerStateCallback;
+  var itemContent = useEmitterValue$2('itemContent');
+  var context = useEmitterValue$2('context');
+  var groupContent = useEmitterValue$2('groupContent');
+  var trackItemSizes = useEmitterValue$2('trackItemSizes');
+  var itemSize = useEmitterValue$2('itemSize');
+  var log = useEmitterValue$2('log');
+  var ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, showTopList ? noop : scrollContainerStateCallback, log, customScrollParent);
+  var EmptyPlaceholder = useEmitterValue$2('EmptyPlaceholder');
+  var ScrollSeekPlaceholder = useEmitterValue$2('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder$1;
+  var ListComponent = useEmitterValue$2('ListComponent');
+  var ItemComponent = useEmitterValue$2('ItemComponent');
+  var GroupComponent = useEmitterValue$2('GroupComponent');
+  var computeItemKey = useEmitterValue$2('computeItemKey');
+  var isSeeking = useEmitterValue$2('isSeeking');
+  var hasGroups = useEmitterValue$2('groupIndices').length > 0;
+  var paddingTopAddition = useEmitterValue$2('paddingTopAddition');
+  var firstItemIndex = useEmitterValue$2('firstItemIndex');
+  var statefulTotalCount = useEmitterValue$2('statefulTotalCount');
+  var containerStyle = showTopList ? {} : {
+    boxSizing: 'border-box',
+    paddingTop: listState.offsetTop + paddingTopAddition,
+    paddingBottom: listState.offsetBottom,
+    marginTop: deviation
+  };
+
+  if (!showTopList && statefulTotalCount === 0 && EmptyPlaceholder) {
+    return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+  }
+
+  return createElement(ListComponent, _extends({}, contextPropIfNotDomElement(ListComponent, context), {
+    ref: ref,
+    style: containerStyle,
+    'data-test-id': showTopList ? 'virtuoso-top-item-list' : 'virtuoso-item-list'
+  }), (showTopList ? listState.topItems : listState.items).map(function (item) {
+    var index = item.originalIndex;
+    var key = computeItemKey(index + firstItemIndex, item.data, context);
+
+    if (isSeeking) {
+      return createElement(ScrollSeekPlaceholder, _extends({}, contextPropIfNotDomElement(ScrollSeekPlaceholder, context), {
+        key: key,
+        index: item.index,
+        height: item.size,
+        type: item.type || 'item'
+      }, item.type === 'group' ? {} : {
+        groupIndex: item.groupIndex
+      }));
+    }
+
+    if (item.type === 'group') {
+      return createElement(GroupComponent, _extends({}, contextPropIfNotDomElement(GroupComponent, context), {
+        key: key,
+        'data-index': index,
+        'data-known-size': item.size,
+        'data-item-index': item.index,
+        style: GROUP_STYLE
+      }), groupContent(item.index));
+    } else {
+      return createElement(ItemComponent, _extends({}, contextPropIfNotDomElement(ItemComponent, context), {
+        key: key,
+        'data-index': index,
+        'data-known-size': item.size,
+        'data-item-index': item.index,
+        'data-item-group-index': item.groupIndex,
+        style: {
+          overflowAnchor: 'none'
+        }
+      }), hasGroups ? itemContent(item.index, item.groupIndex, item.data, context) : itemContent(item.index, item.data, context));
+    }
+  }));
+});
+var scrollerStyle = {
+  height: '100%',
+  outline: 'none',
+  overflowY: 'auto',
+  position: 'relative',
+  WebkitOverflowScrolling: 'touch'
+};
+var viewportStyle = {
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  top: 0
+};
+var topItemListStyle = {
+  width: '100%',
+  position: /*#__PURE__*/positionStickyCssValue(),
+  top: 0
+};
+function contextPropIfNotDomElement(element, context) {
+  if (typeof element === 'string') {
+    return undefined;
+  }
+
+  return {
+    context: context
+  };
+}
+var Header = /*#__PURE__*/React.memo(function VirtuosoHeader() {
+  var Header = useEmitterValue$2('HeaderComponent');
+  var headerHeight = usePublisher$2('headerHeight');
+  var headerFooterTag = useEmitterValue$2('headerFooterTag');
+  var ref = useSize(function (el) {
+    return headerHeight(correctItemSize(el, 'height'));
+  });
+  var context = useEmitterValue$2('context');
+  return Header ? createElement(headerFooterTag, {
+    ref: ref
+  }, createElement(Header, contextPropIfNotDomElement(Header, context))) : null;
+});
+var Footer = /*#__PURE__*/React.memo(function VirtuosoFooter() {
+  var Footer = useEmitterValue$2('FooterComponent');
+  var footerHeight = usePublisher$2('footerHeight');
+  var headerFooterTag = useEmitterValue$2('headerFooterTag');
+  var ref = useSize(function (el) {
+    return footerHeight(correctItemSize(el, 'height'));
+  });
+  var context = useEmitterValue$2('context');
+  return Footer ? createElement(headerFooterTag, {
+    ref: ref
+  }, createElement(Footer, contextPropIfNotDomElement(Footer, context))) : null;
+});
+function buildScroller(_ref6) {
+  var usePublisher = _ref6.usePublisher,
+      useEmitter = _ref6.useEmitter,
+      useEmitterValue = _ref6.useEmitterValue;
+  var Scroller = React.memo(function VirtuosoScroller(_ref7) {
+    var style = _ref7.style,
+        children = _ref7.children,
+        props = _objectWithoutPropertiesLoose(_ref7, ["style", "children"]);
+
+    var scrollContainerStateCallback = usePublisher('scrollContainerState');
+    var ScrollerComponent = useEmitterValue('ScrollerComponent');
+    var smoothScrollTargetReached = usePublisher('smoothScrollTargetReached');
+    var scrollerRefCallback = useEmitterValue('scrollerRef');
+    var context = useEmitterValue('context');
+
+    var _useScrollTop = useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, scrollerRefCallback),
+        scrollerRef = _useScrollTop.scrollerRef,
+        scrollByCallback = _useScrollTop.scrollByCallback,
+        scrollToCallback = _useScrollTop.scrollToCallback;
+
+    useEmitter('scrollTo', scrollToCallback);
+    useEmitter('scrollBy', scrollByCallback);
+    return createElement(ScrollerComponent, _extends({
+      ref: scrollerRef,
+      style: _extends({}, scrollerStyle, style),
+      'data-test-id': 'virtuoso-scroller',
+      'data-virtuoso-scroller': true,
+      tabIndex: 0
+    }, props, contextPropIfNotDomElement(ScrollerComponent, context)), children);
+  });
+  return Scroller;
+}
+function buildWindowScroller(_ref8) {
+  var usePublisher = _ref8.usePublisher,
+      useEmitter = _ref8.useEmitter,
+      useEmitterValue = _ref8.useEmitterValue;
+  var Scroller = React.memo(function VirtuosoWindowScroller(_ref9) {
+    var style = _ref9.style,
+        children = _ref9.children,
+        props = _objectWithoutPropertiesLoose(_ref9, ["style", "children"]);
+
+    var scrollContainerStateCallback = usePublisher('windowScrollContainerState');
+    var ScrollerComponent = useEmitterValue('ScrollerComponent');
+    var smoothScrollTargetReached = usePublisher('smoothScrollTargetReached');
+    var totalListHeight = useEmitterValue('totalListHeight');
+    var deviation = useEmitterValue('deviation');
+    var customScrollParent = useEmitterValue('customScrollParent');
+    var context = useEmitterValue('context');
+
+    var _useScrollTop2 = useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, ScrollerComponent, noop, customScrollParent),
+        scrollerRef = _useScrollTop2.scrollerRef,
+        scrollByCallback = _useScrollTop2.scrollByCallback,
+        scrollToCallback = _useScrollTop2.scrollToCallback;
+
+    useIsomorphicLayoutEffect(function () {
+      scrollerRef.current = customScrollParent ? customScrollParent : window;
+      return function () {
+        scrollerRef.current = null;
+      };
+    }, [scrollerRef, customScrollParent]);
+    useEmitter('windowScrollTo', scrollToCallback);
+    useEmitter('scrollBy', scrollByCallback);
+    return createElement(ScrollerComponent, _extends({
+      style: _extends({
+        position: 'relative'
+      }, style, totalListHeight !== 0 ? {
+        height: totalListHeight + deviation
+      } : {}),
+      'data-virtuoso-scroller': true
+    }, props, contextPropIfNotDomElement(ScrollerComponent, context)), children);
+  });
+  return Scroller;
+}
+
+var Viewport$2 = function Viewport(_ref10) {
+  var children = _ref10.children;
+  var viewportHeight = usePublisher$2('viewportHeight');
+  var viewportRef = useSize(compose(viewportHeight, function (el) {
+    return correctItemSize(el, 'height');
+  }));
+  return React.createElement("div", {
+    style: viewportStyle,
+    ref: viewportRef,
+    "data-viewport-type": "element"
+  }, children);
+};
+
+var WindowViewport$2 = function WindowViewport(_ref11) {
+  var children = _ref11.children;
+  var windowViewportRect = usePublisher$2('windowViewportRect');
+  var customScrollParent = useEmitterValue$2('customScrollParent');
+  var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+  return React.createElement("div", {
+    ref: viewportRef,
+    style: viewportStyle,
+    "data-viewport-type": "window"
+  }, children);
+};
+
+var TopItemListContainer = function TopItemListContainer(_ref12) {
+  var children = _ref12.children;
+  var TopItemList = useEmitterValue$2('TopItemListComponent');
+  var headerHeight = useEmitterValue$2('headerHeight');
+
+  var style = _extends({}, topItemListStyle, {
+    marginTop: headerHeight + "px"
+  });
+
+  var context = useEmitterValue$2('context');
+  return createElement(TopItemList || 'div', {
+    style: style,
+    context: context
+  }, children);
+};
+
+var ListRoot = /*#__PURE__*/React.memo(function VirtuosoRoot(props) {
+  var useWindowScroll = useEmitterValue$2('useWindowScroll');
+  var showTopList = useEmitterValue$2('topItemsIndexes').length > 0;
+  var customScrollParent = useEmitterValue$2('customScrollParent');
+  var TheScroller = customScrollParent || useWindowScroll ? WindowScroller$2 : Scroller$2;
+  var TheViewport = customScrollParent || useWindowScroll ? WindowViewport$2 : Viewport$2;
+  return React.createElement(TheScroller, _extends({}, props), React.createElement(TheViewport, null, React.createElement(Header, null), React.createElement(Items$1, null), React.createElement(Footer, null)), showTopList && React.createElement(TopItemListContainer, null, React.createElement(Items$1, {
+    showTopList: true
+  })));
+});
+
+var _systemToComponent$2 = /*#__PURE__*/systemToComponent(combinedSystem$2, {
+  required: {},
+  optional: {
+    context: 'context',
+    followOutput: 'followOutput',
+    firstItemIndex: 'firstItemIndex',
+    itemContent: 'itemContent',
+    groupContent: 'groupContent',
+    overscan: 'overscan',
+    increaseViewportBy: 'increaseViewportBy',
+    totalCount: 'totalCount',
+    topItemCount: 'topItemCount',
+    initialTopMostItemIndex: 'initialTopMostItemIndex',
+    components: 'components',
+    groupCounts: 'groupCounts',
+    atBottomThreshold: 'atBottomThreshold',
+    computeItemKey: 'computeItemKey',
+    defaultItemHeight: 'defaultItemHeight',
+    fixedItemHeight: 'fixedItemHeight',
+    itemSize: 'itemSize',
+    scrollSeekConfiguration: 'scrollSeekConfiguration',
+    headerFooterTag: 'headerFooterTag',
+    data: 'data',
+    initialItemCount: 'initialItemCount',
+    initialScrollTop: 'initialScrollTop',
+    alignToBottom: 'alignToBottom',
+    useWindowScroll: 'useWindowScroll',
+    customScrollParent: 'customScrollParent',
+    scrollerRef: 'scrollerRef',
+    logLevel: 'logLevel',
+    // deprecated
+    item: 'item',
+    group: 'group',
+    topItems: 'topItems',
+    itemHeight: 'itemHeight',
+    scrollingStateChange: 'scrollingStateChange',
+    maxHeightCacheSize: 'maxHeightCacheSize',
+    footer: 'footer',
+    header: 'header',
+    ItemContainer: 'ItemContainer',
+    ScrollContainer: 'ScrollContainer',
+    ListContainer: 'ListContainer',
+    GroupContainer: 'GroupContainer',
+    emptyComponent: 'emptyComponent',
+    HeaderContainer: 'HeaderContainer',
+    FooterContainer: 'FooterContainer',
+    scrollSeek: 'scrollSeek'
+  },
+  methods: {
+    scrollToIndex: 'scrollToIndex',
+    scrollIntoView: 'scrollIntoView',
+    scrollTo: 'scrollTo',
+    scrollBy: 'scrollBy',
+    adjustForPrependedItems: 'adjustForPrependedItems'
+  },
+  events: {
+    isScrolling: 'isScrolling',
+    endReached: 'endReached',
+    startReached: 'startReached',
+    rangeChanged: 'rangeChanged',
+    atBottomStateChange: 'atBottomStateChange',
+    atTopStateChange: 'atTopStateChange',
+    totalListHeightChanged: 'totalListHeightChanged',
+    itemsRendered: 'itemsRendered',
+    groupIndices: 'groupIndices'
+  }
+}, ListRoot),
+    List = _systemToComponent$2.Component,
+    usePublisher$2 = _systemToComponent$2.usePublisher,
+    useEmitterValue$2 = _systemToComponent$2.useEmitterValue,
+    useEmitter$2 = _systemToComponent$2.useEmitter;
+var Scroller$2 = /*#__PURE__*/buildScroller({
+  usePublisher: usePublisher$2,
+  useEmitterValue: useEmitterValue$2,
+  useEmitter: useEmitter$2
+});
+var WindowScroller$2 = /*#__PURE__*/buildWindowScroller({
+  usePublisher: usePublisher$2,
+  useEmitterValue: useEmitterValue$2,
+  useEmitter: useEmitter$2
+});
+
+var Virtuoso = List;
+
+var GroupedVirtuoso = List;
+
+var tableComponentPropsSystem = /*#__PURE__*/system(function () {
+  var itemContent = statefulStream(function (index) {
+    return React.createElement("td", null, "Item $", index);
+  });
+  var context = statefulStream(null);
+  var fixedHeaderContent = statefulStream(null);
+  var components = statefulStream({});
+  var computeItemKey = statefulStream(identity);
+  var scrollerRef = statefulStream(noop);
+
+  var distinctProp = function distinctProp(propName, defaultValue) {
+    if (defaultValue === void 0) {
+      defaultValue = null;
+    }
+
+    return statefulStreamFromEmitter(pipe(components, map(function (components) {
+      return components[propName];
+    }), distinctUntilChanged()), defaultValue);
+  };
+
+  return {
+    context: context,
+    itemContent: itemContent,
+    fixedHeaderContent: fixedHeaderContent,
+    components: components,
+    computeItemKey: computeItemKey,
+    scrollerRef: scrollerRef,
+    TableComponent: distinctProp('Table', 'table'),
+    TableHeadComponent: distinctProp('TableHead', 'thead'),
+    TableBodyComponent: distinctProp('TableBody', 'tbody'),
+    TableRowComponent: distinctProp('TableRow', 'tr'),
+    ScrollerComponent: distinctProp('Scroller', 'div'),
+    EmptyPlaceholder: distinctProp('EmptyPlaceholder'),
+    ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder')
+  };
+});
+var combinedSystem$1 = /*#__PURE__*/system(function (_ref) {
+  var listSystem = _ref[0],
+      propsSystem = _ref[1];
+  return _extends({}, listSystem, propsSystem);
+}, /*#__PURE__*/tup(listSystem, tableComponentPropsSystem));
+
+var DefaultScrollSeekPlaceholder = function DefaultScrollSeekPlaceholder(_ref2) {
+  var height = _ref2.height;
+  return React.createElement("tr", null, React.createElement("td", {
+    style: {
+      height: height
+    }
+  }));
+};
+
+var FillerRow = function FillerRow(_ref3) {
+  var height = _ref3.height;
+  return React.createElement("tr", null, React.createElement("td", {
+    style: {
+      height: height,
+      padding: 0,
+      border: 0
+    }
+  }));
+};
+
+var Items = /*#__PURE__*/React.memo(function VirtuosoItems() {
+  var listState = useEmitterValue$1('listState');
+  var deviation = useEmitterValue$1('deviation');
+  var sizeRanges = usePublisher$1('sizeRanges');
+  var useWindowScroll = useEmitterValue$1('useWindowScroll');
+  var customScrollParent = useEmitterValue$1('customScrollParent');
+  var windowScrollContainerStateCallback = usePublisher$1('windowScrollContainerState');
+
+  var _scrollContainerStateCallback = usePublisher$1('scrollContainerState');
+
+  var scrollContainerStateCallback = customScrollParent || useWindowScroll ? windowScrollContainerStateCallback : _scrollContainerStateCallback;
+  var itemContent = useEmitterValue$1('itemContent');
+  var trackItemSizes = useEmitterValue$1('trackItemSizes');
+  var itemSize = useEmitterValue$1('itemSize');
+  var log = useEmitterValue$1('log');
+  var ref = useChangedListContentsSizes(sizeRanges, itemSize, trackItemSizes, scrollContainerStateCallback, log, customScrollParent);
+  var EmptyPlaceholder = useEmitterValue$1('EmptyPlaceholder');
+  var ScrollSeekPlaceholder = useEmitterValue$1('ScrollSeekPlaceholder') || DefaultScrollSeekPlaceholder;
+  var TableBodyComponent = useEmitterValue$1('TableBodyComponent');
+  var TableRowComponent = useEmitterValue$1('TableRowComponent');
+  var computeItemKey = useEmitterValue$1('computeItemKey');
+  var isSeeking = useEmitterValue$1('isSeeking');
+  var paddingTopAddition = useEmitterValue$1('paddingTopAddition');
+  var firstItemIndex = useEmitterValue$1('firstItemIndex');
+  var statefulTotalCount = useEmitterValue$1('statefulTotalCount');
+  var context = useEmitterValue$1('context');
+
+  if (statefulTotalCount === 0 && EmptyPlaceholder) {
+    return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+  }
+
+  var paddingTop = listState.offsetTop + paddingTopAddition + deviation;
+  var paddingBottom = listState.offsetBottom;
+  var paddingTopEl = paddingTop > 0 ? React.createElement(FillerRow, {
+    height: paddingTop,
+    key: "padding-top"
+  }) : null;
+  var paddingBottomEl = paddingBottom > 0 ? React.createElement(FillerRow, {
+    height: paddingBottom,
+    key: "padding-bottom"
+  }) : null;
+  var items = listState.items.map(function (item) {
+    var index = item.originalIndex;
+    var key = computeItemKey(index + firstItemIndex, item.data, context);
+
+    if (isSeeking) {
+      return createElement(ScrollSeekPlaceholder, _extends({}, contextPropIfNotDomElement(ScrollSeekPlaceholder, context), {
+        key: key,
+        index: item.index,
+        height: item.size,
+        type: item.type || 'item'
+      }));
+    }
+
+    return createElement(TableRowComponent, _extends({}, contextPropIfNotDomElement(TableRowComponent, context), {
+      key: key,
+      'data-index': index,
+      'data-known-size': item.size,
+      'data-item-index': item.index,
+      style: {
+        overflowAnchor: 'none'
+      }
+    }), itemContent(item.index, item.data, context));
+  });
+  return createElement(TableBodyComponent, _extends({
+    ref: ref,
+    'data-test-id': 'virtuoso-item-list'
+  }, contextPropIfNotDomElement(TableBodyComponent, context)), [paddingTopEl].concat(items, [paddingBottomEl]));
+});
+
+var Viewport$1 = function Viewport(_ref4) {
+  var children = _ref4.children;
+  var viewportHeight = usePublisher$1('viewportHeight');
+  var viewportRef = useSize(compose(viewportHeight, function (el) {
+    return correctItemSize(el, 'height');
+  }));
+  return React.createElement("div", {
+    style: viewportStyle,
+    ref: viewportRef,
+    "data-viewport-type": "element"
+  }, children);
+};
+
+var WindowViewport$1 = function WindowViewport(_ref5) {
+  var children = _ref5.children;
+  var windowViewportRect = usePublisher$1('windowViewportRect');
+  var customScrollParent = useEmitterValue$1('customScrollParent');
+  var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+  return React.createElement("div", {
+    ref: viewportRef,
+    style: viewportStyle,
+    "data-viewport-type": "window"
+  }, children);
+};
+
+var TableRoot = /*#__PURE__*/React.memo(function TableVirtuosoRoot(props) {
+  var useWindowScroll = useEmitterValue$1('useWindowScroll');
+  var customScrollParent = useEmitterValue$1('customScrollParent');
+  var fixedHeaderHeight = usePublisher$1('fixedHeaderHeight');
+  var fixedHeaderContent = useEmitterValue$1('fixedHeaderContent');
+  var context = useEmitterValue$1('context');
+  var theadRef = useSize(compose(fixedHeaderHeight, function (el) {
+    return correctItemSize(el, 'height');
+  }));
+  var TheScroller = customScrollParent || useWindowScroll ? WindowScroller$1 : Scroller$1;
+  var TheViewport = customScrollParent || useWindowScroll ? WindowViewport$1 : Viewport$1;
+  var TheTable = useEmitterValue$1('TableComponent');
+  var TheTHead = useEmitterValue$1('TableHeadComponent');
+  var theHead = fixedHeaderContent ? React.createElement(TheTHead, _extends({
+    key: 'TableHead',
+    style: {
+      zIndex: 1,
+      position: 'sticky',
+      top: 0
+    },
+    ref: theadRef
+  }, contextPropIfNotDomElement(TheTHead, context)), fixedHeaderContent()) : null;
+  return React.createElement(TheScroller, _extends({}, props), React.createElement(TheViewport, null, React.createElement(TheTable, _extends({
+    style: {
+      borderSpacing: 0
+    }
+  }, contextPropIfNotDomElement(TheTable, context)), [theHead, React.createElement(Items, {
+    key: "TableBody"
+  })])));
+});
+
+var _systemToComponent$1 = /*#__PURE__*/systemToComponent(combinedSystem$1, {
+  required: {},
+  optional: {
+    context: 'context',
+    followOutput: 'followOutput',
+    firstItemIndex: 'firstItemIndex',
+    itemContent: 'itemContent',
+    fixedHeaderContent: 'fixedHeaderContent',
+    overscan: 'overscan',
+    increaseViewportBy: 'increaseViewportBy',
+    totalCount: 'totalCount',
+    topItemCount: 'topItemCount',
+    initialTopMostItemIndex: 'initialTopMostItemIndex',
+    components: 'components',
+    groupCounts: 'groupCounts',
+    atBottomThreshold: 'atBottomThreshold',
+    computeItemKey: 'computeItemKey',
+    defaultItemHeight: 'defaultItemHeight',
+    fixedItemHeight: 'fixedItemHeight',
+    itemSize: 'itemSize',
+    scrollSeekConfiguration: 'scrollSeekConfiguration',
+    data: 'data',
+    initialItemCount: 'initialItemCount',
+    initialScrollTop: 'initialScrollTop',
+    alignToBottom: 'alignToBottom',
+    useWindowScroll: 'useWindowScroll',
+    customScrollParent: 'customScrollParent',
+    scrollerRef: 'scrollerRef',
+    logLevel: 'logLevel'
+  },
+  methods: {
+    scrollToIndex: 'scrollToIndex',
+    scrollIntoView: 'scrollIntoView',
+    scrollTo: 'scrollTo',
+    scrollBy: 'scrollBy'
+  },
+  events: {
+    isScrolling: 'isScrolling',
+    endReached: 'endReached',
+    startReached: 'startReached',
+    rangeChanged: 'rangeChanged',
+    atBottomStateChange: 'atBottomStateChange',
+    atTopStateChange: 'atTopStateChange',
+    totalListHeightChanged: 'totalListHeightChanged',
+    itemsRendered: 'itemsRendered',
+    groupIndices: 'groupIndices'
+  }
+}, TableRoot),
+    Table = _systemToComponent$1.Component,
+    usePublisher$1 = _systemToComponent$1.usePublisher,
+    useEmitterValue$1 = _systemToComponent$1.useEmitterValue,
+    useEmitter$1 = _systemToComponent$1.useEmitter;
+var Scroller$1 = /*#__PURE__*/buildScroller({
+  usePublisher: usePublisher$1,
+  useEmitterValue: useEmitterValue$1,
+  useEmitter: useEmitter$1
+});
+var WindowScroller$1 = /*#__PURE__*/buildWindowScroller({
+  usePublisher: usePublisher$1,
+  useEmitterValue: useEmitterValue$1,
+  useEmitter: useEmitter$1
+});
+
+var TableVirtuoso = Table;
+
+var INITIAL_GRID_STATE = {
+  items: [],
+  offsetBottom: 0,
+  offsetTop: 0,
+  top: 0,
+  bottom: 0,
+  itemHeight: 0,
+  itemWidth: 0
+};
+var PROBE_GRID_STATE = {
+  items: [{
+    index: 0
+  }],
+  offsetBottom: 0,
+  offsetTop: 0,
+  top: 0,
+  bottom: 0,
+  itemHeight: 0,
+  itemWidth: 0
+};
+var ceil = Math.ceil,
+    floor = Math.floor,
+    min = Math.min,
+    max = Math.max;
+
+function buildItems(startIndex, endIndex) {
+  return Array.from({
+    length: endIndex - startIndex + 1
+  }).map(function (_, i) {
+    return {
+      index: i + startIndex
+    };
+  });
+}
+
+var gridSystem = /*#__PURE__*/u.system(function (_ref) {
+  var _ref$ = _ref[0],
+      overscan = _ref$.overscan,
+      visibleRange = _ref$.visibleRange,
+      listBoundary = _ref$.listBoundary,
+      _ref$2 = _ref[1],
+      scrollTop = _ref$2.scrollTop,
+      viewportHeight = _ref$2.viewportHeight,
+      scrollBy = _ref$2.scrollBy,
+      scrollTo = _ref$2.scrollTo,
+      smoothScrollTargetReached = _ref$2.smoothScrollTargetReached,
+      scrollContainerState = _ref$2.scrollContainerState,
+      stateFlags = _ref[2],
+      scrollSeek = _ref[3],
+      _ref$3 = _ref[4],
+      propsReady = _ref$3.propsReady,
+      didMount = _ref$3.didMount,
+      _ref$4 = _ref[5],
+      windowViewportRect = _ref$4.windowViewportRect,
+      windowScrollTo = _ref$4.windowScrollTo,
+      useWindowScroll = _ref$4.useWindowScroll,
+      customScrollParent = _ref$4.customScrollParent,
+      windowScrollContainerState = _ref$4.windowScrollContainerState;
+  var totalCount = u.statefulStream(0);
+  var initialItemCount = u.statefulStream(0);
+  var gridState = u.statefulStream(INITIAL_GRID_STATE);
+  var viewportDimensions = u.statefulStream({
+    height: 0,
+    width: 0
+  });
+  var itemDimensions = u.statefulStream({
+    height: 0,
+    width: 0
+  });
+  var scrollToIndex = u.stream();
+  var scrollHeight = u.stream();
+  var deviation = u.statefulStream(0);
+  u.connect(u.pipe(didMount, u.withLatestFrom(initialItemCount), u.filter(function (_ref2) {
+    var count = _ref2[1];
+    return count !== 0;
+  }), u.map(function (_ref3) {
+    var count = _ref3[1];
+    return {
+      items: buildItems(0, count - 1),
+      top: 0,
+      bottom: 0,
+      offsetBottom: 0,
+      offsetTop: 0,
+      itemHeight: 0,
+      itemWidth: 0
+    };
+  })), gridState);
+  u.connect(u.pipe(u.combineLatest(u.duc(totalCount), visibleRange, u.duc(itemDimensions, function (prev, next) {
+    return prev && prev.width === next.width && prev.height === next.height;
+  })), u.withLatestFrom(viewportDimensions), u.map(function (_ref4) {
+    var _ref4$ = _ref4[0],
+        totalCount = _ref4$[0],
+        _ref4$$ = _ref4$[1],
+        startOffset = _ref4$$[0],
+        endOffset = _ref4$$[1],
+        item = _ref4$[2],
+        viewport = _ref4[1];
+    var itemHeight = item.height,
+        itemWidth = item.width;
+    var viewportWidth = viewport.width;
+
+    if (totalCount === 0 || viewportWidth === 0) {
+      return INITIAL_GRID_STATE;
+    }
+
+    if (itemWidth === 0) {
+      return PROBE_GRID_STATE;
+    }
+
+    var perRow = Math.floor(viewportWidth / itemWidth);
+    var startIndex = perRow * floor(startOffset / itemHeight);
+    var endIndex = perRow * ceil(endOffset / itemHeight) - 1;
+    endIndex = min(totalCount - 1, endIndex);
+    startIndex = min(endIndex, max(0, startIndex));
+    var items = buildItems(startIndex, endIndex);
+
+    var _gridLayout = gridLayout(viewport, item, items),
+        top = _gridLayout.top,
+        bottom = _gridLayout.bottom;
+
+    var totalHeight = ceil(totalCount / perRow) * itemHeight;
+    var offsetBottom = totalHeight - bottom;
+    return {
+      items: items,
+      offsetTop: top,
+      offsetBottom: offsetBottom,
+      top: top,
+      bottom: bottom,
+      itemHeight: itemHeight,
+      itemWidth: itemWidth
+    };
+  })), gridState);
+  u.connect(u.pipe(viewportDimensions, u.map(function (_ref5) {
+    var height = _ref5.height;
+    return height;
+  })), viewportHeight);
+  u.connect(u.pipe(u.combineLatest(viewportDimensions, itemDimensions, gridState), u.map(function (_ref6) {
+    var viewportDimensions = _ref6[0],
+        item = _ref6[1],
+        items = _ref6[2].items;
+
+    var _gridLayout2 = gridLayout(viewportDimensions, item, items),
+        top = _gridLayout2.top,
+        bottom = _gridLayout2.bottom;
+
+    return [top, bottom];
+  }), u.distinctUntilChanged(tupleComparator)), listBoundary);
+  var endReached = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_ref7) {
+    var items = _ref7.items;
+    return items.length > 0;
+  }), u.withLatestFrom(totalCount), u.filter(function (_ref8) {
+    var items = _ref8[0].items,
+        totalCount = _ref8[1];
+    return items[items.length - 1].index === totalCount - 1;
+  }), u.map(function (_ref9) {
+    var totalCount = _ref9[1];
+    return totalCount - 1;
+  }), u.distinctUntilChanged()));
+  var startReached = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_ref10) {
+    var items = _ref10.items;
+    return items.length > 0 && items[0].index === 0;
+  }), u.mapTo(0), u.distinctUntilChanged()));
+  var rangeChanged = u.streamFromEmitter(u.pipe(u.duc(gridState), u.filter(function (_ref11) {
+    var items = _ref11.items;
+    return items.length > 0;
+  }), u.map(function (_ref12) {
+    var items = _ref12.items;
+    return {
+      startIndex: items[0].index,
+      endIndex: items[items.length - 1].index
+    };
+  }), u.distinctUntilChanged(rangeComparator)));
+  u.connect(rangeChanged, scrollSeek.scrollSeekRangeChanged);
+  u.connect(u.pipe(scrollToIndex, u.withLatestFrom(viewportDimensions, itemDimensions, totalCount), u.map(function (_ref13) {
+    var location = _ref13[0],
+        viewport = _ref13[1],
+        item = _ref13[2],
+        totalCount = _ref13[3];
+    var normalLocation = normalizeIndexLocation(location);
+    var align = normalLocation.align,
+        behavior = normalLocation.behavior,
+        offset = normalLocation.offset;
+    var index = normalLocation.index;
+
+    if (index === 'LAST') {
+      index = totalCount - 1;
+    }
+
+    index = Math.max(0, index, Math.min(totalCount - 1, index));
+    var top = itemTop(viewport, item, index);
+
+    if (align === 'end') {
+      top = Math.round(top - viewport.height + item.height);
+    } else if (align === 'center') {
+      top = Math.round(top - viewport.height / 2 + item.height / 2);
+    }
+
+    if (offset) {
+      top += offset;
+    }
+
+    return {
+      top: top,
+      behavior: behavior
+    };
+  })), scrollTo);
+  var totalListHeight = u.statefulStreamFromEmitter(u.pipe(gridState, u.map(function (gridState) {
+    return gridState.offsetBottom + gridState.bottom;
+  })), 0);
+  u.connect(u.pipe(windowViewportRect, u.map(function (viewportInfo) {
+    return {
+      width: viewportInfo.visibleWidth,
+      height: viewportInfo.visibleHeight
+    };
+  })), viewportDimensions);
+  return _extends({
+    // input
+    totalCount: totalCount,
+    viewportDimensions: viewportDimensions,
+    itemDimensions: itemDimensions,
+    scrollTop: scrollTop,
+    scrollHeight: scrollHeight,
+    overscan: overscan,
+    scrollBy: scrollBy,
+    scrollTo: scrollTo,
+    scrollToIndex: scrollToIndex,
+    smoothScrollTargetReached: smoothScrollTargetReached,
+    windowViewportRect: windowViewportRect,
+    windowScrollTo: windowScrollTo,
+    useWindowScroll: useWindowScroll,
+    customScrollParent: customScrollParent,
+    windowScrollContainerState: windowScrollContainerState,
+    deviation: deviation,
+    scrollContainerState: scrollContainerState,
+    initialItemCount: initialItemCount
+  }, scrollSeek, {
+    // output
+    gridState: gridState,
+    totalListHeight: totalListHeight
+  }, stateFlags, {
+    startReached: startReached,
+    endReached: endReached,
+    rangeChanged: rangeChanged,
+    propsReady: propsReady
+  });
+}, /*#__PURE__*/u.tup(sizeRangeSystem, domIOSystem, stateFlagsSystem, scrollSeekSystem, propsReadySystem, windowScrollerSystem));
+
+function gridLayout(viewport, item, items) {
+  var itemHeight = item.height;
+
+  if (itemHeight === undefined || items.length === 0) {
+    return {
+      top: 0,
+      bottom: 0
+    };
+  }
+
+  var top = itemTop(viewport, item, items[0].index);
+  var bottom = itemTop(viewport, item, items[items.length - 1].index) + itemHeight;
+  return {
+    top: top,
+    bottom: bottom
+  };
+}
+
+function itemTop(viewport, item, index) {
+  var perRow = itemsPerRow(viewport.width, item.width);
+  return floor(index / perRow) * item.height;
+}
+
+function itemsPerRow(viewportWidth, itemWidth) {
+  return Math.floor(viewportWidth / itemWidth);
+}
+
+var gridComponentPropsSystem = /*#__PURE__*/u.system(function () {
+  var itemContent = u.statefulStream(function (index) {
+    return "Item " + index;
+  });
+  var components = u.statefulStream({});
+  var context = u.statefulStream(null);
+  var itemClassName = u.statefulStream('virtuoso-grid-item');
+  var listClassName = u.statefulStream('virtuoso-grid-list');
+  var computeItemKey = u.statefulStream(identity);
+  var scrollerRef = u.statefulStream(u.noop);
+
+  var distinctProp = function distinctProp(propName, defaultValue) {
+    if (defaultValue === void 0) {
+      defaultValue = null;
+    }
+
+    return u.statefulStreamFromEmitter(u.pipe(components, u.map(function (components) {
+      return components[propName];
+    }), u.distinctUntilChanged()), defaultValue);
+  };
+
+  return {
+    context: context,
+    itemContent: itemContent,
+    components: components,
+    computeItemKey: computeItemKey,
+    itemClassName: itemClassName,
+    listClassName: listClassName,
+    scrollerRef: scrollerRef,
+    ListComponent: distinctProp('List', 'div'),
+    ItemComponent: distinctProp('Item', 'div'),
+    ScrollerComponent: distinctProp('Scroller', 'div'),
+    ScrollSeekPlaceholder: distinctProp('ScrollSeekPlaceholder', 'div')
+  };
+});
+var combinedSystem = /*#__PURE__*/u.system(function (_ref) {
+  var gridSystem = _ref[0],
+      gridComponentPropsSystem = _ref[1];
+  var deprecatedProps = {
+    item: addDeprecatedAlias(gridComponentPropsSystem.itemContent, 'Rename the %citem%c prop to %citemContent.'),
+    ItemContainer: u.stream(),
+    ScrollContainer: u.stream(),
+    ListContainer: u.stream(),
+    emptyComponent: u.stream(),
+    scrollSeek: u.stream()
+  };
+
+  function deprecateComponentProp(stream, componentName, propName) {
+    u.connect(u.pipe(stream, u.withLatestFrom(gridComponentPropsSystem.components), u.map(function (_ref2) {
+      var _extends2;
+
+      var comp = _ref2[0],
+          components = _ref2[1];
+      console.warn("react-virtuoso: " + propName + " property is deprecated. Pass components." + componentName + " instead."); // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+
+      return _extends({}, components, (_extends2 = {}, _extends2[componentName] = comp, _extends2));
+    })), gridComponentPropsSystem.components);
+  }
+
+  u.subscribe(deprecatedProps.scrollSeek, function (_ref3) {
+    var placeholder = _ref3.placeholder,
+        config = _objectWithoutPropertiesLoose(_ref3, ["placeholder"]);
+
+    console.warn("react-virtuoso: scrollSeek property is deprecated. Pass scrollSeekConfiguration and specify the placeholder in components.ScrollSeekPlaceholder instead.");
+    u.publish(gridComponentPropsSystem.components, _extends({}, u.getValue(gridComponentPropsSystem.components), {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      ScrollSeekPlaceholder: placeholder
+    }));
+    u.publish(gridSystem.scrollSeekConfiguration, config);
+  });
+  deprecateComponentProp(deprecatedProps.ItemContainer, 'Item', 'ItemContainer');
+  deprecateComponentProp(deprecatedProps.ListContainer, 'List', 'ListContainer');
+  deprecateComponentProp(deprecatedProps.ScrollContainer, 'Scroller', 'ScrollContainer');
+  return _extends({}, gridSystem, gridComponentPropsSystem, deprecatedProps);
+}, /*#__PURE__*/u.tup(gridSystem, gridComponentPropsSystem));
+var GridItems = /*#__PURE__*/React.memo(function GridItems() {
+  var gridState = useEmitterValue('gridState');
+  var listClassName = useEmitterValue('listClassName');
+  var itemClassName = useEmitterValue('itemClassName');
+  var itemContent = useEmitterValue('itemContent');
+  var computeItemKey = useEmitterValue('computeItemKey');
+  var isSeeking = useEmitterValue('isSeeking');
+  var scrollHeightCallback = usePublisher('scrollHeight');
+  var ItemComponent = useEmitterValue('ItemComponent');
+  var ListComponent = useEmitterValue('ListComponent');
+  var ScrollSeekPlaceholder = useEmitterValue('ScrollSeekPlaceholder');
+  var context = useEmitterValue('context');
+  var itemDimensions = usePublisher('itemDimensions');
+  var listRef = useSize(function (el) {
+    var scrollHeight = el.parentElement.parentElement.scrollHeight;
+    scrollHeightCallback(scrollHeight);
+    var firstItem = el.firstChild;
+
+    if (firstItem) {
+      itemDimensions(firstItem.getBoundingClientRect());
+    }
+  });
+  return createElement(ListComponent, _extends({
+    ref: listRef,
+    className: listClassName
+  }, contextPropIfNotDomElement(ListComponent, context), {
+    style: {
+      paddingTop: gridState.offsetTop,
+      paddingBottom: gridState.offsetBottom
+    }
+  }), gridState.items.map(function (item) {
+    var key = computeItemKey(item.index);
+    return isSeeking ? createElement(ScrollSeekPlaceholder, _extends({
+      key: key
+    }, contextPropIfNotDomElement(ScrollSeekPlaceholder, context), {
+      index: item.index,
+      height: gridState.itemHeight,
+      width: gridState.itemWidth
+    })) : createElement(ItemComponent, _extends({}, contextPropIfNotDomElement(ItemComponent, context), {
+      className: itemClassName,
+      'data-index': item.index,
+      key: key
+    }), itemContent(item.index, context));
+  }));
+});
+
+var Viewport = function Viewport(_ref4) {
+  var children = _ref4.children;
+  var viewportDimensions = usePublisher('viewportDimensions');
+  var viewportRef = useSize(function (el) {
+    viewportDimensions(el.getBoundingClientRect());
+  });
+  return React.createElement("div", {
+    style: viewportStyle,
+    ref: viewportRef
+  }, children);
+};
+
+var WindowViewport = function WindowViewport(_ref5) {
+  var children = _ref5.children;
+  var windowViewportRect = usePublisher('windowViewportRect');
+  var customScrollParent = useEmitterValue('customScrollParent');
+  var viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
+  return React.createElement("div", {
+    ref: viewportRef,
+    style: viewportStyle
+  }, children);
+};
+
+var GridRoot = /*#__PURE__*/React.memo(function GridRoot(_ref6) {
+  var props = _extends({}, _ref6);
+
+  var useWindowScroll = useEmitterValue('useWindowScroll');
+  var customScrollParent = useEmitterValue('customScrollParent');
+  var TheScroller = customScrollParent || useWindowScroll ? WindowScroller : Scroller;
+  var TheViewport = customScrollParent || useWindowScroll ? WindowViewport : Viewport;
+  return React.createElement(TheScroller, _extends({}, props), React.createElement(TheViewport, null, React.createElement(GridItems, null)));
+});
+
+var _systemToComponent = /*#__PURE__*/systemToComponent(combinedSystem, {
+  optional: {
+    totalCount: 'totalCount',
+    overscan: 'overscan',
+    itemContent: 'itemContent',
+    components: 'components',
+    computeItemKey: 'computeItemKey',
+    initialItemCount: 'initialItemCount',
+    scrollSeekConfiguration: 'scrollSeekConfiguration',
+    listClassName: 'listClassName',
+    itemClassName: 'itemClassName',
+    useWindowScroll: 'useWindowScroll',
+    customScrollParent: 'customScrollParent',
+    scrollerRef: 'scrollerRef',
+    // deprecated
+    item: 'item',
+    ItemContainer: 'ItemContainer',
+    ScrollContainer: 'ScrollContainer',
+    ListContainer: 'ListContainer',
+    scrollSeek: 'scrollSeek'
+  },
+  methods: {
+    scrollTo: 'scrollTo',
+    scrollBy: 'scrollBy',
+    scrollToIndex: 'scrollToIndex'
+  },
+  events: {
+    isScrolling: 'isScrolling',
+    endReached: 'endReached',
+    startReached: 'startReached',
+    rangeChanged: 'rangeChanged',
+    atBottomStateChange: 'atBottomStateChange',
+    atTopStateChange: 'atTopStateChange'
+  }
+}, GridRoot),
+    Grid = _systemToComponent.Component,
+    usePublisher = _systemToComponent.usePublisher,
+    useEmitterValue = _systemToComponent.useEmitterValue,
+    useEmitter = _systemToComponent.useEmitter;
+var Scroller = /*#__PURE__*/buildScroller({
+  usePublisher: usePublisher,
+  useEmitterValue: useEmitterValue,
+  useEmitter: useEmitter
+});
+var WindowScroller = /*#__PURE__*/buildWindowScroller({
+  usePublisher: usePublisher,
+  useEmitterValue: useEmitterValue,
+  useEmitter: useEmitter
+});
+
+var VirtuosoGrid = Grid;
+
+export { GroupedVirtuoso, LogLevel, TableVirtuoso, Virtuoso, VirtuosoGrid };
+//# sourceMappingURL=react-virtuoso.esm.js.map