virtual-scroller 1.11.2 → 1.12.0

package/commonjs/react/useState.js

@@ -1,17 +1,23 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = _useState;
 
+var _debug = _interopRequireWildcard(require("../utility/debug.js"));
+
+var _getStateSnapshot = _interopRequireDefault(require("../utility/getStateSnapshot.js"));
+
 var _react = require("react");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-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 _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -29,16 +35,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _useState(_ref) {
   var initialState = _ref.initialState,
       onRender = _ref.onRender,
-      itemsProperty = _ref.itemsProperty,
-      USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION = _ref.USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION;
+      itemsProperty = _ref.itemsProperty;
 
-  // This is a utility state variable that is used to re-render the component.
-  // It should not be used to access the current `VirtualScroller` state.
-  // It's more of a "requested" `VirtualScroller` state.
-  //
-  // It will also be stale in cases when `USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION`
-  // feature is used for setting new `items` in state.
-  //
+  // This is a state variable that is used to re-render the component.
+  // Right after the component has finished re-rendering,
+  // `VirtualScroller` state gets updated from this variable.
+  // The reason for that is that `VirtualScroller` state must always
+  // correspond exactly to what's currently rendered on the screen.
   var _useState2 = (0, _react.useState)(initialState),
       _useState3 = _slicedToArray(_useState2, 2),
       _newState = _useState3[0],
@@ -47,72 +50,162 @@ function _useState(_ref) {
 
 
   var state = (0, _react.useRef)(initialState);
+  var getState = (0, _react.useCallback)(function () {
+    return state.current;
+  }, []);
   var setState = (0, _react.useCallback)(function (newState) {
     state.current = newState;
-  }, []); // Accumulates all "pending" state updates until they have been applied.
+  }, []); // Updating of the actual `VirtualScroller` state is done in a
+  // `useInsertionEffect()` rather than in a `useLayoutEffect()`.
+  //
+  // The reason is that using `useLayoutEffect()` would result in
+  // "breaking" the `<VirtualScroller/>` when an `itemComponent`
+  // called `onHeightDidChange()` from its own `useLayoutEffect()`.
+  // In those cases, the `itemCompoent`'s effect would run before
+  // the `<VirtualScroller/>`'s effect, resulting in
+  // `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time
+  // when the DOM has already been updated for the next `VirtualScroller` state
+  // but the actual `VirtualScroller` state is still a previous ("stale") one
+  // containing "stale" first/last shown item indexes, which would result in an
+  // "index out of bounds" error when `onItemHeightDidChange(i)` tries to access
+  // and measure the DOM element from item index `i` which doesn't already/yet exist.
+  //
+  // An example of such situation could be seen from a `VirtualScroller` debug log
+  // which was captured for a case when using `useLayoutEffect()` to update the
+  // "actual" `VirtualScroller` state after the corresponding DOM changes have been applied:
+  // The user has scrolled far enough: perform a re-layout
+  // ~ Update Layout (on scroll) ~
+  //
+  // Item index 2 height is required for calculations but hasn't been measured yet. Mark the item as "shown", rerender the list, measure the item's height and redo the layout.
+  //
+  // ~ Calculated Layout ~
+  // Columns count 1
+  // First shown item index 2
+  // Last shown item index 5
+  // …
+  // Item heights (231) [1056.578125, 783.125, empty × 229]
+  // Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
+  //
+  // ~ Set state ~
+  // {firstShownItemIndex: 2, lastShownItemIndex: 5, …}
+  //
+  // ~ Rendered ~
+  // State {firstShownItemIndex: 2, lastShownItemIndex: 5, …}
+  //
+  // ~ Measure item heights ~
+  // Item index 2 height 719.8828125
+  // Item index 3 height 961.640625
+  // Item index 4 height 677.6640625
+  // Item index 5 height 1510.1953125
+  //
+  // ~ Update Layout (on non-measured item heights have been measured) ~
+  //
+  // ~ Calculated Layout ~
+  // Columns count 1
+  // First shown item index 4
+  // Last shown item index 5
+  // …
+  // Item heights (231) [1056.578125, 783.125, 719.8828125, 961.640625, 677.6640625, 1510.1953125, empty × 225]
+  // Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
+  //
+  // ~ Set state ~
+  // {firstShownItemIndex: 4, lastShownItemIndex: 5, beforeItemsHeight: 3521.2265625, afterItemsHeight: 214090.72265624942}
+  //
+  // ~ On Item Height Did Change was called ~
+  // Item index 5
+  // ~ Re-measure item height ~
+  // ERROR "onItemHeightDidChange()" has been called for item index 5 but the item is not currently rendered and can't be measured. The exact error was: Element with index 3 was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only 2 Elements there.
+  //
+  // React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~
+  // {firstShownItemIndex: 4, lastShownItemIndex: 5, …}
+  //
+  // ~ Rendered ~
+  // "~ Rendered ~" is what gets output when `onRender()` function gets called.
+  // It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`
+  // was called and after the "ERROR" happened.
+  //
+  // The "ERROR" happened because new item indexes 4…5 were actually rendered instead of
+  // item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function
+  // inside `itemComponent`'s `useLayoutEffect()`.
+  // Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.
+  // This means that `_newState` changes have been applied to the DOM
+  // but `useLayoutEffect()` wasn't triggered immediately after that.
+  // Instead, it was triggered a right after the `itemComponent`'s `useLayoutEffect()`
+  // because child effects run before parent effects.
+  // So, the `itemComponent`'s `onHeightDidChange()` function call caught the
+  // `VirtualScroller` in an inconsistent state.
+  //
+  // To fix that, `useLayoutEffect()` gets replaced with `useInsertionEffect()`:
+  // https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect
+  // https://beta.reactjs.org/reference/react/useInsertionEffect
+  //
+  // After replacing `useLayoutEffect()` with `useInsertionEffect()`,
+  // the log shows that there's no more error:
+  //
+  // ~ Set state ~
+  // {firstShownItemIndex: 0, lastShownItemIndex: 2, …}
+  //
+  // React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~
+  // {firstShownItemIndex: 0, lastShownItemIndex: 2, …}
+  //
+  // ~ On Item Height Did Change was called ~
+  // Item index 0
+  // ~ Re-measure item height ~
+  // Previous height 917
+  // New height 1064.453125
+  // ~ Item height has changed ~
+  //
+  // An alternative solution would be demanding the `itemComponent` to
+  // accept a `ref` and then measuring the corresponding DOM element height
+  // directly using the `ref`-ed DOM element rather than searching for that
+  // DOM element in the `ItemsContainer`.
+  // So if `useInsertionEffect()` gets removed from React in some hypothetical future,
+  // it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.
+  //
 
-  var nextState = (0, _react.useRef)(initialState); // Updates the actual `VirtualScroller` state right after a requested state update
-  // has been applied. Doesn't do anything at initial render.
+  (0, _react.useInsertionEffect)(function () {
+    // Update the actual `VirtualScroller` state right before the DOM changes
+    // are going to be applied for the requested state update.
+    //
+    // This hook will run right before `useLayoutEffect()`.
+    //
+    // It doesn't make any difference which one of the two hooks to use to update
+    // the actual `VirtualScroller` state in this scenario because the two hooks
+    // run synchronously one right after another (insertion effect → DOM update → layout effect)
+    // without any free space for any `VirtualScroller` code (like the scroll event handler)
+    // to squeeze in and run in-between them, so the `VirtualScroller`'s `state`
+    // is always gonna stay consistent with what's currently rendered on screen
+    // from the `VirtualScroler`'s point of view, and the short transition period
+    // it simply doesn't see because it doesn't "wake up" during that period.
+    //
+    // Updating the actual `VirtualScroller` state right before `useLayoutEffect()`
+    // fixes the bug when an `itemComponent` calls `onHeightDidChange()` in its own
+    // `useLayoutEffect()` which would run before this `useLayoutEffect()`
+    // because children's effects run before parent's.
+    //
+    // This hook doesn't do anything at the initial render.
+    //
+    if ((0, _debug.isDebug)()) {
+      (0, _debug["default"])('React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~');
+      (0, _debug["default"])((0, _getStateSnapshot["default"])(_newState));
+    }
 
-  (0, _react.useLayoutEffect)(function () {
     setState(_newState);
-  }, [_newState]); // Calls `onRender()` right after every state update (which is a re-render),
-  // and also right after the initial render.
-
+  }, [_newState]);
   (0, _react.useLayoutEffect)(function () {
+    // Call `onRender()` right after a requested state update has been applied,
+    // and also right after the initial render.
     onRender();
-  }, [_newState, // When using `USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION` feature,
-  // there won't be a `_setNewState()` function call when `items` property changes,
-  // hence the additional `itemsProperty` dependency.
-  USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION ? itemsProperty : undefined]);
+  }, [_newState]);
   return {
-    getState: function getState() {
-      return state.current;
-    },
-    getNextState: function getNextState() {
-      return nextState.current;
-    },
+    // This is the state the component should render.
+    stateToRender: _newState,
+    // Returns the current state of the `VirtualScroller`.
+    // This function is used in the `VirtualScroller` itself
+    // because the `state` is managed outside of it.
+    getState: getState,
     // Requests a state update.
-    //
-    // State updates are incremental meaning that this function mimicks
-    // the classic `React.Component`'s `this.setState()` behavior
-    // when calling `this.setState()` didn't replace `state` but rather merged
-    // the updated state properties over the "old" state properties.
-    //
-    // The reason for using pending state updates accumulation is that
-    // `useState()` updates are "asynchronous" (not immediate),
-    // and simply merging over `...state` would merge over potentially stale
-    // property values in cases when more than a single `updateState()` call is made
-    // before the state actually updates, resulting in losing some of those state updates.
-    //
-    // Example: the first `updateState()` call updates shown item indexes,
-    // and the second `updateState()` call updates `verticalSpacing`.
-    // If it was simply `updateState({ ...state, ...stateUpdate })`
-    // then the second state update could overwrite the first state update,
-    // resulting in incorrect items being shown/hidden.
-    //
-    updateState: function updateState(stateUpdate) {
-      nextState.current = _objectSpread(_objectSpread({}, nextState.current), stateUpdate); // If `items` property did change, the component detects it at render time
-      // and updates `VirtualScroller` items immediately by calling `.setItems()`,
-      // which, in turn, immediately calls this `updateState()` function
-      // with a `stateUpdate` argument that contains the new `items`,
-      // so checking for `stateUpdate.items` could detect situations like that.
-      //
-      // When the initial `VirtualScroller` state is being set, it contains the `.items`
-      // property too, but that initial setting is done using another function called
-      // `setInitialState()`, so using `if (stateUpdate.items)` condition here for describing
-      // just the case when `state` has been updated as a result of a `setItems()` call
-      // seems to be fine.
-      //
-
-      var _newState = nextState.current;
-
-      if (stateUpdate.items && USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION) {
-        setState(_newState);
-      } else {
-        _setNewState(_newState);
-      }
-    }
+    setState: _setNewState
   };
 }
 //# sourceMappingURL=useState.js.map

