react-virtuoso 2.2.9-beta.1 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/package.json +3 -3
  2. package/dist/__examples.cc6a8f9f.js +0 -171814
  3. package/dist/__examples.cc6a8f9f.js.map +0 -1
  4. package/dist/__examples.html +0 -27
  5. package/dist/__examples.js +0 -392
  6. package/dist/__examples.js.map +0 -1
  7. package/dist/align-to-bottom.7fcd2087.js +0 -401
  8. package/dist/align-to-bottom.7fcd2087.js.map +0 -1
  9. package/dist/at-bottom-detection.a5d019c3.js +0 -447
  10. package/dist/at-bottom-detection.a5d019c3.js.map +0 -1
  11. package/dist/auto-prepend-items.bd7e9b90.js +0 -468
  12. package/dist/auto-prepend-items.bd7e9b90.js.map +0 -1
  13. package/dist/benchmark.66d31485.js +0 -366
  14. package/dist/benchmark.66d31485.js.map +0 -1
  15. package/dist/chat.d4f93b8b.js +0 -570
  16. package/dist/chat.d4f93b8b.js.map +0 -1
  17. package/dist/context.a45abc98.js +0 -379
  18. package/dist/context.a45abc98.js.map +0 -1
  19. package/dist/contextSystem.d.ts +0 -4
  20. package/dist/custom-components.5aeaa7ef.js +0 -407
  21. package/dist/custom-components.5aeaa7ef.js.map +0 -1
  22. package/dist/custom-scroller.b0240d14.js +0 -385
  23. package/dist/custom-scroller.b0240d14.js.map +0 -1
  24. package/dist/data.26707046.js +0 -391
  25. package/dist/data.26707046.js.map +0 -1
  26. package/dist/decrease-items.e2211e50.js +0 -385
  27. package/dist/decrease-items.e2211e50.js.map +0 -1
  28. package/dist/default-item-height.b77ada36.js +0 -360
  29. package/dist/default-item-height.b77ada36.js.map +0 -1
  30. package/dist/empty-placeholder.00607a6e.js +0 -390
  31. package/dist/empty-placeholder.00607a6e.js.map +0 -1
  32. package/dist/end-reached.8531e5b1.js +0 -404
  33. package/dist/end-reached.8531e5b1.js.map +0 -1
  34. package/dist/endless-scrolling.bc4101f0.js +0 -410
  35. package/dist/endless-scrolling.bc4101f0.js.map +0 -1
  36. package/dist/expandable-cards.5439f51b.js +0 -427
  37. package/dist/expandable-cards.5439f51b.js.map +0 -1
  38. package/dist/follow-output.4e36fca8.js +0 -430
  39. package/dist/follow-output.4e36fca8.js.map +0 -1
  40. package/dist/grid-optimize-rendering.b49e36f5.js +0 -452
  41. package/dist/grid-optimize-rendering.b49e36f5.js.map +0 -1
  42. package/dist/grid-scroll-seek-placeholder.b2862006.js +0 -415
  43. package/dist/grid-scroll-seek-placeholder.b2862006.js.map +0 -1
  44. package/dist/grid.d5d77b6a.js +0 -449
  45. package/dist/grid.d5d77b6a.js.map +0 -1
  46. package/dist/grouped-endless-scrolling.24985a0f.js +0 -506
  47. package/dist/grouped-endless-scrolling.24985a0f.js.map +0 -1
  48. package/dist/grouped-load-more.bce8f6e4.js +0 -505
  49. package/dist/grouped-load-more.bce8f6e4.js.map +0 -1
  50. package/dist/grouped-topmost-item.34960f5e.js +0 -366
  51. package/dist/grouped-topmost-item.34960f5e.js.map +0 -1
  52. package/dist/grouped.a2908632.js +0 -365
  53. package/dist/grouped.a2908632.js.map +0 -1
  54. package/dist/header-footer.49733d45.js +0 -376
  55. package/dist/header-footer.49733d45.js.map +0 -1
  56. package/dist/hello.54765c26.js +0 -360
  57. package/dist/hello.54765c26.js.map +0 -1
  58. package/dist/initial-from-zero.22ad1626.js +0 -400
  59. package/dist/initial-from-zero.22ad1626.js.map +0 -1
  60. package/dist/initial-scroll-top.90db1920.js +0 -361
  61. package/dist/initial-scroll-top.90db1920.js.map +0 -1
  62. package/dist/initial-topmost-item-default-height.43a95247.js +0 -362
  63. package/dist/initial-topmost-item-default-height.43a95247.js.map +0 -1
  64. package/dist/initial-topmost-item.61c0e169.js +0 -363
  65. package/dist/initial-topmost-item.61c0e169.js.map +0 -1
  66. package/dist/long-last-item.b56ff89c.js +0 -361
  67. package/dist/long-last-item.b56ff89c.js.map +0 -1
  68. package/dist/prepend-items.f2bda34b.js +0 -393
  69. package/dist/prepend-items.f2bda34b.js.map +0 -1
  70. package/dist/prepend-last-tall-item.168a9e65.js +0 -380
  71. package/dist/prepend-last-tall-item.168a9e65.js.map +0 -1
  72. package/dist/react-beautiful-dnd-window-scroller.0a227511.js +0 -485
  73. package/dist/react-beautiful-dnd-window-scroller.0a227511.js.map +0 -1
  74. package/dist/react-beautiful-dnd.817e9251.js +0 -482
  75. package/dist/react-beautiful-dnd.817e9251.js.map +0 -1
  76. package/dist/rerender.ddd61b7c.js +0 -400
  77. package/dist/rerender.ddd61b7c.js.map +0 -1
  78. package/dist/resize-loop.309b1dac.js +0 -388
  79. package/dist/resize-loop.309b1dac.js.map +0 -1
  80. package/dist/resizing-items.c09b5e1b.js +0 -394
  81. package/dist/resizing-items.c09b5e1b.js.map +0 -1
  82. package/dist/scroll-into-view.39b77fe9.js +0 -408
  83. package/dist/scroll-into-view.39b77fe9.js.map +0 -1
  84. package/dist/scroll-seek-placeholder.69fb85c6.js +0 -384
  85. package/dist/scroll-seek-placeholder.69fb85c6.js.map +0 -1
  86. package/dist/scroll-to-index.e72249cf.js +0 -417
  87. package/dist/scroll-to-index.e72249cf.js.map +0 -1
  88. package/dist/ssr.8f31b042.js +0 -359
  89. package/dist/ssr.8f31b042.js.map +0 -1
  90. package/dist/start-reached.2990ece7.js +0 -424
  91. package/dist/start-reached.2990ece7.js.map +0 -1
  92. package/dist/tall-item-reverse-scrolling.58bcd140.js +0 -363
  93. package/dist/tall-item-reverse-scrolling.58bcd140.js.map +0 -1
  94. package/dist/test-case-446.dce9595c.js +0 -428
  95. package/dist/test-case-446.dce9595c.js.map +0 -1
  96. package/dist/test-case-460.6d75ad1f.js +0 -451
  97. package/dist/test-case-460.6d75ad1f.js.map +0 -1
  98. package/dist/test-case-463.525f34ba.js +0 -375
  99. package/dist/test-case-463.525f34ba.js.map +0 -1
  100. package/dist/toggle-display-grouped.4f4ae058.js +0 -389
  101. package/dist/toggle-display-grouped.4f4ae058.js.map +0 -1
  102. package/dist/toggle.7047c23e.js +0 -447
  103. package/dist/toggle.7047c23e.js.map +0 -1
  104. package/dist/top-items.f724bf61.js +0 -358
  105. package/dist/top-items.f724bf61.js.map +0 -1
  106. package/dist/upward-scroll.d49e0815.js +0 -362
  107. package/dist/upward-scroll.d49e0815.js.map +0 -1
  108. package/dist/window-grid.b22094fd.js +0 -439
  109. package/dist/window-grid.b22094fd.js.map +0 -1
  110. package/dist/window-scroller.a979c6d6.js +0 -368
  111. package/dist/window-scroller.a979c6d6.js.map +0 -1
