react-virtuoso 2.2.4 → 2.2.6-beta.2

package/dist/endless-scrolling.bc4101f0.js

@@ -0,0 +1,205 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"endless-scrolling.tsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _src = require("../src");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function generateItems(length, startIndex) {
+  return Array.from({
+    length: length
+  }, function (_, index) {
+    return "My Item ".concat(index + startIndex, ", gen: ").concat(startIndex);
+  });
+}
+
+var itemContent = function itemContent(_, data) {
+  return React.createElement("div", {
+    style: {
+      height: 30
+    }
+  }, data);
+};
+
+function App() {
+  var _useState = (0, React.useState)(function () {
+    return [];
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  var loadMore = (0, React.useCallback)(function () {
+    console.log('loading...');
+    return setTimeout(function () {
+      console.log('loaded');
+      setItems(function (items) {
+        return [].concat(_toConsumableArray(items), _toConsumableArray(generateItems(100, items.length)));
+      });
+    }, 0);
+  }, [setItems]);
+  (0, React.useEffect)(function () {
+    var timeout = loadMore();
+    return function () {
+      return clearTimeout(timeout);
+    };
+  }, [loadMore]);
+  return React.createElement("div", null, items.length ? React.createElement(_src.Virtuoso, {
+    data: items,
+    initialItemCount: items.length,
+    endReached: loadMore,
+    itemContent: itemContent,
+    style: {
+      height: 300
+    }
+  }) : React.createElement("div", null, "Loading"));
+}
+},{"react":"../node_modules/react/index.js","../src":"../src/index.tsx"}]},{},[], null)