package/commonjs/react/useState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useState.js","names":["_useState","initialState","onRender","itemsProperty","USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION","useState","_newState","_setNewState","state","useRef","setState","useCallback","newState","current","nextState","useLayoutEffect","undefined","getState","getNextState","updateState","stateUpdate","items"],"sources":["../../source/react/useState.js"],"sourcesContent":["import { useState, useRef, useCallback, useLayoutEffect } from 'react'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender,\r\n\titemsProperty,\r\n\tUSE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION\r\n}) {\r\n\t// This is a utility state variable that is used to re-render the component.\r\n\t// It should not be used to access the current `VirtualScroller` state.\r\n\t// It's more of a \"requested\" `VirtualScroller` state.\r\n\t//\r\n\t// It will also be stale in cases when `USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION`\r\n\t// feature is used for setting new `items` in state.\r\n\t//\r\n\tconst [_newState, _setNewState] = useState(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Accumulates all \"pending\" state updates until they have been applied.\r\n\tconst nextState = useRef(initialState)\r\n\r\n\t// Updates the actual `VirtualScroller` state right after a requested state update\r\n\t// has been applied. Doesn't do anything at initial render.\r\n\tuseLayoutEffect(() => {\r\n\t\tsetState(_newState)\r\n\t}, [\r\n\t\t_newState\r\n\t])\r\n\r\n\t// Calls `onRender()` right after every state update (which is a re-render),\r\n\t// and also right after the initial render.\r\n\tuseLayoutEffect(() => {\r\n\t\tonRender()\r\n\t}, [\r\n\t\t_newState,\r\n\t\t// When using `USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION` feature,\r\n\t\t// there won't be a `_setNewState()` function call when `items` property changes,\r\n\t\t// hence the additional `itemsProperty` dependency.\r\n\t\tUSE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION ? itemsProperty : undefined\r\n\t])\r\n\r\n\treturn {\r\n\t\tgetState: () => state.current,\r\n\r\n\t\tgetNextState: () => nextState.current,\r\n\r\n\t\t// Requests a state update.\r\n\t\t//\r\n\t\t// State updates are incremental meaning that this function mimicks\r\n\t\t// the classic `React.Component`'s `this.setState()` behavior\r\n\t\t// when calling `this.setState()` didn't replace `state` but rather merged\r\n\t\t// the updated state properties over the \"old\" state properties.\r\n\t\t//\r\n\t\t// The reason for using pending state updates accumulation is that\r\n\t\t// `useState()` updates are \"asynchronous\" (not immediate),\r\n\t\t// and simply merging over `...state` would merge over potentially stale\r\n\t\t// property values in cases when more than a single `updateState()` call is made\r\n\t\t// before the state actually updates, resulting in losing some of those state updates.\r\n\t\t//\r\n\t\t// Example: the first `updateState()` call updates shown item indexes,\r\n\t\t// and the second `updateState()` call updates `verticalSpacing`.\r\n\t\t// If it was simply `updateState({ ...state, ...stateUpdate })`\r\n\t\t// then the second state update could overwrite the first state update,\r\n\t\t// resulting in incorrect items being shown/hidden.\r\n\t\t//\r\n\t\tupdateState: (stateUpdate) => {\r\n\t\t\tnextState.current = {\r\n\t\t\t\t...nextState.current,\r\n\t\t\t\t...stateUpdate\r\n\t\t\t}\r\n\t\t\t// If `items` property did change, the component detects it at render time\r\n\t\t\t// and updates `VirtualScroller` items immediately by calling `.setItems()`,\r\n\t\t\t// which, in turn, immediately calls this `updateState()` function\r\n\t\t\t// with a `stateUpdate` argument that contains the new `items`,\r\n\t\t\t// so checking for `stateUpdate.items` could detect situations like that.\r\n\t\t\t//\r\n\t\t\t// When the initial `VirtualScroller` state is being set, it contains the `.items`\r\n\t\t\t// property too, but that initial setting is done using another function called\r\n\t\t\t// `setInitialState()`, so using `if (stateUpdate.items)` condition here for describing\r\n\t\t\t// just the case when `state` has been updated as a result of a `setItems()` call\r\n\t\t\t// seems to be fine.\r\n\t\t\t//\r\n\t\t\tconst _newState = nextState.current\r\n\t\t\tif (stateUpdate.items && USE_ITEMS_UPDATE_NO_SECOND_RENDER_OPTIMIZATION) {\r\n\t\t\t\tsetState(_newState)\r\n\t\t\t} else {\r\n\t\t\t\t_setNewState(_newState)\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;;;;;;;;;;;;;;;;;AAEA;AACe,SAASA,SAAT,OAKZ;EAAA,IAJFC,YAIE,QAJFA,YAIE;EAAA,IAHFC,QAGE,QAHFA,QAGE;EAAA,IAFFC,aAEE,QAFFA,aAEE;EAAA,IADFC,8CACE,QADFA,8CACE;;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAAkC,IAAAC,eAAA,EAASJ,YAAT,CAAlC;EAAA;EAAA,IAAOK,SAAP;EAAA,IAAkBC,YAAlB,iBARE,CAUF;EACA;;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOR,YAAP,CAAd;EAEA,IAAMS,QAAQ,GAAG,IAAAC,kBAAA,EAAY,UAACC,QAAD,EAAc;IAC1CJ,KAAK,CAACK,OAAN,GAAgBD,QAAhB;EACA,CAFgB,EAEd,EAFc,CAAjB,CAdE,CAkBF;;EACA,IAAME,SAAS,GAAG,IAAAL,aAAA,EAAOR,YAAP,CAAlB,CAnBE,CAqBF;EACA;;EACA,IAAAc,sBAAA,EAAgB,YAAM;IACrBL,QAAQ,CAACJ,SAAD,CAAR;EACA,CAFD,EAEG,CACFA,SADE,CAFH,EAvBE,CA6BF;EACA;;EACA,IAAAS,sBAAA,EAAgB,YAAM;IACrBb,QAAQ;EACR,CAFD,EAEG,CACFI,SADE,EAEF;EACA;EACA;EACAF,8CAA8C,GAAGD,aAAH,GAAmBa,SAL/D,CAFH;EAUA,OAAO;IACNC,QAAQ,EAAE;MAAA,OAAMT,KAAK,CAACK,OAAZ;IAAA,CADJ;IAGNK,YAAY,EAAE;MAAA,OAAMJ,SAAS,CAACD,OAAhB;IAAA,CAHR;IAKN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACAM,WAAW,EAAE,qBAACC,WAAD,EAAiB;MAC7BN,SAAS,CAACD,OAAV,mCACIC,SAAS,CAACD,OADd,GAEIO,WAFJ,EAD6B,CAK7B;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;MACA;;MACA,IAAMd,SAAS,GAAGQ,SAAS,CAACD,OAA5B;;MACA,IAAIO,WAAW,CAACC,KAAZ,IAAqBjB,8CAAzB,EAAyE;QACxEM,QAAQ,CAACJ,SAAD,CAAR;MACA,CAFD,MAEO;QACNC,YAAY,CAACD,SAAD,CAAZ;MACA;IACD;EA/CK,CAAP;AAiDA"}
+{"version":3,"file":"useState.js","names":["_useState","initialState","onRender","itemsProperty","useState","_newState","_setNewState","state","useRef","getState","useCallback","current","setState","newState","useInsertionEffect","isDebug","log","getStateSnapshot","useLayoutEffect","stateToRender"],"sources":["../../source/react/useState.js"],"sourcesContent":["import log, { isDebug } from '../utility/debug.js'\r\nimport getStateSnapshot from '../utility/getStateSnapshot.js'\r\n\r\nimport { useState, useRef, useCallback, useLayoutEffect, useInsertionEffect } from 'react'\r\n\r\n// Creates state management functions.\r\nexport default function _useState({\r\n\tinitialState,\r\n\tonRender,\r\n\titemsProperty\r\n}) {\r\n\t// This is a state variable that is used to re-render the component.\r\n\t// Right after the component has finished re-rendering,\r\n\t// `VirtualScroller` state gets updated from this variable.\r\n\t// The reason for that is that `VirtualScroller` state must always\r\n\t// correspond exactly to what's currently rendered on the screen.\r\n\tconst [_newState, _setNewState] = useState(initialState)\r\n\r\n\t// This `state` reference is what `VirtualScroller` uses internally.\r\n\t// It's the \"source of truth\" on the actual `VirtualScroller` state.\r\n\tconst state = useRef(initialState)\r\n\r\n\tconst getState = useCallback(() => {\r\n\t\treturn state.current\r\n\t}, [])\r\n\r\n\tconst setState = useCallback((newState) => {\r\n\t\tstate.current = newState\r\n\t}, [])\r\n\r\n\t// Updating of the actual `VirtualScroller` state is done in a\r\n\t// `useInsertionEffect()` rather than in a `useLayoutEffect()`.\r\n\t//\r\n\t// The reason is that using `useLayoutEffect()` would result in\r\n\t// \"breaking\" the `<VirtualScroller/>` when an `itemComponent`\r\n\t// called `onHeightDidChange()` from its own `useLayoutEffect()`.\r\n\t// In those cases, the `itemCompoent`'s effect would run before\r\n\t// the `<VirtualScroller/>`'s effect, resulting in\r\n\t// `VirtualScroller.onItemHeightDidChange(i)` being run at a moment in time\r\n\t// when the DOM has already been updated for the next `VirtualScroller` state\r\n\t// but the actual `VirtualScroller` state is still a previous (\"stale\") one\r\n\t// containing \"stale\" first/last shown item indexes, which would result in an\r\n\t// \"index out of bounds\" error when `onItemHeightDidChange(i)` tries to access\r\n\t// and measure the DOM element from item index `i` which doesn't already/yet exist.\r\n\t//\r\n\t// An example of such situation could be seen from a `VirtualScroller` debug log\r\n\t// which was captured for a case when using `useLayoutEffect()` to update the\r\n\t// \"actual\" `VirtualScroller` state after the corresponding DOM changes have been applied:\r\n\r\n\t// The user has scrolled far enough: perform a re-layout\r\n\t// ~ Update Layout (on scroll) ~\r\n\t//\r\n\t// Item index 2 height is required for calculations but hasn't been measured yet. Mark the item as \"shown\", rerender the list, measure the item's height and redo the layout.\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 2\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, empty × 229]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\t// State {firstShownItemIndex: 2, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Measure item heights ~\r\n\t// Item index 2 height 719.8828125\r\n\t// Item index 3 height 961.640625\r\n\t// Item index 4 height 677.6640625\r\n\t// Item index 5 height 1510.1953125\r\n\t//\r\n\t// ~ Update Layout (on non-measured item heights have been measured) ~\r\n\t//\r\n\t// ~ Calculated Layout ~\r\n\t// Columns count 1\r\n\t// First shown item index 4\r\n\t// Last shown item index 5\r\n\t// …\r\n\t// Item heights (231) [1056.578125, 783.125, 719.8828125, 961.640625, 677.6640625, 1510.1953125, empty × 225]\r\n\t// Item states (231) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, beforeItemsHeight: 3521.2265625, afterItemsHeight: 214090.72265624942}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 5\r\n\t// ~ Re-measure item height ~\r\n\t// ERROR \"onItemHeightDidChange()\" has been called for item index 5 but the item is not currently rendered and can't be measured. The exact error was: Element with index 3 was not found in the list of Rendered Item Elements in the Items Container of Virtual Scroller. There're only 2 Elements there.\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 4, lastShownItemIndex: 5, …}\r\n\t//\r\n\t// ~ Rendered ~\r\n\r\n\t// \"~ Rendered ~\" is what gets output when `onRender()` function gets called.\r\n\t// It means that `useLayoutEffect()` was triggered after `onItemHeightDidChange(i)`\r\n\t// was called and after the \"ERROR\" happened.\r\n\t//\r\n\t// The \"ERROR\" happened because new item indexes 4…5 were actually rendered instead of\r\n\t// item indexes 2…5 by the time the application called `onItemHeightDidChange(i)` function\r\n\t// inside `itemComponent`'s `useLayoutEffect()`.\r\n\t// Item indexes 4…5 is what was requested in a `setState()` call, which called `_setNewState()`.\r\n\t// This means that `_newState` changes have been applied to the DOM\r\n\t// but `useLayoutEffect()` wasn't triggered immediately after that.\r\n\t// Instead, it was triggered a right after the `itemComponent`'s `useLayoutEffect()`\r\n\t// because child effects run before parent effects.\r\n\t// So, the `itemComponent`'s `onHeightDidChange()` function call caught the\r\n\t// `VirtualScroller` in an inconsistent state.\r\n\t//\r\n\t// To fix that, `useLayoutEffect()` gets replaced with `useInsertionEffect()`:\r\n\t// https://blog.saeloun.com/2022/06/02/react-18-useinsertioneffect\r\n\t// https://beta.reactjs.org/reference/react/useInsertionEffect\r\n\t//\r\n\t// After replacing `useLayoutEffect()` with `useInsertionEffect()`,\r\n\t// the log shows that there's no more error:\r\n\t//\r\n\t// ~ Set state ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~\r\n\t// {firstShownItemIndex: 0, lastShownItemIndex: 2, …}\r\n\t//\r\n\t// ~ On Item Height Did Change was called ~\r\n\t// Item index 0\r\n\t// ~ Re-measure item height ~\r\n\t// Previous height 917\r\n\t// New height 1064.453125\r\n\t// ~ Item height has changed ~\r\n\t//\r\n\t// An alternative solution would be demanding the `itemComponent` to\r\n\t// accept a `ref` and then measuring the corresponding DOM element height\r\n\t// directly using the `ref`-ed DOM element rather than searching for that\r\n\t// DOM element in the `ItemsContainer`.\r\n\t// So if `useInsertionEffect()` gets removed from React in some hypothetical future,\r\n\t// it could be replaced with using `ref`s on `ItemComponent`s to measure the DOM element heights.\r\n\t//\r\n\tuseInsertionEffect(() => {\r\n\t\t// Update the actual `VirtualScroller` state right before the DOM changes\r\n\t\t// are going to be applied for the requested state update.\r\n\t\t//\r\n\t\t// This hook will run right before `useLayoutEffect()`.\r\n\t\t//\r\n\t\t// It doesn't make any difference which one of the two hooks to use to update\r\n\t\t// the actual `VirtualScroller` state in this scenario because the two hooks\r\n\t\t// run synchronously one right after another (insertion effect → DOM update → layout effect)\r\n\t\t// without any free space for any `VirtualScroller` code (like the scroll event handler)\r\n\t\t// to squeeze in and run in-between them, so the `VirtualScroller`'s `state`\r\n\t\t// is always gonna stay consistent with what's currently rendered on screen\r\n\t\t// from the `VirtualScroler`'s point of view, and the short transition period\r\n\t\t// it simply doesn't see because it doesn't \"wake up\" during that period.\r\n\t\t//\r\n\t\t// Updating the actual `VirtualScroller` state right before `useLayoutEffect()`\r\n\t\t// fixes the bug when an `itemComponent` calls `onHeightDidChange()` in its own\r\n\t\t// `useLayoutEffect()` which would run before this `useLayoutEffect()`\r\n\t\t// because children's effects run before parent's.\r\n\t\t//\r\n\t\t// This hook doesn't do anything at the initial render.\r\n\t\t//\r\n\t\tif (isDebug()) {\r\n\t\t\tlog('React: ~ The requested state is about to be applied in DOM. Set it as the `VirtualScroller` state. ~')\r\n\t\t\tlog(getStateSnapshot(_newState))\r\n\t\t}\r\n\t\tsetState(_newState)\r\n\t}, [_newState])\r\n\r\n\tuseLayoutEffect(() => {\r\n\t\t// Call `onRender()` right after a requested state update has been applied,\r\n\t\t// and also right after the initial render.\r\n\t\tonRender()\r\n\t}, [_newState])\r\n\r\n\treturn {\r\n\t\t// This is the state the component should render.\r\n\t\tstateToRender: _newState,\r\n\r\n\t\t// Returns the current state of the `VirtualScroller`.\r\n\t\t// This function is used in the `VirtualScroller` itself\r\n\t\t// because the `state` is managed outside of it.\r\n\t\tgetState,\r\n\r\n\t\t// Requests a state update.\r\n\t\tsetState: _setNewState\r\n\t}\r\n}"],"mappings":";;;;;;;;;AAAA;;AACA;;AAEA;;;;;;;;;;;;;;;;;;;;AAEA;AACe,SAASA,SAAT,OAIZ;EAAA,IAHFC,YAGE,QAHFA,YAGE;EAAA,IAFFC,QAEE,QAFFA,QAEE;EAAA,IADFC,aACE,QADFA,aACE;;EACF;EACA;EACA;EACA;EACA;EACA,iBAAkC,IAAAC,eAAA,EAASH,YAAT,CAAlC;EAAA;EAAA,IAAOI,SAAP;EAAA,IAAkBC,YAAlB,iBANE,CAQF;EACA;;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOP,YAAP,CAAd;EAEA,IAAMQ,QAAQ,GAAG,IAAAC,kBAAA,EAAY,YAAM;IAClC,OAAOH,KAAK,CAACI,OAAb;EACA,CAFgB,EAEd,EAFc,CAAjB;EAIA,IAAMC,QAAQ,GAAG,IAAAF,kBAAA,EAAY,UAACG,QAAD,EAAc;IAC1CN,KAAK,CAACI,OAAN,GAAgBE,QAAhB;EACA,CAFgB,EAEd,EAFc,CAAjB,CAhBE,CAoBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EACA,IAAAC,yBAAA,EAAmB,YAAM;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAI,IAAAC,cAAA,GAAJ,EAAe;MACd,IAAAC,iBAAA,EAAI,sGAAJ;MACA,IAAAA,iBAAA,EAAI,IAAAC,4BAAA,EAAiBZ,SAAjB,CAAJ;IACA;;IACDO,QAAQ,CAACP,SAAD,CAAR;EACA,CA3BD,EA2BG,CAACA,SAAD,CA3BH;EA6BA,IAAAa,sBAAA,EAAgB,YAAM;IACrB;IACA;IACAhB,QAAQ;EACR,CAJD,EAIG,CAACG,SAAD,CAJH;EAMA,OAAO;IACN;IACAc,aAAa,EAAEd,SAFT;IAIN;IACA;IACA;IACAI,QAAQ,EAARA,QAPM;IASN;IACAG,QAAQ,EAAEN;EAVJ,CAAP;AAYA"}

package/commonjs/react/useStyle.js

@@ -11,16 +11,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function useStyle(_ref) {
   var tbody = _ref.tbody,
-      getNextState = _ref.getNextState;
+      state = _ref.state;
 
   if (tbody) {
     return;
   }
 
-  var _getNextState = getNextState(),
-      beforeItemsHeight = _getNextState.beforeItemsHeight,
-      afterItemsHeight = _getNextState.afterItemsHeight;
-
+  var beforeItemsHeight = state.beforeItemsHeight,
+      afterItemsHeight = state.afterItemsHeight;
   return {
     paddingTop: (0, _px["default"])(beforeItemsHeight),
     paddingBottom: (0, _px["default"])(afterItemsHeight)

package/commonjs/react/useStyle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyle.js","names":["useStyle","tbody","getNextState","beforeItemsHeight","afterItemsHeight","paddingTop","px","paddingBottom"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\n\r\nexport default function useStyle({\r\n\ttbody,\r\n\tgetNextState\r\n}) {\r\n\tif (tbody) {\r\n\t\treturn\r\n\t}\r\n\r\n\tconst {\r\n\t\tbeforeItemsHeight,\r\n\t\tafterItemsHeight\r\n\t} = getNextState()\r\n\r\n\treturn {\r\n\t\tpaddingTop: px(beforeItemsHeight),\r\n\t\tpaddingBottom: px(afterItemsHeight)\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;AAEe,SAASA,QAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,YACE,QADFA,YACE;;EACF,IAAID,KAAJ,EAAW;IACV;EACA;;EAED,oBAGIC,YAAY,EAHhB;EAAA,IACCC,iBADD,iBACCA,iBADD;EAAA,IAECC,gBAFD,iBAECA,gBAFD;;EAKA,OAAO;IACNC,UAAU,EAAE,IAAAC,cAAA,EAAGH,iBAAH,CADN;IAENI,aAAa,EAAE,IAAAD,cAAA,EAAGF,gBAAH;EAFT,CAAP;AAIA"}
+{"version":3,"file":"useStyle.js","names":["useStyle","tbody","state","beforeItemsHeight","afterItemsHeight","paddingTop","px","paddingBottom"],"sources":["../../source/react/useStyle.js"],"sourcesContent":["import px from '../utility/px.js'\r\n\r\nexport default function useStyle({\r\n\ttbody,\r\n\tstate\r\n}) {\r\n\tif (tbody) {\r\n\t\treturn\r\n\t}\r\n\r\n\tconst {\r\n\t\tbeforeItemsHeight,\r\n\t\tafterItemsHeight\r\n\t} = state\r\n\r\n\treturn {\r\n\t\tpaddingTop: px(beforeItemsHeight),\r\n\t\tpaddingBottom: px(afterItemsHeight)\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;AAEe,SAASA,QAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,KACE,QADFA,KACE;;EACF,IAAID,KAAJ,EAAW;IACV;EACA;;EAED,IACCE,iBADD,GAGID,KAHJ,CACCC,iBADD;EAAA,IAECC,gBAFD,GAGIF,KAHJ,CAECE,gBAFD;EAKA,OAAO;IACNC,UAAU,EAAE,IAAAC,cAAA,EAAGH,iBAAH,CADN;IAENI,aAAa,EAAE,IAAAD,cAAA,EAAGF,gBAAH;EAFT,CAAP;AAIA"}

package/commonjs/react/useUpdateItemKeysOnItemsChange.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useUpdateItemKeysOnItemsChange;
+
+var _debug = _interopRequireDefault(require("../utility/debug.js"));
+
+var _useOnChange = _interopRequireDefault(require("./useOnChange.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+// If the order of the `items` changes, or new `items` get prepended resulting in a "shift":
+//
+// * Re-generate the React `key` prefix for item elements
+//   so that all item components are re-rendered for the new `items` list.
+//   That's because item components may have their own internal state,
+//   and simply passing another `item` property for an item component
+//   might result in bugs, which React would do with its "re-using" policy
+//   if the unique `key` workaround hasn't been used.
+//
+function useUpdateItemKeysOnItemsChange(itemsBeingRendered, _ref) {
+  var virtualScroller = _ref.virtualScroller,
+      usesAutogeneratedItemKeys = _ref.usesAutogeneratedItemKeys,
+      updateItemKeysForNewItems = _ref.updateItemKeysForNewItems;
+  // Update item keys if the items being rendered have changed.
+  (0, _useOnChange["default"])(itemsBeingRendered, function (itemsBeingRendered, previousItemsBeingRendered) {
+    if (!usesAutogeneratedItemKeys) {
+      return;
+    }
+
+    (0, _debug["default"])('React: ~ Different `items` are about to be rendered', itemsBeingRendered);
+    var shouldUpdateItemKeys = true;
+    var itemsDiff = virtualScroller.getItemsDiff(previousItemsBeingRendered, itemsBeingRendered); // `itemsDiff` will be `undefined` in case of a non-incremental items list change.
+
+    if (itemsDiff) {
+      var prependedItemsCount = itemsDiff.prependedItemsCount,
+          appendedItemsCount = itemsDiff.appendedItemsCount;
+
+      if (prependedItemsCount === 0 && appendedItemsCount === 0) {
+        (0, _debug["default"])('React: ~ The `items` elements to be rendered are identical to the previously rendered ones'); // The items order hasn't changed.
+        // No need to re-generate the `key` prefix.
+
+        shouldUpdateItemKeys = false;
+      } else if (prependedItemsCount === 0 && appendedItemsCount > 0) {
+        (0, _debug["default"])('React: ~ The `items` elements order hasn\'t changed:', appendedItemsCount, 'items have been appended'); // The item order hasn't changed.
+        // No need to re-generate the `key` prefix.
+
+        shouldUpdateItemKeys = false;
+      }
+    } // Update React element `key`s for the new set of `items`.
+
+
+    if (shouldUpdateItemKeys) {
+      (0, _debug["default"])('React: ~ Update item `key`s');
+      updateItemKeysForNewItems();
+    }
+  });
+}
+//# sourceMappingURL=useUpdateItemKeysOnItemsChange.js.map

package/commonjs/react/useUpdateItemKeysOnItemsChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateItemKeysOnItemsChange.js","names":["useUpdateItemKeysOnItemsChange","itemsBeingRendered","virtualScroller","usesAutogeneratedItemKeys","updateItemKeysForNewItems","useOnChange","previousItemsBeingRendered","log","shouldUpdateItemKeys","itemsDiff","getItemsDiff","prependedItemsCount","appendedItemsCount"],"sources":["../../source/react/useUpdateItemKeysOnItemsChange.js"],"sourcesContent":["import log from '../utility/debug.js'\r\n\r\nimport useOnChange from './useOnChange.js'\r\n\r\n// If the order of the `items` changes, or new `items` get prepended resulting in a \"shift\":\r\n//\r\n// * Re-generate the React `key` prefix for item elements\r\n//   so that all item components are re-rendered for the new `items` list.\r\n//   That's because item components may have their own internal state,\r\n//   and simply passing another `item` property for an item component\r\n//   might result in bugs, which React would do with its \"re-using\" policy\r\n//   if the unique `key` workaround hasn't been used.\r\n//\r\nexport default function useUpdateItemKeysOnItemsChange(itemsBeingRendered, {\r\n\tvirtualScroller,\r\n\tusesAutogeneratedItemKeys,\r\n\tupdateItemKeysForNewItems\r\n}) {\r\n\t// Update item keys if the items being rendered have changed.\r\n\tuseOnChange(itemsBeingRendered, (itemsBeingRendered, previousItemsBeingRendered) => {\r\n\t\tif (!usesAutogeneratedItemKeys) {\r\n\t\t\treturn\r\n\t\t}\r\n\r\n\t\tlog('React: ~ Different `items` are about to be rendered', itemsBeingRendered)\r\n\r\n\t\tlet shouldUpdateItemKeys = true\r\n\r\n\t\tconst itemsDiff = virtualScroller.getItemsDiff(previousItemsBeingRendered, itemsBeingRendered)\r\n\r\n\t\t// `itemsDiff` will be `undefined` in case of a non-incremental items list change.\r\n\t\tif (itemsDiff) {\r\n\t\t\tconst {\r\n\t\t\t\tprependedItemsCount,\r\n\t\t\t\tappendedItemsCount\r\n\t\t\t} = itemsDiff\r\n\t\t\tif (prependedItemsCount === 0 && appendedItemsCount === 0) {\r\n\t\t\t\tlog('React: ~ The `items` elements to be rendered are identical to the previously rendered ones')\r\n\t\t\t\t// The items order hasn't changed.\r\n\t\t\t\t// No need to re-generate the `key` prefix.\r\n\t\t\t\tshouldUpdateItemKeys = false\r\n\t\t\t}\r\n\t\t\telse if (prependedItemsCount === 0 && appendedItemsCount > 0) {\r\n\t\t\t\tlog('React: ~ The `items` elements order hasn\\'t changed:', appendedItemsCount, 'items have been appended')\r\n\t\t\t\t// The item order hasn't changed.\r\n\t\t\t\t// No need to re-generate the `key` prefix.\r\n\t\t\t\tshouldUpdateItemKeys = false\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t// Update React element `key`s for the new set of `items`.\r\n\t\tif (shouldUpdateItemKeys) {\r\n\t\t\tlog('React: ~ Update item `key`s')\r\n\t\t\tupdateItemKeysForNewItems()\r\n\t\t}\r\n\t})\r\n}"],"mappings":";;;;;;;AAAA;;AAEA;;;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,8BAAT,CAAwCC,kBAAxC,QAIZ;EAAA,IAHFC,eAGE,QAHFA,eAGE;EAAA,IAFFC,yBAEE,QAFFA,yBAEE;EAAA,IADFC,yBACE,QADFA,yBACE;EACF;EACA,IAAAC,uBAAA,EAAYJ,kBAAZ,EAAgC,UAACA,kBAAD,EAAqBK,0BAArB,EAAoD;IACnF,IAAI,CAACH,yBAAL,EAAgC;MAC/B;IACA;;IAED,IAAAI,iBAAA,EAAI,qDAAJ,EAA2DN,kBAA3D;IAEA,IAAIO,oBAAoB,GAAG,IAA3B;IAEA,IAAMC,SAAS,GAAGP,eAAe,CAACQ,YAAhB,CAA6BJ,0BAA7B,EAAyDL,kBAAzD,CAAlB,CATmF,CAWnF;;IACA,IAAIQ,SAAJ,EAAe;MACd,IACCE,mBADD,GAGIF,SAHJ,CACCE,mBADD;MAAA,IAECC,kBAFD,GAGIH,SAHJ,CAECG,kBAFD;;MAIA,IAAID,mBAAmB,KAAK,CAAxB,IAA6BC,kBAAkB,KAAK,CAAxD,EAA2D;QAC1D,IAAAL,iBAAA,EAAI,4FAAJ,EAD0D,CAE1D;QACA;;QACAC,oBAAoB,GAAG,KAAvB;MACA,CALD,MAMK,IAAIG,mBAAmB,KAAK,CAAxB,IAA6BC,kBAAkB,GAAG,CAAtD,EAAyD;QAC7D,IAAAL,iBAAA,EAAI,sDAAJ,EAA4DK,kBAA5D,EAAgF,0BAAhF,EAD6D,CAE7D;QACA;;QACAJ,oBAAoB,GAAG,KAAvB;MACA;IACD,CA7BkF,CA+BnF;;;IACA,IAAIA,oBAAJ,EAA0B;MACzB,IAAAD,iBAAA,EAAI,6BAAJ;MACAH,yBAAyB;IACzB;EACD,CApCD;AAqCA"}

package/commonjs/test/ItemsContainer.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _ItemNotRenderedError = _interopRequireDefault(require("../ItemNotRenderedError.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -37,6 +41,14 @@ var ItemsContainer = /*#__PURE__*/function () {
       var rowWidth;
       var rowHeight;
       var startNewRow = true;
+
+      if (renderedElementIndex > children.length - 1) {
+        throw new _ItemNotRenderedError["default"]({
+          renderedElementIndex: renderedElementIndex,
+          renderedElementsCount: children.length
+        });
+      }
+
       var i = 0;
 
       while (i <= renderedElementIndex) {
@@ -73,7 +85,16 @@ var ItemsContainer = /*#__PURE__*/function () {
   }, {
     key: "getNthRenderedItemHeight",
     value: function getNthRenderedItemHeight(renderedElementIndex) {
-      return this.getElement().children[renderedElementIndex].height;
+      var children = this.getElement().children;
+
+      if (renderedElementIndex > children.length - 1) {
+        throw new _ItemNotRenderedError["default"]({
+          renderedElementIndex: renderedElementIndex,
+          renderedElementsCount: children.length
+        });
+      }
+
+      return children[renderedElementIndex].height;
     }
     /**
      * Returns items container height.

package/commonjs/test/ItemsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemsContainer.js","names":["ItemsContainer","getElement","renderedElementIndex","children","maxWidth","width","topOffset","paddingTop","rowWidth","rowHeight","startNewRow","i","marginTop","height","Math","max","contentHeight","length","verticalSpacing","paddingBottom"],"sources":["../../source/test/ItemsContainer.js"],"sourcesContent":["export default class ItemsContainer {\r\n\t/**\r\n\t * Constructs a new \"container\" from an element.\r\n\t * @param {function} getElement\r\n\t */\r\n\tconstructor(getElement) {\r\n\t\tthis.getElement = getElement\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's \"top offset\", relative to the items `container`'s top edge.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemTopOffset(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet topOffset = this.getElement().paddingTop\r\n\t\tlet rowWidth\r\n\t\tlet rowHeight\r\n\t\tlet startNewRow = true\r\n\t\tlet i = 0\r\n\t\twhile (i <= renderedElementIndex) {\r\n\t\t\tif (startNewRow || rowWidth + children[i].width > maxWidth) {\r\n\t\t\t\tif (i > 0) {\r\n\t\t\t\t\ttopOffset += rowHeight\r\n\t\t\t\t\ttopOffset += children[i].marginTop\r\n\t\t\t\t}\r\n\t\t\t\trowWidth = children[i].width\r\n\t\t\t\trowHeight = children[i].height\r\n\t\t\t\tif (rowWidth > maxWidth) {\r\n\t\t\t\t\tstartNewRow = true\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstartNewRow = false\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\trowWidth += children[i].width\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].height)\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\t\treturn topOffset\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's height.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemHeight(renderedElementIndex) {\r\n\t\treturn this.getElement().children[renderedElementIndex].height\r\n\t}\r\n\r\n\t/**\r\n\t * Returns items container height.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet contentHeight = this.getElement().paddingTop\r\n\t\tlet i = 0\r\n\t\twhile (i < children.length) {\r\n\t\t\tlet rowWidth = 0\r\n\t\t\tlet rowHeight = 0\r\n\t\t\twhile (rowWidth <= maxWidth && i < children.length) {\r\n\t\t\t\tif (rowWidth === 0 && i > 0) {\r\n\t\t\t\t\tconst verticalSpacing = children[i].marginTop\r\n\t\t\t\t\tcontentHeight += verticalSpacing\r\n\t\t\t\t}\r\n\t\t\t\trowWidth += children[i].width\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].height)\r\n\t\t\t\ti++\r\n\t\t\t}\r\n\t\t\tcontentHeight += rowHeight\r\n\t\t}\r\n\t\tcontentHeight += this.getElement().paddingBottom\r\n\t\treturn contentHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Removes all item elements of an items container.\r\n\t */\r\n\tclear() {\r\n\t\tthis.getElement().children = []\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;;IAAqBA,c;EACpB;AACD;AACA;AACA;EACC,wBAAYC,UAAZ,EAAwB;IAAA;;IACvB,KAAKA,UAAL,GAAkBA,UAAlB;EACA;EAED;AACD;AACA;AACA;AACA;;;;;WACC,qCAA4BC,oBAA5B,EAAkD;MACjD,IAAMC,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;MACA,IAAMC,QAAQ,GAAG,KAAKH,UAAL,GAAkBI,KAAnC;MACA,IAAIC,SAAS,GAAG,KAAKL,UAAL,GAAkBM,UAAlC;MACA,IAAIC,QAAJ;MACA,IAAIC,SAAJ;MACA,IAAIC,WAAW,GAAG,IAAlB;MACA,IAAIC,CAAC,GAAG,CAAR;;MACA,OAAOA,CAAC,IAAIT,oBAAZ,EAAkC;QACjC,IAAIQ,WAAW,IAAIF,QAAQ,GAAGL,QAAQ,CAACQ,CAAD,CAAR,CAAYN,KAAvB,GAA+BD,QAAlD,EAA4D;UAC3D,IAAIO,CAAC,GAAG,CAAR,EAAW;YACVL,SAAS,IAAIG,SAAb;YACAH,SAAS,IAAIH,QAAQ,CAACQ,CAAD,CAAR,CAAYC,SAAzB;UACA;;UACDJ,QAAQ,GAAGL,QAAQ,CAACQ,CAAD,CAAR,CAAYN,KAAvB;UACAI,SAAS,GAAGN,QAAQ,CAACQ,CAAD,CAAR,CAAYE,MAAxB;;UACA,IAAIL,QAAQ,GAAGJ,QAAf,EAAyB;YACxBM,WAAW,GAAG,IAAd;UACA,CAFD,MAEO;YACNA,WAAW,GAAG,KAAd;UACA;QACD,CAZD,MAYO;UACNF,QAAQ,IAAIL,QAAQ,CAACQ,CAAD,CAAR,CAAYN,KAAxB;UACAI,SAAS,GAAGK,IAAI,CAACC,GAAL,CAASN,SAAT,EAAoBN,QAAQ,CAACQ,CAAD,CAAR,CAAYE,MAAhC,CAAZ;QACA;;QACDF,CAAC;MACD;;MACD,OAAOL,SAAP;IACA;IAED;AACD;AACA;AACA;AACA;;;;WACC,kCAAyBJ,oBAAzB,EAA+C;MAC9C,OAAO,KAAKD,UAAL,GAAkBE,QAAlB,CAA2BD,oBAA3B,EAAiDW,MAAxD;IACA;IAED;AACD;AACA;AACA;;;;WACC,qBAAY;MACX,IAAMV,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;MACA,IAAMC,QAAQ,GAAG,KAAKH,UAAL,GAAkBI,KAAnC;MACA,IAAIW,aAAa,GAAG,KAAKf,UAAL,GAAkBM,UAAtC;MACA,IAAII,CAAC,GAAG,CAAR;;MACA,OAAOA,CAAC,GAAGR,QAAQ,CAACc,MAApB,EAA4B;QAC3B,IAAIT,QAAQ,GAAG,CAAf;QACA,IAAIC,SAAS,GAAG,CAAhB;;QACA,OAAOD,QAAQ,IAAIJ,QAAZ,IAAwBO,CAAC,GAAGR,QAAQ,CAACc,MAA5C,EAAoD;UACnD,IAAIT,QAAQ,KAAK,CAAb,IAAkBG,CAAC,GAAG,CAA1B,EAA6B;YAC5B,IAAMO,eAAe,GAAGf,QAAQ,CAACQ,CAAD,CAAR,CAAYC,SAApC;YACAI,aAAa,IAAIE,eAAjB;UACA;;UACDV,QAAQ,IAAIL,QAAQ,CAACQ,CAAD,CAAR,CAAYN,KAAxB;UACAI,SAAS,GAAGK,IAAI,CAACC,GAAL,CAASN,SAAT,EAAoBN,QAAQ,CAACQ,CAAD,CAAR,CAAYE,MAAhC,CAAZ;UACAF,CAAC;QACD;;QACDK,aAAa,IAAIP,SAAjB;MACA;;MACDO,aAAa,IAAI,KAAKf,UAAL,GAAkBkB,aAAnC;MACA,OAAOH,aAAP;IACA;IAED;AACD;AACA;;;;WACC,iBAAQ;MACP,KAAKf,UAAL,GAAkBE,QAAlB,GAA6B,EAA7B;IACA"}
+{"version":3,"file":"ItemsContainer.js","names":["ItemsContainer","getElement","renderedElementIndex","children","maxWidth","width","topOffset","paddingTop","rowWidth","rowHeight","startNewRow","length","ItemNotRenderedError","renderedElementsCount","i","marginTop","height","Math","max","contentHeight","verticalSpacing","paddingBottom"],"sources":["../../source/test/ItemsContainer.js"],"sourcesContent":["import ItemNotRenderedError from '../ItemNotRenderedError.js'\r\n\r\nexport default class ItemsContainer {\r\n\t/**\r\n\t * Constructs a new \"container\" from an element.\r\n\t * @param {function} getElement\r\n\t */\r\n\tconstructor(getElement) {\r\n\t\tthis.getElement = getElement\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's \"top offset\", relative to the items `container`'s top edge.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemTopOffset(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet topOffset = this.getElement().paddingTop\r\n\r\n\t\tlet rowWidth\r\n\t\tlet rowHeight\r\n\t\tlet startNewRow = true\r\n\r\n\t\tif (renderedElementIndex > children.length - 1) {\r\n\t\t\tthrow new ItemNotRenderedError({\r\n\t\t\t\trenderedElementIndex,\r\n\t\t\t\trenderedElementsCount: children.length\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\tlet i = 0\r\n\t\twhile (i <= renderedElementIndex) {\r\n\t\t\tif (startNewRow || rowWidth + children[i].width > maxWidth) {\r\n\t\t\t\tif (i > 0) {\r\n\t\t\t\t\ttopOffset += rowHeight\r\n\t\t\t\t\ttopOffset += children[i].marginTop\r\n\t\t\t\t}\r\n\t\t\t\trowWidth = children[i].width\r\n\t\t\t\trowHeight = children[i].height\r\n\t\t\t\tif (rowWidth > maxWidth) {\r\n\t\t\t\t\tstartNewRow = true\r\n\t\t\t\t} else {\r\n\t\t\t\t\tstartNewRow = false\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\trowWidth += children[i].width\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].height)\r\n\t\t\t}\r\n\t\t\ti++\r\n\t\t}\r\n\r\n\t\treturn topOffset\r\n\t}\r\n\r\n\t/**\r\n\t * Returns an item element's height.\r\n\t * @param  {number} renderedElementIndex — An index of an item relative to the \"first shown item index\". For example, if the list is showing items from index 8 to index 12 then `renderedElementIndex = 0` would mean the item at index `8`.\r\n\t * @return {number}\r\n\t */\r\n\tgetNthRenderedItemHeight(renderedElementIndex) {\r\n\t\tconst children = this.getElement().children\r\n\r\n\t\tif (renderedElementIndex > children.length - 1) {\r\n\t\t\tthrow new ItemNotRenderedError({\r\n\t\t\t\trenderedElementIndex,\r\n\t\t\t\trenderedElementsCount: children.length\r\n\t\t\t})\r\n\t\t}\r\n\r\n\t\treturn children[renderedElementIndex].height\r\n\t}\r\n\r\n\t/**\r\n\t * Returns items container height.\r\n\t * @return {number}\r\n\t */\r\n\tgetHeight() {\r\n\t\tconst children = this.getElement().children\r\n\t\tconst maxWidth = this.getElement().width\r\n\t\tlet contentHeight = this.getElement().paddingTop\r\n\t\tlet i = 0\r\n\t\twhile (i < children.length) {\r\n\t\t\tlet rowWidth = 0\r\n\t\t\tlet rowHeight = 0\r\n\t\t\twhile (rowWidth <= maxWidth && i < children.length) {\r\n\t\t\t\tif (rowWidth === 0 && i > 0) {\r\n\t\t\t\t\tconst verticalSpacing = children[i].marginTop\r\n\t\t\t\t\tcontentHeight += verticalSpacing\r\n\t\t\t\t}\r\n\t\t\t\trowWidth += children[i].width\r\n\t\t\t\trowHeight = Math.max(rowHeight, children[i].height)\r\n\t\t\t\ti++\r\n\t\t\t}\r\n\t\t\tcontentHeight += rowHeight\r\n\t\t}\r\n\t\tcontentHeight += this.getElement().paddingBottom\r\n\t\treturn contentHeight\r\n\t}\r\n\r\n\t/**\r\n\t * Removes all item elements of an items container.\r\n\t */\r\n\tclear() {\r\n\t\tthis.getElement().children = []\r\n\t}\r\n}"],"mappings":";;;;;;;AAAA;;;;;;;;;;IAEqBA,c;EACpB;AACD;AACA;AACA;EACC,wBAAYC,UAAZ,EAAwB;IAAA;;IACvB,KAAKA,UAAL,GAAkBA,UAAlB;EACA;EAED;AACD;AACA;AACA;AACA;;;;;WACC,qCAA4BC,oBAA5B,EAAkD;MACjD,IAAMC,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;MACA,IAAMC,QAAQ,GAAG,KAAKH,UAAL,GAAkBI,KAAnC;MACA,IAAIC,SAAS,GAAG,KAAKL,UAAL,GAAkBM,UAAlC;MAEA,IAAIC,QAAJ;MACA,IAAIC,SAAJ;MACA,IAAIC,WAAW,GAAG,IAAlB;;MAEA,IAAIR,oBAAoB,GAAGC,QAAQ,CAACQ,MAAT,GAAkB,CAA7C,EAAgD;QAC/C,MAAM,IAAIC,gCAAJ,CAAyB;UAC9BV,oBAAoB,EAApBA,oBAD8B;UAE9BW,qBAAqB,EAAEV,QAAQ,CAACQ;QAFF,CAAzB,CAAN;MAIA;;MAED,IAAIG,CAAC,GAAG,CAAR;;MACA,OAAOA,CAAC,IAAIZ,oBAAZ,EAAkC;QACjC,IAAIQ,WAAW,IAAIF,QAAQ,GAAGL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAvB,GAA+BD,QAAlD,EAA4D;UAC3D,IAAIU,CAAC,GAAG,CAAR,EAAW;YACVR,SAAS,IAAIG,SAAb;YACAH,SAAS,IAAIH,QAAQ,CAACW,CAAD,CAAR,CAAYC,SAAzB;UACA;;UACDP,QAAQ,GAAGL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAvB;UACAI,SAAS,GAAGN,QAAQ,CAACW,CAAD,CAAR,CAAYE,MAAxB;;UACA,IAAIR,QAAQ,GAAGJ,QAAf,EAAyB;YACxBM,WAAW,GAAG,IAAd;UACA,CAFD,MAEO;YACNA,WAAW,GAAG,KAAd;UACA;QACD,CAZD,MAYO;UACNF,QAAQ,IAAIL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAxB;UACAI,SAAS,GAAGQ,IAAI,CAACC,GAAL,CAAST,SAAT,EAAoBN,QAAQ,CAACW,CAAD,CAAR,CAAYE,MAAhC,CAAZ;QACA;;QACDF,CAAC;MACD;;MAED,OAAOR,SAAP;IACA;IAED;AACD;AACA;AACA;AACA;;;;WACC,kCAAyBJ,oBAAzB,EAA+C;MAC9C,IAAMC,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;;MAEA,IAAID,oBAAoB,GAAGC,QAAQ,CAACQ,MAAT,GAAkB,CAA7C,EAAgD;QAC/C,MAAM,IAAIC,gCAAJ,CAAyB;UAC9BV,oBAAoB,EAApBA,oBAD8B;UAE9BW,qBAAqB,EAAEV,QAAQ,CAACQ;QAFF,CAAzB,CAAN;MAIA;;MAED,OAAOR,QAAQ,CAACD,oBAAD,CAAR,CAA+Bc,MAAtC;IACA;IAED;AACD;AACA;AACA;;;;WACC,qBAAY;MACX,IAAMb,QAAQ,GAAG,KAAKF,UAAL,GAAkBE,QAAnC;MACA,IAAMC,QAAQ,GAAG,KAAKH,UAAL,GAAkBI,KAAnC;MACA,IAAIc,aAAa,GAAG,KAAKlB,UAAL,GAAkBM,UAAtC;MACA,IAAIO,CAAC,GAAG,CAAR;;MACA,OAAOA,CAAC,GAAGX,QAAQ,CAACQ,MAApB,EAA4B;QAC3B,IAAIH,QAAQ,GAAG,CAAf;QACA,IAAIC,SAAS,GAAG,CAAhB;;QACA,OAAOD,QAAQ,IAAIJ,QAAZ,IAAwBU,CAAC,GAAGX,QAAQ,CAACQ,MAA5C,EAAoD;UACnD,IAAIH,QAAQ,KAAK,CAAb,IAAkBM,CAAC,GAAG,CAA1B,EAA6B;YAC5B,IAAMM,eAAe,GAAGjB,QAAQ,CAACW,CAAD,CAAR,CAAYC,SAApC;YACAI,aAAa,IAAIC,eAAjB;UACA;;UACDZ,QAAQ,IAAIL,QAAQ,CAACW,CAAD,CAAR,CAAYT,KAAxB;UACAI,SAAS,GAAGQ,IAAI,CAACC,GAAL,CAAST,SAAT,EAAoBN,QAAQ,CAACW,CAAD,CAAR,CAAYE,MAAhC,CAAZ;UACAF,CAAC;QACD;;QACDK,aAAa,IAAIV,SAAjB;MACA;;MACDU,aAAa,IAAI,KAAKlB,UAAL,GAAkBoB,aAAnC;MACA,OAAOF,aAAP;IACA;IAED;AACD;AACA;;;;WACC,iBAAQ;MACP,KAAKlB,UAAL,GAAkBE,QAAlB,GAA6B,EAA7B;IACA"}

package/commonjs/utility/debug.js

@@ -49,16 +49,30 @@ function warn() {
   }
 }
 
-function reportError() {
+function error() {
+  var _console3;
+
   for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
     args[_key3] = arguments[_key3];
   }
 
+  (_console3 = console).error.apply(_console3, _toConsumableArray(['[virtual-scroller]'].concat(args)));
+}
+
+function reportError() {
+  for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+    args[_key4] = arguments[_key4];
+  }
+
+  var createError = function createError() {
+    return new Error(['[virtual-scroller]'].concat(args).join(' '));
+  };
+
   if (typeof window !== 'undefined') {
     // In a web browser.
     // Output a debug message immediately so that it's known
     // at which point did the error occur between other debug logs.
-    log.apply(this, ['ERROR'].concat(args));
+    error.apply(this, ['ERROR'].concat(args));
     setTimeout(function () {
       // Throw an error in a timeout so that it doesn't interrupt the application's flow.
       // At the same time, by throwing a client-side error, such error could be spotted
@@ -66,13 +80,23 @@ function reportError() {
       // in the console.
       // The `.join(' ')` part doesn't support stringifying JSON objects,
       // but those don't seem to be used in any of the error messages.
-      throw new Error(['[virtual-scroller]'].concat(args).join(' '));
+      throw createError();
     }, 0);
   } else {
-    var _console3;
+    // In Node.js.
+    // If tests are being run, throw in case of any errors.
+    var catchError = getGlobalVariable('VirtualScrollerCatchError');
+
+    if (catchError) {
+      return catchError(createError());
+    }
+
+    if (getGlobalVariable('VirtualScrollerThrowErrors')) {
+      throw createError();
+    } // Print the error in the console.
+
 
-    // On a server.
-    (_console3 = console).error.apply(_console3, _toConsumableArray(['[virtual-scroller]'].concat(args)));
+    error.apply(this, ['ERROR'].concat(args));
   }
 }
 

package/commonjs/utility/debug.js.map

@@ -1 +1 @@
-{"version":3,"file":"debug.js","names":["log","isDebug","args","console","concat","warn","isWarn","warningsAreErrors","reportError","apply","window","setTimeout","Error","join","error","debug","getDebug","undefined","getGlobalVariable","name","global"],"sources":["../../source/utility/debug.js"],"sourcesContent":["export default function log(...args) {\r\n\tif (isDebug()) {\r\n\t\tconsole.log(...['[virtual-scroller]'].concat(args))\r\n\t}\r\n}\r\n\r\nexport function warn(...args) {\r\n\tif (isWarn()) {\r\n\t\tif (warningsAreErrors()) {\r\n\t\t\treturn reportError.apply(this, args)\r\n\t\t}\r\n\t\tconsole.warn(...['[virtual-scroller]'].concat(args))\r\n\t}\r\n}\r\n\r\nexport function reportError(...args) {\r\n\tif (typeof window !== 'undefined') {\r\n\t\t// In a web browser.\r\n\t\t// Output a debug message immediately so that it's known\r\n\t\t// at which point did the error occur between other debug logs.\r\n\t\tlog.apply(this, ['ERROR'].concat(args))\r\n\t\tsetTimeout(() => {\r\n\t\t\t// Throw an error in a timeout so that it doesn't interrupt the application's flow.\r\n\t\t\t// At the same time, by throwing a client-side error, such error could be spotted\r\n\t\t\t// in some error monitoring software like `sentry.io`, while also being visible\r\n\t\t\t// in the console.\r\n\t\t\t// The `.join(' ')` part doesn't support stringifying JSON objects,\r\n\t\t\t// but those don't seem to be used in any of the error messages.\r\n\t\t\tthrow new Error(['[virtual-scroller]'].concat(args).join(' '))\r\n\t\t}, 0)\r\n\t} else {\r\n\t\t// On a server.\r\n\t\tconsole.error(...['[virtual-scroller]'].concat(args))\r\n\t}\r\n}\r\n\r\nexport function isDebug() {\r\n\tconst debug = getDebug()\r\n\tif (debug !== undefined) {\r\n\t\treturn debug === true || debug === 'debug'\r\n\t}\r\n}\r\n\r\nexport function isWarn() {\r\n\t// const debug = getDebug()\r\n\t// return debug === undefined\r\n\t// \t|| debug === true\r\n\t// \t|| debug === 'debug'\r\n\t// \t|| debug === 'warn'\r\n\t//\r\n\treturn true\r\n}\r\n\r\nfunction getDebug() {\r\n\treturn getGlobalVariable('VirtualScrollerDebug')\r\n}\r\n\r\nfunction warningsAreErrors() {\r\n\treturn getGlobalVariable('VirtualScrollerWarningsAreErrors')\r\n}\r\n\r\nfunction getGlobalVariable(name) {\r\n\tif (typeof window !== 'undefined') {\r\n\t\treturn window[name]\r\n\t} else if (typeof global !== 'undefined') {\r\n\t\treturn global[name]\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAe,SAASA,GAAT,GAAsB;EACpC,IAAIC,OAAO,EAAX,EAAe;IAAA;;IAAA,kCADeC,IACf;MADeA,IACf;IAAA;;IACd,YAAAC,OAAO,EAACH,GAAR,oCAAe,CAAC,oBAAD,EAAuBI,MAAvB,CAA8BF,IAA9B,CAAf;EACA;AACD;;AAEM,SAASG,IAAT,GAAuB;EAC7B,IAAIC,MAAM,EAAV,EAAc;IAAA;;IAAA,mCADSJ,IACT;MADSA,IACT;IAAA;;IACb,IAAIK,iBAAiB,EAArB,EAAyB;MACxB,OAAOC,WAAW,CAACC,KAAZ,CAAkB,IAAlB,EAAwBP,IAAxB,CAAP;IACA;;IACD,aAAAC,OAAO,EAACE,IAAR,qCAAgB,CAAC,oBAAD,EAAuBD,MAAvB,CAA8BF,IAA9B,CAAhB;EACA;AACD;;AAEM,SAASM,WAAT,GAA8B;EAAA,mCAANN,IAAM;IAANA,IAAM;EAAA;;EACpC,IAAI,OAAOQ,MAAP,KAAkB,WAAtB,EAAmC;IAClC;IACA;IACA;IACAV,GAAG,CAACS,KAAJ,CAAU,IAAV,EAAgB,CAAC,OAAD,EAAUL,MAAV,CAAiBF,IAAjB,CAAhB;IACAS,UAAU,CAAC,YAAM;MAChB;MACA;MACA;MACA;MACA;MACA;MACA,MAAM,IAAIC,KAAJ,CAAU,CAAC,oBAAD,EAAuBR,MAAvB,CAA8BF,IAA9B,EAAoCW,IAApC,CAAyC,GAAzC,CAAV,CAAN;IACA,CARS,EAQP,CARO,CAAV;EASA,CAdD,MAcO;IAAA;;IACN;IACA,aAAAV,OAAO,EAACW,KAAR,qCAAiB,CAAC,oBAAD,EAAuBV,MAAvB,CAA8BF,IAA9B,CAAjB;EACA;AACD;;AAEM,SAASD,OAAT,GAAmB;EACzB,IAAMc,KAAK,GAAGC,QAAQ,EAAtB;;EACA,IAAID,KAAK,KAAKE,SAAd,EAAyB;IACxB,OAAOF,KAAK,KAAK,IAAV,IAAkBA,KAAK,KAAK,OAAnC;EACA;AACD;;AAEM,SAAST,MAAT,GAAkB;EACxB;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,IAAP;AACA;;AAED,SAASU,QAAT,GAAoB;EACnB,OAAOE,iBAAiB,CAAC,sBAAD,CAAxB;AACA;;AAED,SAASX,iBAAT,GAA6B;EAC5B,OAAOW,iBAAiB,CAAC,kCAAD,CAAxB;AACA;;AAED,SAASA,iBAAT,CAA2BC,IAA3B,EAAiC;EAChC,IAAI,OAAOT,MAAP,KAAkB,WAAtB,EAAmC;IAClC,OAAOA,MAAM,CAACS,IAAD,CAAb;EACA,CAFD,MAEO,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;IACzC,OAAOA,MAAM,CAACD,IAAD,CAAb;EACA;AACD"}
+{"version":3,"file":"debug.js","names":["log","isDebug","args","console","concat","warn","isWarn","warningsAreErrors","reportError","apply","error","createError","Error","join","window","setTimeout","catchError","getGlobalVariable","debug","getDebug","undefined","name","global"],"sources":["../../source/utility/debug.js"],"sourcesContent":["export default function log(...args) {\r\n\tif (isDebug()) {\r\n\t\tconsole.log(...['[virtual-scroller]'].concat(args))\r\n\t}\r\n}\r\n\r\nexport function warn(...args) {\r\n\tif (isWarn()) {\r\n\t\tif (warningsAreErrors()) {\r\n\t\t\treturn reportError.apply(this, args)\r\n\t\t}\r\n\t\tconsole.warn(...['[virtual-scroller]'].concat(args))\r\n\t}\r\n}\r\n\r\nfunction error(...args) {\r\n\tconsole.error(...['[virtual-scroller]'].concat(args))\r\n}\r\n\r\nexport function reportError(...args) {\r\n\tconst createError = () => new Error(['[virtual-scroller]'].concat(args).join(' '))\r\n\tif (typeof window !== 'undefined') {\r\n\t\t// In a web browser.\r\n\t\t// Output a debug message immediately so that it's known\r\n\t\t// at which point did the error occur between other debug logs.\r\n\t\terror.apply(this, ['ERROR'].concat(args))\r\n\t\tsetTimeout(() => {\r\n\t\t\t// Throw an error in a timeout so that it doesn't interrupt the application's flow.\r\n\t\t\t// At the same time, by throwing a client-side error, such error could be spotted\r\n\t\t\t// in some error monitoring software like `sentry.io`, while also being visible\r\n\t\t\t// in the console.\r\n\t\t\t// The `.join(' ')` part doesn't support stringifying JSON objects,\r\n\t\t\t// but those don't seem to be used in any of the error messages.\r\n\t\t\tthrow createError()\r\n\t\t}, 0)\r\n\t} else {\r\n\t\t// In Node.js.\r\n\t\t// If tests are being run, throw in case of any errors.\r\n\t\tconst catchError = getGlobalVariable('VirtualScrollerCatchError')\r\n\t\tif (catchError) {\r\n\t\t\treturn catchError(createError())\r\n\t\t}\r\n\t\tif (getGlobalVariable('VirtualScrollerThrowErrors')) {\r\n\t\t\tthrow createError()\r\n\t\t}\r\n\t\t// Print the error in the console.\r\n\t\terror.apply(this, ['ERROR'].concat(args))\r\n\t}\r\n}\r\n\r\nexport function isDebug() {\r\n\tconst debug = getDebug()\r\n\tif (debug !== undefined) {\r\n\t\treturn debug === true || debug === 'debug'\r\n\t}\r\n}\r\n\r\nexport function isWarn() {\r\n\t// const debug = getDebug()\r\n\t// return debug === undefined\r\n\t// \t|| debug === true\r\n\t// \t|| debug === 'debug'\r\n\t// \t|| debug === 'warn'\r\n\t//\r\n\treturn true\r\n}\r\n\r\nfunction getDebug() {\r\n\treturn getGlobalVariable('VirtualScrollerDebug')\r\n}\r\n\r\nfunction warningsAreErrors() {\r\n\treturn getGlobalVariable('VirtualScrollerWarningsAreErrors')\r\n}\r\n\r\nfunction getGlobalVariable(name) {\r\n\tif (typeof window !== 'undefined') {\r\n\t\treturn window[name]\r\n\t} else if (typeof global !== 'undefined') {\r\n\t\treturn global[name]\r\n\t}\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAe,SAASA,GAAT,GAAsB;EACpC,IAAIC,OAAO,EAAX,EAAe;IAAA;;IAAA,kCADeC,IACf;MADeA,IACf;IAAA;;IACd,YAAAC,OAAO,EAACH,GAAR,oCAAe,CAAC,oBAAD,EAAuBI,MAAvB,CAA8BF,IAA9B,CAAf;EACA;AACD;;AAEM,SAASG,IAAT,GAAuB;EAC7B,IAAIC,MAAM,EAAV,EAAc;IAAA;;IAAA,mCADSJ,IACT;MADSA,IACT;IAAA;;IACb,IAAIK,iBAAiB,EAArB,EAAyB;MACxB,OAAOC,WAAW,CAACC,KAAZ,CAAkB,IAAlB,EAAwBP,IAAxB,CAAP;IACA;;IACD,aAAAC,OAAO,EAACE,IAAR,qCAAgB,CAAC,oBAAD,EAAuBD,MAAvB,CAA8BF,IAA9B,CAAhB;EACA;AACD;;AAED,SAASQ,KAAT,GAAwB;EAAA;;EAAA,mCAANR,IAAM;IAANA,IAAM;EAAA;;EACvB,aAAAC,OAAO,EAACO,KAAR,qCAAiB,CAAC,oBAAD,EAAuBN,MAAvB,CAA8BF,IAA9B,CAAjB;AACA;;AAEM,SAASM,WAAT,GAA8B;EAAA,mCAANN,IAAM;IAANA,IAAM;EAAA;;EACpC,IAAMS,WAAW,GAAG,SAAdA,WAAc;IAAA,OAAM,IAAIC,KAAJ,CAAU,CAAC,oBAAD,EAAuBR,MAAvB,CAA8BF,IAA9B,EAAoCW,IAApC,CAAyC,GAAzC,CAAV,CAAN;EAAA,CAApB;;EACA,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;IAClC;IACA;IACA;IACAJ,KAAK,CAACD,KAAN,CAAY,IAAZ,EAAkB,CAAC,OAAD,EAAUL,MAAV,CAAiBF,IAAjB,CAAlB;IACAa,UAAU,CAAC,YAAM;MAChB;MACA;MACA;MACA;MACA;MACA;MACA,MAAMJ,WAAW,EAAjB;IACA,CARS,EAQP,CARO,CAAV;EASA,CAdD,MAcO;IACN;IACA;IACA,IAAMK,UAAU,GAAGC,iBAAiB,CAAC,2BAAD,CAApC;;IACA,IAAID,UAAJ,EAAgB;MACf,OAAOA,UAAU,CAACL,WAAW,EAAZ,CAAjB;IACA;;IACD,IAAIM,iBAAiB,CAAC,4BAAD,CAArB,EAAqD;MACpD,MAAMN,WAAW,EAAjB;IACA,CATK,CAUN;;;IACAD,KAAK,CAACD,KAAN,CAAY,IAAZ,EAAkB,CAAC,OAAD,EAAUL,MAAV,CAAiBF,IAAjB,CAAlB;EACA;AACD;;AAEM,SAASD,OAAT,GAAmB;EACzB,IAAMiB,KAAK,GAAGC,QAAQ,EAAtB;;EACA,IAAID,KAAK,KAAKE,SAAd,EAAyB;IACxB,OAAOF,KAAK,KAAK,IAAV,IAAkBA,KAAK,KAAK,OAAnC;EACA;AACD;;AAEM,SAASZ,MAAT,GAAkB;EACxB;EACA;EACA;EACA;EACA;EACA;EACA,OAAO,IAAP;AACA;;AAED,SAASa,QAAT,GAAoB;EACnB,OAAOF,iBAAiB,CAAC,sBAAD,CAAxB;AACA;;AAED,SAASV,iBAAT,GAA6B;EAC5B,OAAOU,iBAAiB,CAAC,kCAAD,CAAxB;AACA;;AAED,SAASA,iBAAT,CAA2BI,IAA3B,EAAiC;EAChC,IAAI,OAAOP,MAAP,KAAkB,WAAtB,EAAmC;IAClC,OAAOA,MAAM,CAACO,IAAD,CAAb;EACA,CAFD,MAEO,IAAI,OAAOC,MAAP,KAAkB,WAAtB,EAAmC;IACzC,OAAOA,MAAM,CAACD,IAAD,CAAb;EACA;AACD"}

package/dom/index.d.ts

@@ -21,6 +21,6 @@ export default class VirtualScroller<Item, ItemState = NoItemState> {
 	// start(): void;
 	stop(): void;
 	setItems(newItems: Item[], options?: SetItemsOptions): void;
-  onItemHeightChange(i: number): void;
+  onItemHeightDidChange(i: number): void;
   setItemState(i: number, newState: ItemState): void;
 }

package/index.cjs

@@ -1,4 +1,6 @@
 'use strict'
 
 exports = module.exports = require('./commonjs/VirtualScroller.js').default
+
+exports.ItemNotRenderedError = require('./commonjs/ItemNotRenderedError.js').default
 exports['default'] = require('./commonjs/VirtualScroller.js').default