@@ -1,449 +0,0 @@
1
- // modules are defined as an array
2
- // [ module function, map of requires ]
3
- //
4
- // map of requires is short require name -> numeric require
5
- //
6
- // anything defined in a previous bundle is accessed via the
7
- // orig method which is the require for previous bundles
8
- parcelRequire = (function (modules, cache, entry, globalName) {
9
- // Save the require from previous bundle to this closure if any
10
- var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
11
- var nodeRequire = typeof require === 'function' && require;
12
-
13
- function newRequire(name, jumped) {
14
- if (!cache[name]) {
15
- if (!modules[name]) {
16
- // if we cannot find the module within our internal map or
17
- // cache jump to the current global require ie. the last bundle
18
- // that was added to the page.
19
- var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
20
- if (!jumped && currentRequire) {
21
- return currentRequire(name, true);
22
- }
23
-
24
- // If there are other bundles on this page the require from the
25
- // previous one is saved to 'previousRequire'. Repeat this as
26
- // many times as there are bundles until the module is found or
27
- // we exhaust the require chain.
28
- if (previousRequire) {
29
- return previousRequire(name, true);
30
- }
31
-
32
- // Try the node require function if it exists.
33
- if (nodeRequire && typeof name === 'string') {
34
- return nodeRequire(name);
35
- }
36
-
37
- var err = new Error('Cannot find module \'' + name + '\'');
38
- err.code = 'MODULE_NOT_FOUND';
39
- throw err;
40
- }
41
-
42
- localRequire.resolve = resolve;
43
- localRequire.cache = {};
44
-
45
- var module = cache[name] = new newRequire.Module(name);
46
-
47
- modules[name][0].call(module.exports, localRequire, module, module.exports, this);
48
- }
49
-
50
- return cache[name].exports;
51
-
52
- function localRequire(x){
53
- return newRequire(localRequire.resolve(x));
54
- }
55
-
56
- function resolve(x){
57
- return modules[name][1][x] || x;
58
- }
59
- }
60
-
61
- function Module(moduleName) {
62
- this.id = moduleName;
63
- this.bundle = newRequire;
64
- this.exports = {};
65
- }
66
-
67
- newRequire.isParcelRequire = true;
68
- newRequire.Module = Module;
69
- newRequire.modules = modules;
70
- newRequire.cache = cache;
71
- newRequire.parent = previousRequire;
72
- newRequire.register = function (id, exports) {
73
- modules[id] = [function (require, module) {
74
- module.exports = exports;
75
- }, {}];
76
- };
77
-
78
- var error;
79
- for (var i = 0; i < entry.length; i++) {
80
- try {
81
- newRequire(entry[i]);
82
- } catch (e) {
83
- // Save first error but execute all entries
84
- if (!error) {
85
- error = e;
86
- }
87
- }
88
- }
89
-
90
- if (entry.length) {
91
- // Expose entry point to Node, AMD or browser globals
92
- // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
93
- var mainExports = newRequire(entry[entry.length - 1]);
94
-
95
- // CommonJS
96
- if (typeof exports === "object" && typeof module !== "undefined") {
97
- module.exports = mainExports;
98
-
99
- // RequireJS
100
- } else if (typeof define === "function" && define.amd) {
101
- define(function () {
102
- return mainExports;
103
- });
104
-
105
- // <script>
106
- } else if (globalName) {
107
- this[globalName] = mainExports;
108
- }
109
- }
110
-
111
- // Override the current require with this new one
112
- parcelRequire = newRequire;
113
-
114
- if (error) {
115
- // throw error from earlier, _after updating parcelRequire_
116
- throw error;
117
- }
118
-
119
- return newRequire;
120
- })({"grid.tsx":[function(require,module,exports) {
121
- "use strict";
122
-
123
- Object.defineProperty(exports, "__esModule", {
124
- value: true
125
- });
126
- exports.default = App;
127
-
128
- var React = _interopRequireWildcard(require("react"));
129
-
130
- var _src = require("../src");
131
-
132
- var _styled = _interopRequireDefault(require("@emotion/styled"));
133
-
134
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
135
-
136
- function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
137
-
138
- 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; }
139
-
140
- function _templateObject3() {
141
- var data = _taggedTemplateLiteral(["\n display: flex;\n flex-wrap: wrap;\n"]);
142
-
143
- _templateObject3 = function _templateObject3() {
144
- return data;
145
- };
146
-
147
- return data;
148
- }
149
-
150
- function _templateObject2() {
151
- var data = _taggedTemplateLiteral(["\n flex: 1;\n text-align: center;\n font-size: 80%;\n padding: 20px;\n box-shadow: 0 5px 6px -6px #777;\n background: white;\n }\n"]);
152
-
153
- _templateObject2 = function _templateObject2() {
154
- return data;
155
- };
156
-
157
- return data;
158
- }
159
-
160
- function _templateObject() {
161
- var data = _taggedTemplateLiteral(["\n box-sizing: border-box;\n padding: 5px;\n width: 25%;\n background: #f5f5f5;\n display: flex;\n flex: none;\n align-content: stretch;\n /*\n @media (max-width: 1024px) {\n width: 33%;\n }\n\n @media (max-width: 768px) {\n width: 50%;\n }\n\n @media (max-width: 480px) {\n width: 100%;\n }\n */\n"]);
162
-
163
- _templateObject = function _templateObject() {
164
- return data;
165
- };
166
-
167
- return data;
168
- }
169
-
170
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
171
-
172
- var ItemContainer = _styled.default.div(_templateObject());
173
-
174
- var ItemWrapper = _styled.default.div(_templateObject2());
175
-
176
- var ListContainer = _styled.default.div(_templateObject3());
177
-
178
- function App() {
179
- var ref = React.createRef();
180
- return React.createElement(React.Fragment, null, React.createElement(_src.VirtuosoGrid, {
181
- ref: ref,
182
- components: {
183
- Item: ItemContainer,
184
- List: ListContainer,
185
- ScrollSeekPlaceholder: function ScrollSeekPlaceholder() {
186
- return React.createElement(ItemContainer, null, React.createElement(ItemWrapper, null, "Placeholder"));
187
- }
188
- },
189
- totalCount: 100,
190
- startReached: function startReached() {
191
- return console.log('start reached');
192
- },
193
- endReached: function endReached() {
194
- return console.log('end reached');
195
- },
196
- // rangeChanged={({ startIndex, endIndex }) => console.log({ startIndex, endIndex })}
197
- scrollSeekConfiguration: {
198
- enter: function enter(velocity) {
199
- return Math.abs(velocity) > 200;
200
- },
201
- exit: function exit(velocity) {
202
- return Math.abs(velocity) < 30;
203
- },
204
- change: function change(_, range) {
205
- return console.log({
206
- range: range
207
- });
208
- }
209
- },
210
- itemContent: function itemContent(index) {
211
- return React.createElement(ItemWrapper, null, "Item ", index);
212
- },
213
- style: {
214
- height: 300,
215
- width: 1200
216
- }
217
- }), React.createElement("button", {
218
- id: "start-30",
219
- onClick: function onClick() {
220
- return ref.current.scrollToIndex({
221
- index: 30,
222
- align: 'start'
223
- });
224
- }
225
- }, "Start 30"), React.createElement("button", {
226
- id: "center-50",
227
- onClick: function onClick() {
228
- return ref.current.scrollToIndex({
229
- index: 50,
230
- align: 'center',
231
- behavior: 'smooth'
232
- });
233
- }
234
- }, "Center 50"), React.createElement("button", {
235
- id: "end-99",
236
- onClick: function onClick() {
237
- return ref.current.scrollToIndex({
238
- index: 99,
239
- align: 'end'
240
- });
241
- }
242
- }, "End 99"));
243
- }
244
- },{"react":"../node_modules/react/index.js","../src":"../src/index.tsx","@emotion/styled":"../node_modules/@emotion/styled/dist/styled.browser.esm.js"}],"../node_modules/parcel-bundler/src/builtins/hmr-runtime.js":[function(require,module,exports) {
245
- var global = arguments[3];
246
- var OVERLAY_ID = '__parcel__error__overlay__';
247
- var OldModule = module.bundle.Module;
248
-
249
- function Module(moduleName) {
250
- OldModule.call(this, moduleName);
251
- this.hot = {
252
- data: module.bundle.hotData,
253
- _acceptCallbacks: [],
254
- _disposeCallbacks: [],
255
- accept: function (fn) {
256
- this._acceptCallbacks.push(fn || function () {});
257
- },
258
- dispose: function (fn) {
259
- this._disposeCallbacks.push(fn);
260
- }
261
- };
262
- module.bundle.hotData = null;
263
- }
264
-
265
- module.bundle.Module = Module;
266
- var checkedAssets, assetsToAccept;
267
- var parent = module.bundle.parent;
268
-
269
- if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
270
- var hostname = "" || location.hostname;
271
- var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
272
- var ws = new WebSocket(protocol + '://' + hostname + ':' + "65171" + '/');
273
-
274
- ws.onmessage = function (event) {
275
- checkedAssets = {};
276
- assetsToAccept = [];
277
- var data = JSON.parse(event.data);
278
-
279
- if (data.type === 'update') {
280
- var handled = false;
281
- data.assets.forEach(function (asset) {
282
- if (!asset.isNew) {
283
- var didAccept = hmrAcceptCheck(global.parcelRequire, asset.id);
284
-
285
- if (didAccept) {
286
- handled = true;
287
- }
288
- }
289
- }); // Enable HMR for CSS by default.
290
-
291
- handled = handled || data.assets.every(function (asset) {
292
- return asset.type === 'css' && asset.generated.js;
293
- });
294
-
295
- if (handled) {
296
- console.clear();
297
- data.assets.forEach(function (asset) {
298
- hmrApply(global.parcelRequire, asset);
299
- });
300
- assetsToAccept.forEach(function (v) {
301
- hmrAcceptRun(v[0], v[1]);
302
- });
303
- } else if (location.reload) {
304
- // `location` global exists in a web worker context but lacks `.reload()` function.
305
- location.reload();
306
- }
307
- }
308
-
309
- if (data.type === 'reload') {
310
- ws.close();
311
-
312
- ws.onclose = function () {
313
- location.reload();
314
- };
315
- }
316
-
317
- if (data.type === 'error-resolved') {
318
- console.log('[parcel] ✨ Error resolved');
319
- removeErrorOverlay();
320
- }
321
-
322
- if (data.type === 'error') {
323
- console.error('[parcel] 🚨 ' + data.error.message + '\n' + data.error.stack);
324
- removeErrorOverlay();
325
- var overlay = createErrorOverlay(data);
326
- document.body.appendChild(overlay);
327
- }
328
- };
329
- }
330
-
331
- function removeErrorOverlay() {
332
- var overlay = document.getElementById(OVERLAY_ID);
333
-
334
- if (overlay) {
335
- overlay.remove();
336
- }
337
- }
338
-
339
- function createErrorOverlay(data) {
340
- var overlay = document.createElement('div');
341
- overlay.id = OVERLAY_ID; // html encode message and stack trace
342
-
343
- var message = document.createElement('div');
344
- var stackTrace = document.createElement('pre');
345
- message.innerText = data.error.message;
346
- stackTrace.innerText = data.error.stack;
347
- overlay.innerHTML = '<div style="background: black; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; opacity: 0.85; font-family: Menlo, Consolas, monospace; z-index: 9999;">' + '<span style="background: red; padding: 2px 4px; border-radius: 2px;">ERROR</span>' + '<span style="top: 2px; margin-left: 5px; position: relative;">🚨</span>' + '<div style="font-size: 18px; font-weight: bold; margin-top: 20px;">' + message.innerHTML + '</div>' + '<pre>' + stackTrace.innerHTML + '</pre>' + '</div>';
348
- return overlay;
349
- }
350
-
351
- function getParents(bundle, id) {
352
- var modules = bundle.modules;
353
-
354
- if (!modules) {
355
- return [];
356
- }
357
-
358
- var parents = [];
359
- var k, d, dep;
360
-
361
- for (k in modules) {
362
- for (d in modules[k][1]) {
363
- dep = modules[k][1][d];
364
-
365
- if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) {
366
- parents.push(k);
367
- }
368
- }
369
- }
370
-
371
- if (bundle.parent) {
372
- parents = parents.concat(getParents(bundle.parent, id));
373
- }
374
-
375
- return parents;
376
- }
377
-
378
- function hmrApply(bundle, asset) {
379
- var modules = bundle.modules;
380
-
381
- if (!modules) {
382
- return;
383
- }
384
-
385
- if (modules[asset.id] || !bundle.parent) {
386
- var fn = new Function('require', 'module', 'exports', asset.generated.js);
387
- asset.isNew = !modules[asset.id];
388
- modules[asset.id] = [fn, asset.deps];
389
- } else if (bundle.parent) {
390
- hmrApply(bundle.parent, asset);
391
- }
392
- }
393
-
394
- function hmrAcceptCheck(bundle, id) {
395
- var modules = bundle.modules;
396
-
397
- if (!modules) {
398
- return;
399
- }
400
-
401
- if (!modules[id] && bundle.parent) {
402
- return hmrAcceptCheck(bundle.parent, id);
403
- }
404
-
405
- if (checkedAssets[id]) {
406
- return;
407
- }
408
-
409
- checkedAssets[id] = true;
410
- var cached = bundle.cache[id];
411
- assetsToAccept.push([bundle, id]);
412
-
413
- if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
414
- return true;
415
- }
416
-
417
- return getParents(global.parcelRequire, id).some(function (id) {
418
- return hmrAcceptCheck(global.parcelRequire, id);
419
- });
420
- }
421
-
422
- function hmrAcceptRun(bundle, id) {
423
- var cached = bundle.cache[id];
424
- bundle.hotData = {};
425
-
426
- if (cached) {
427
- cached.hot.data = bundle.hotData;
428
- }
429
-
430
- if (cached && cached.hot && cached.hot._disposeCallbacks.length) {
431
- cached.hot._disposeCallbacks.forEach(function (cb) {
432
- cb(bundle.hotData);
433
- });
434
- }
435
-
436
- delete bundle.cache[id];
437
- bundle(id);
438
- cached = bundle.cache[id];
439
-
440
- if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
441
- cached.hot._acceptCallbacks.forEach(function (cb) {
442
- cb();
443
- });
444
-
445
- return true;
446
- }
447
- }
448
- },{}]},{},["../node_modules/parcel-bundler/src/builtins/hmr-runtime.js"], null)
449
- //# sourceMappingURL=/grid.d5d77b6a.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["grid.tsx"],"names":[],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAM,aAAa,GAAG,gBAAO,GAAV,mBAAnB;;AAuBA,IAAM,WAAW,GAAG,gBAAO,GAAV,oBAAjB;;AAUA,IAAM,aAAa,GAAG,gBAAO,GAAV,oBAAnB;;AAKc,SAAU,GAAV,GAAa;AACzB,MAAM,GAAG,GAAG,KAAK,CAAC,SAAN,EAAZ;AAEA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACE,KAAA,CAAA,aAAA,CAAC,iBAAD,EAAa;AACX,IAAA,GAAG,EAAE,GADM;AAEX,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,aADI;AAEV,MAAA,IAAI,EAAE,aAFI;AAGV,MAAA,qBAAqB,EAAE;AAAA,eACrB,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc,IAAd,EACE,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,EAAY,aAAZ,CADF,CADqB;AAAA;AAHb,KAFD;AAWX,IAAA,UAAU,EAAE,GAXD;AAYX,IAAA,YAAY,EAAE;AAAA,aAAM,OAAO,CAAC,GAAR,CAAY,eAAZ,CAAN;AAAA,KAZH;AAaX,IAAA,UAAU,EAAE;AAAA,aAAM,OAAO,CAAC,GAAR,CAAY,aAAZ,CAAN;AAAA,KAbD;AAcX;AACA,IAAA,uBAAuB,EAAE;AACvB,MAAA,KAAK,EAAE,eAAC,QAAD;AAAA,eAAc,IAAI,CAAC,GAAL,CAAS,QAAT,IAAqB,GAAnC;AAAA,OADgB;AAEvB,MAAA,IAAI,EAAE,cAAC,QAAD;AAAA,eAAc,IAAI,CAAC,GAAL,CAAS,QAAT,IAAqB,EAAnC;AAAA,OAFiB;AAGvB,MAAA,MAAM,EAAE,gBAAC,CAAD,EAAI,KAAJ;AAAA,eAAc,OAAO,CAAC,GAAR,CAAY;AAAE,UAAA,KAAK,EAAL;AAAF,SAAZ,CAAd;AAAA;AAHe,KAfd;AAoBX,IAAA,WAAW,EAAE,qBAAC,KAAD;AAAA,aAAW,KAAA,CAAA,aAAA,CAAC,WAAD,EAAY,IAAZ,SAAA,EAAmB,KAAnB,CAAX;AAAA,KApBF;AAqBX,IAAA,KAAK,EAAE;AAAE,MAAA,MAAM,EAAE,GAAV;AAAe,MAAA,KAAK,EAAE;AAAtB;AArBI,GAAb,CADF,EAyBE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,EAAE,EAAC,UAAX;AAAsB,IAAA,OAAO,EAAE;AAAA,aAAM,GAAG,CAAC,OAAJ,CAAa,aAAb,CAA2B;AAAE,QAAA,KAAK,EAAE,EAAT;AAAa,QAAA,KAAK,EAAE;AAApB,OAA3B,CAAN;AAAA;AAA/B,GAAA,EAA8F,UAA9F,CAzBF,EA4BE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,EAAE,EAAC,WAAX;AAAuB,IAAA,OAAO,EAAE;AAAA,aAAM,GAAG,CAAC,OAAJ,CAAa,aAAb,CAA2B;AAAE,QAAA,KAAK,EAAE,EAAT;AAAa,QAAA,KAAK,EAAE,QAApB;AAA8B,QAAA,QAAQ,EAAE;AAAxC,OAA3B,CAAN;AAAA;AAAhC,GAAA,EAAoH,WAApH,CA5BF,EA+BE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAQ,IAAA,EAAE,EAAC,QAAX;AAAoB,IAAA,OAAO,EAAE;AAAA,aAAM,GAAG,CAAC,OAAJ,CAAa,aAAb,CAA2B;AAAE,QAAA,KAAK,EAAE,EAAT;AAAa,QAAA,KAAK,EAAE;AAApB,OAA3B,CAAN;AAAA;AAA7B,GAAA,EAA0F,QAA1F,CA/BF,CADF;AAqCD","file":"grid.d5d77b6a.js","sourceRoot":"../e2e","sourcesContent":["import * as React from 'react'\nimport { VirtuosoGrid, VirtuosoGridHandle, GridComponents } from '../src'\nimport styled from '@emotion/styled'\n\nconst ItemContainer = styled.div`\n box-sizing: border-box;\n padding: 5px;\n width: 25%;\n background: #f5f5f5;\n display: flex;\n flex: none;\n align-content: stretch;\n /*\n @media (max-width: 1024px) {\n width: 33%;\n }\n\n @media (max-width: 768px) {\n width: 50%;\n }\n\n @media (max-width: 480px) {\n width: 100%;\n }\n */\n`\n\nconst ItemWrapper = styled.div`\n flex: 1;\n text-align: center;\n font-size: 80%;\n padding: 20px;\n box-shadow: 0 5px 6px -6px #777;\n background: white;\n }\n`\n\nconst ListContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n` as GridComponents['List']\n\nexport default function App() {\n const ref = React.createRef<VirtuosoGridHandle>()\n\n return (\n <>\n <VirtuosoGrid\n ref={ref}\n components={{\n Item: ItemContainer,\n List: ListContainer,\n ScrollSeekPlaceholder: () => (\n <ItemContainer>\n <ItemWrapper>Placeholder</ItemWrapper>\n </ItemContainer>\n ),\n }}\n totalCount={100}\n startReached={() => console.log('start reached')}\n endReached={() => console.log('end reached')}\n // rangeChanged={({ startIndex, endIndex }) => console.log({ startIndex, endIndex })}\n scrollSeekConfiguration={{\n enter: (velocity) => Math.abs(velocity) > 200,\n exit: (velocity) => Math.abs(velocity) < 30,\n change: (_, range) => console.log({ range }),\n }}\n itemContent={(index) => <ItemWrapper>Item {index}</ItemWrapper>}\n style={{ height: 300, width: 1200 }}\n />\n\n <button id=\"start-30\" onClick={() => ref.current!.scrollToIndex({ index: 30, align: 'start' })}>\n Start 30\n </button>\n <button id=\"center-50\" onClick={() => ref.current!.scrollToIndex({ index: 50, align: 'center', behavior: 'smooth' })}>\n Center 50\n </button>\n <button id=\"end-99\" onClick={() => ref.current!.scrollToIndex({ index: 99, align: 'end' })}>\n End 99\n </button>\n </>\n )\n}\n"]}