package/dist/endless-scrolling.bc4101f0.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["endless-scrolling.tsx"],"names":[],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,aAAT,CAAuB,MAAvB,EAAuC,UAAvC,EAAyD;AACvD,SAAO,KAAK,CAAC,IAAN,CAAW;AAAE,IAAA,MAAM,EAAN;AAAF,GAAX,EAAuB,UAAC,CAAD,EAAI,KAAJ;AAAA,6BAAyB,KAAK,GAAG,UAAjC,oBAAqD,UAArD;AAAA,GAAvB,CAAP;AACD;;AAED,IAAM,WAAW,GAAG,SAAd,WAAc,CAAC,CAAD,EAAY,IAAZ,EAA4B;AAC9C,SAAO,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAV;AAAZ,GAAA,EAA6B,IAA7B,CAAP;AACD,CAFD;;AAIc,SAAU,GAAV,GAAa;AAAA,kBACC,oBAAmB;AAAA,WAAM,EAAN;AAAA,GAAnB,CADD;AAAA;AAAA,MAClB,KADkB;AAAA,MACX,QADW;;AAGzB,MAAM,QAAQ,GAAG,uBAAY,YAAK;AAChC,IAAA,OAAO,CAAC,GAAR,CAAY,YAAZ;AACA,WAAO,UAAU,CAAC,YAAK;AACrB,MAAA,OAAO,CAAC,GAAR,CAAY,QAAZ;AAEA,MAAA,QAAQ,CAAC,UAAC,KAAD;AAAA,4CAAe,KAAf,sBAAyB,aAAa,CAAC,GAAD,EAAM,KAAK,CAAC,MAAZ,CAAtC;AAAA,OAAD,CAAR;AACD,KAJgB,EAId,CAJc,CAAjB;AAKD,GAPgB,EAOd,CAAC,QAAD,CAPc,CAAjB;AASA,uBAAU,YAAK;AACb,QAAM,OAAO,GAAG,QAAQ,EAAxB;AACA,WAAO;AAAA,aAAM,YAAY,CAAC,OAAD,CAAlB;AAAA,KAAP;AACD,GAHD,EAGG,CAAC,QAAD,CAHH;AAKA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACG,KAAK,CAAC,MAAN,GACC,KAAA,CAAA,aAAA,CAAC,aAAD,EAAS;AAAC,IAAA,IAAI,EAAE,KAAP;AAAc,IAAA,gBAAgB,EAAE,KAAK,CAAC,MAAtC;AAA8C,IAAA,UAAU,EAAE,QAA1D;AAAoE,IAAA,WAAW,EAAE,WAAjF;AAA8F,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAV;AAArG,GAAT,CADD,GAGC,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAA,SAAA,CAJJ,CADF;AASD","file":"endless-scrolling.bc4101f0.js","sourceRoot":"../e2e","sourcesContent":["import * as React from 'react'\nimport { useState, useEffect, useCallback } from 'react'\nimport { Virtuoso } from '../src'\n\nfunction generateItems(length: number, startIndex: number) {\n  return Array.from({ length }, (_, index) => `My Item ${index + startIndex}, gen: ${startIndex}`)\n}\n\nconst itemContent = (_: number, data: string) => {\n  return <div style={{ height: 30 }}>{data}</div>\n}\n\nexport default function App() {\n  const [items, setItems] = useState<string[]>(() => [])\n\n  const loadMore = useCallback(() => {\n    console.log('loading...')\n    return setTimeout(() => {\n      console.log('loaded')\n\n      setItems((items) => [...items, ...generateItems(100, items.length)])\n    }, 0)\n  }, [setItems])\n\n  useEffect(() => {\n    const timeout = loadMore()\n    return () => clearTimeout(timeout)\n  }, [loadMore])\n\n  return (\n    <div>\n      {items.length ? (\n        <Virtuoso data={items} initialItemCount={items.length} endReached={loadMore} itemContent={itemContent} style={{ height: 300 }} />\n      ) : (\n        <div>Loading</div>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/expandable-cards.5439f51b.js

@@ -0,0 +1,222 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"expandable-cards.tsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _src = require("../src");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var Row = function Row(props) {
+  var rowIndex = props.rowIndex,
+      expanded = props.expanded,
+      setExpanded = props.setExpanded;
+
+  var _useState = (0, React.useState)(expanded),
+      _useState2 = _slicedToArray(_useState, 2),
+      ex = _useState2[0],
+      setEx = _useState2[1];
+
+  var color = Math.floor(Math.abs(Math.sin(rowIndex) * 16777215) % 16777215).toString(16);
+  return React.createElement("div", {
+    style: {}
+  }, React.createElement("div", {
+    style: {
+      background: 'grey',
+      padding: '40px 0px',
+      border: '4px solid black'
+    },
+    onClick: function onClick() {
+      setExpanded(!expanded);
+      setEx(!ex);
+    }
+  }, "This is row #", rowIndex, " rendered at ", Date.now(), React.createElement("div", {
+    style: {
+      height: ex ? '100%' : rowIndex % 2 === 0 ? '2px' : '35px',
+      overflow: 'hidden'
+    }
+  }, React.createElement("div", {
+    style: {
+      background: "#".concat(color),
+      height: '250px'
+    }
+  }))));
+};
+
+function App() {
+  var _useState3 = (0, React.useState)({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      expanded = _useState4[0],
+      _setExpanded = _useState4[1];
+
+  var itemsRendered = function itemsRendered(x) {
+    return console.log(x.map(function (y) {
+      return "".concat(y.originalIndex, ": ").concat(y.offset);
+    }));
+  };
+
+  var itemContent = function itemContent(rowIndex) {
+    return React.createElement(Row, {
+      rowIndex: rowIndex,
+      expanded: !!expanded[rowIndex],
+      setExpanded: function setExpanded(expanded) {
+        console.log('set expanded', expanded, 'row Index:', rowIndex);
+
+        _setExpanded(function (old) {
+          return Object.assign(old, _defineProperty({}, rowIndex, expanded));
+        });
+      }
+    });
+  };
+
+  return React.createElement(_src.Virtuoso, {
+    style: {
+      height: 900
+    },
+    itemsRendered: itemsRendered,
+    totalCount: 500,
+    itemContent: itemContent,
+    initialTopMostItemIndex: 100
+  });
+}
+},{"react":"../node_modules/react/index.js","../src":"../src/index.tsx"}]},{},[], null)

package/dist/expandable-cards.5439f51b.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["expandable-cards.tsx"],"names":[],"mappings":";;;;;;;AAEA;;AAEA;;;;;;;;;;;;;;;;;;;;AAEA,IAAM,GAAG,GAAG,SAAN,GAAM,CAAC,KAAD,EAAe;AAAA,MACjB,QADiB,GACmB,KADnB,CACjB,QADiB;AAAA,MACP,QADO,GACmB,KADnB,CACP,QADO;AAAA,MACG,WADH,GACmB,KADnB,CACG,WADH;;AAAA,kBAEL,oBAAS,QAAT,CAFK;AAAA;AAAA,MAElB,EAFkB;AAAA,MAEd,KAFc;;AAGzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAL,CAAW,IAAI,CAAC,GAAL,CAAS,IAAI,CAAC,GAAL,CAAS,QAAT,IAAqB,QAA9B,IAA0C,QAArD,EAA+D,QAA/D,CAAwE,EAAxE,CAAd;AACA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,KAAK,EAAE;AAAZ,GAAA,EACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE;AACL,MAAA,UAAU,EAAE,MADP;AAEL,MAAA,OAAO,EAAE,UAFJ;AAGL,MAAA,MAAM,EAAE;AAHH,KADT;AAME,IAAA,OAAO,EAAE,mBAAK;AACZ,MAAA,WAAW,CAAC,CAAC,QAAF,CAAX;AACA,MAAA,KAAK,CAAC,CAAC,EAAF,CAAL;AACD;AATH,GAAA,iBAAA,EAWgB,QAXhB,iBAAA,EAWuC,IAAI,CAAC,GAAL,EAXvC,EAYE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,EAAE,GAAG,MAAH,GAAY,QAAQ,GAAG,CAAX,KAAiB,CAAjB,GAAqB,KAArB,GAA6B,MAArD;AAA6D,MAAA,QAAQ,EAAE;AAAvE;AAAZ,GAAA,EACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AACE,IAAA,KAAK,EAAE;AACL,MAAA,UAAU,aAAM,KAAN,CADL;AAEL,MAAA,MAAM,EAAE;AAFH;AADT,GAAA,CADF,CAZF,CADF,CADF;AAyBD,CA7BD;;AAiCc,SAAU,GAAV,GAAa;AAAA,mBACO,oBAAoB,EAApB,CADP;AAAA;AAAA,MAClB,QADkB;AAAA,MACR,YADQ;;AAGzB,MAAM,aAAa,GAAG,SAAhB,aAAgB,CAAC,CAAD;AAAA,WACpB,OAAO,CAAC,GAAR,CAAY,CAAC,CAAC,GAAF,CAAM,UAAC,CAAD;AAAA,uBAAqD,CAAC,CAAC,aAAvD,eAAyE,CAAC,CAAC,MAA3E;AAAA,KAAN,CAAZ,CADoB;AAAA,GAAtB;;AAGA,MAAM,WAAW,GAAG,SAAd,WAAc,CAAC,QAAD;AAAA,WAClB,KAAA,CAAA,aAAA,CAAC,GAAD,EAAI;AACF,MAAA,QAAQ,EAAE,QADR;AAEF,MAAA,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAD,CAFlB;AAGF,MAAA,WAAW,EAAE,qBAAC,QAAD,EAAsB;AACjC,QAAA,OAAO,CAAC,GAAR,CAAY,cAAZ,EAA4B,QAA5B,EAAsC,YAAtC,EAAoD,QAApD;;AACA,QAAA,YAAW,CAAC,UAAC,GAAD;AAAA,iBAAS,MAAM,CAAC,MAAP,CAAc,GAAd,sBAAsB,QAAtB,EAAiC,QAAjC,EAAT;AAAA,SAAD,CAAX;AACD;AANC,KAAJ,CADkB;AAAA,GAApB;;AAUA,SACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAS;AACP,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAV,KADA;AAEP,IAAA,aAAa,EAAE,aAFR;AAGP,IAAA,UAAU,EAAE,GAHL;AAIP,IAAA,WAAW,EAAE,WAJN;AAKP,IAAA,uBAAuB,EAAE;AALlB,GAAT,CADF;AASD","file":"expandable-cards.5439f51b.js","sourceRoot":"../e2e","sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-call */\n/* eslint-disable @typescript-eslint/no-unsafe-assignment */\nimport * as React from 'react'\nimport { useState } from 'react'\nimport { Virtuoso } from '../src'\n\nconst Row = (props: any) => {\n  const { rowIndex, expanded, setExpanded } = props\n  const [ex, setEx] = useState(expanded)\n  const color = Math.floor(Math.abs(Math.sin(rowIndex) * 16777215) % 16777215).toString(16)\n  return (\n    <div style={{}}>\n      <div\n        style={{\n          background: 'grey',\n          padding: '40px 0px',\n          border: '4px solid black',\n        }}\n        onClick={() => {\n          setExpanded(!expanded)\n          setEx(!ex)\n        }}\n      >\n        This is row #{rowIndex} rendered at {Date.now()}\n        <div style={{ height: ex ? '100%' : rowIndex % 2 === 0 ? '2px' : '35px', overflow: 'hidden' }}>\n          <div\n            style={{\n              background: `#${color}`,\n              height: '250px',\n            }}\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\ninterface IExpanded {\n  [key: number]: boolean\n}\nexport default function App() {\n  const [expanded, setExpanded] = useState<IExpanded>({})\n\n  const itemsRendered = (x: any[]) =>\n    console.log(x.map((y: { originalIndex: number; offset: number }) => `${y.originalIndex}: ${y.offset}`))\n\n  const itemContent = (rowIndex: number) => (\n    <Row\n      rowIndex={rowIndex}\n      expanded={!!expanded[rowIndex]}\n      setExpanded={(expanded: boolean) => {\n        console.log('set expanded', expanded, 'row Index:', rowIndex)\n        setExpanded((old) => Object.assign(old, { [rowIndex]: expanded }))\n      }}\n    />\n  )\n  return (\n    <Virtuoso\n      style={{ height: 900 }}\n      itemsRendered={itemsRendered}\n      totalCount={500}\n      itemContent={itemContent}\n      initialTopMostItemIndex={100}\n    />\n  )\n}\n"]}

package/dist/follow-output.4e36fca8.js

@@ -0,0 +1,225 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+parcelRequire = (function (modules, cache, entry, globalName) {
+  // Save the require from previous bundle to this closure if any
+  var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
+  var nodeRequire = typeof require === 'function' && require;
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error('Cannot find module \'' + name + '\'');
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = cache[name] = new newRequire.Module(name);
+
+      modules[name][0].call(module.exports, localRequire, module, module.exports, this);
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x){
+      return newRequire(localRequire.resolve(x));
+    }
+
+    function resolve(x){
+      return modules[name][1][x] || x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [function (require, module) {
+      module.exports = exports;
+    }, {}];
+  };
+
+  var error;
+  for (var i = 0; i < entry.length; i++) {
+    try {
+      newRequire(entry[i]);
+    } catch (e) {
+      // Save first error but execute all entries
+      if (!error) {
+        error = e;
+      }
+    }
+  }
+
+  if (entry.length) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(entry[entry.length - 1]);
+
+    // CommonJS
+    if (typeof exports === "object" && typeof module !== "undefined") {
+      module.exports = mainExports;
+
+    // RequireJS
+    } else if (typeof define === "function" && define.amd) {
+     define(function () {
+       return mainExports;
+     });
+
+    // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+
+  // Override the current require with this new one
+  parcelRequire = newRequire;
+
+  if (error) {
+    // throw error from earlier, _after updating parcelRequire_
+    throw error;
+  }
+
+  return newRequire;
+})({"follow-output.tsx":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = App;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _src = require("../src");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+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 _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function App() {
+  var _useState = (0, React.useState)(100),
+      _useState2 = _slicedToArray(_useState, 2),
+      count = _useState2[0],
+      setCount = _useState2[1];
+
+  var appendInterval = (0, React.useRef)();
+
+  var _useState3 = (0, React.useState)(300),
+      _useState4 = _slicedToArray(_useState3, 2),
+      listHeight = _useState4[0],
+      setListHeight = _useState4[1];
+
+  var _useState5 = (0, React.useState)({}),
+      _useState6 = _slicedToArray(_useState5, 2),
+      itemHeights = _useState6[0],
+      setItemHeights = _useState6[1];
+
+  var itemContent = (0, React.useCallback)(function (index) {
+    var _itemHeights$index;
+
+    var height = (_itemHeights$index = itemHeights[index]) !== null && _itemHeights$index !== void 0 ? _itemHeights$index : index % 2 ? 30 : 40;
+    return React.createElement("div", {
+      style: {
+        height: height,
+        background: 'white'
+      }
+    }, "Item ", index, React.createElement("button", {
+      onClick: function onClick() {
+        setItemHeights(function (heights) {
+          return _objectSpread(_objectSpread({}, heights), {}, _defineProperty({}, index, 160));
+        });
+      }
+    }, "*"));
+  }, [itemHeights, setItemHeights]);
+  return React.createElement(React.Fragment, null, React.createElement("div", null, React.createElement("button", {
+    onClick: function onClick() {
+      return setCount(function (count) {
+        return count + 4;
+      });
+    }
+  }, "Append Items"), " |", ' ', React.createElement("button", {
+    onClick: function onClick() {
+      return setListHeight(function (height) {
+        return height + 40;
+      });
+    }
+  }, "Increase container"), " |", ' ', React.createElement("button", {
+    onClick: function onClick() {
+      return setListHeight(function (height) {
+        return height - 40;
+      });
+    }
+  }, "Decrease container")), React.createElement(_src.Virtuoso, {
+    totalCount: count,
+    initialTopMostItemIndex: 99,
+    followOutput: 'smooth',
+    itemContent: itemContent,
+    style: {
+      height: listHeight
+    },
+    atBottomStateChange: function atBottomStateChange(atBottom) {
+      clearInterval(appendInterval.current);
+
+      if (atBottom) {
+        appendInterval.current = setInterval(function () {// setCount((count) => count + 3)
+        }, 100);
+      }
+    }
+  }));
+}
+},{"react":"../node_modules/react/index.js","../src":"../src/index.tsx"}]},{},[], null)

package/dist/follow-output.4e36fca8.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["follow-output.tsx"],"names":[],"mappings":";;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;AAEc,SAAU,GAAV,GAAa;AAAA,kBACC,oBAAS,GAAT,CADD;AAAA;AAAA,MAClB,KADkB;AAAA,MACX,QADW;;AAEzB,MAAM,cAAc,GAAG,mBAAvB;;AAFyB,mBAGW,oBAAS,GAAT,CAHX;AAAA;AAAA,MAGlB,UAHkB;AAAA,MAGN,aAHM;;AAAA,mBAIa,oBAAiC,EAAjC,CAJb;AAAA;AAAA,MAIlB,WAJkB;AAAA,MAIL,cAJK;;AAKzB,MAAM,WAAW,GAAG,uBAClB,UAAC,KAAD,EAAkB;AAAA;;AAChB,QAAM,MAAM,yBAAG,WAAW,CAAC,KAAD,CAAd,mEAA0B,KAAK,GAAG,CAAR,GAAY,EAAZ,GAAiB,EAAvD;AACA,WACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,KAAK,EAAE;AAAE,QAAA,MAAM,EAAN,MAAF;AAAU,QAAA,UAAU,EAAE;AAAtB;AAAZ,KAAA,SAAA,EACQ,KADR,EAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AACE,MAAA,OAAO,EAAE,mBAAK;AACZ,QAAA,cAAc,CAAC,UAAC,OAAD,EAAY;AACzB,iDACK,OADL,2BAEG,KAFH,EAEW,GAFX;AAID,SALa,CAAd;AAMD;AARH,KAAA,EAQG,GARH,CAFF,CADF;AAiBD,GApBiB,EAqBlB,CAAC,WAAD,EAAc,cAAd,CArBkB,CAApB;AAwBA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAM,QAAQ,CAAC,UAAC,KAAD;AAAA,eAAW,KAAK,GAAG,CAAnB;AAAA,OAAD,CAAd;AAAA;AAAjB,GAAA,EAAqD,cAArD,CADF,MAAA,EACiF,GADjF,EAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAM,aAAa,CAAC,UAAC,MAAD;AAAA,eAAY,MAAM,GAAG,EAArB;AAAA,OAAD,CAAnB;AAAA;AAAjB,GAAA,EAA6D,oBAA7D,CAFF,MAAA,EAE+F,GAF/F,EAGE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,OAAO,EAAE;AAAA,aAAM,aAAa,CAAC,UAAC,MAAD;AAAA,eAAY,MAAM,GAAG,EAArB;AAAA,OAAD,CAAnB;AAAA;AAAjB,GAAA,EAA6D,oBAA7D,CAHF,CADF,EAME,KAAA,CAAA,aAAA,CAAC,aAAD,EAAS;AACP,IAAA,UAAU,EAAE,KADL;AAEP,IAAA,uBAAuB,EAAE,EAFlB;AAGP,IAAA,YAAY,EAAE,QAHP;AAIP,IAAA,WAAW,EAAE,WAJN;AAKP,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE;AAAV,KALA;AAMP,IAAA,mBAAmB,EAAE,6BAAC,QAAD,EAAa;AAChC,MAAA,aAAa,CAAC,cAAc,CAAC,OAAhB,CAAb;;AACA,UAAI,QAAJ,EAAc;AACZ,QAAA,cAAc,CAAC,OAAf,GAAyB,WAAW,CAAC,YAAK,CACxC;AACD,SAFmC,EAEjC,GAFiC,CAApC;AAGD;AACF;AAbM,GAAT,CANF,CADF;AAwBD","file":"follow-output.4e36fca8.js","sourceRoot":"../e2e","sourcesContent":["import * as React from 'react'\nimport { useState, useRef, useCallback } from 'react'\nimport { Virtuoso } from '../src'\n\nexport default function App() {\n  const [count, setCount] = useState(100)\n  const appendInterval = useRef<NodeJS.Timeout>()\n  const [listHeight, setListHeight] = useState(300)\n  const [itemHeights, setItemHeights] = useState<Record<number, number>>({})\n  const itemContent = useCallback(\n    (index: number) => {\n      const height = itemHeights[index] ?? (index % 2 ? 30 : 40)\n      return (\n        <div style={{ height, background: 'white' }}>\n          Item {index}\n          <button\n            onClick={() => {\n              setItemHeights((heights) => {\n                return {\n                  ...heights,\n                  [index]: 160,\n                }\n              })\n            }}\n          >\n            *\n          </button>\n        </div>\n      )\n    },\n    [itemHeights, setItemHeights]\n  )\n\n  return (\n    <>\n      <div>\n        <button onClick={() => setCount((count) => count + 4)}>Append Items</button> |{' '}\n        <button onClick={() => setListHeight((height) => height + 40)}>Increase container</button> |{' '}\n        <button onClick={() => setListHeight((height) => height - 40)}>Decrease container</button>\n      </div>\n      <Virtuoso\n        totalCount={count}\n        initialTopMostItemIndex={99}\n        followOutput={'smooth'}\n        itemContent={itemContent}\n        style={{ height: listHeight }}\n        atBottomStateChange={(atBottom) => {\n          clearInterval(appendInterval.current!)\n          if (atBottom) {\n            appendInterval.current = setInterval(() => {\n              // setCount((count) => count + 3)\n            }, 100)\n          }\n        }}\n      />\n    </>\n  )\n}\n"]}